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

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,18 @@
-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 }) => {
+    return (_jsxs("div", { className: className, style: {
+            width: "100%",
+            opacity: visible ? 1 : 0,
+            visibility: visible ? "visible" : "hidden",
+            transition: "opacity 0.2s ease, visibility 0.2s ease",
+            pointerEvents: visible ? "auto" : "none",
+        }, children: [_jsxs("div", { style: {
                     minHeight: `${BANNER_MIN_HEIGHT}px`,
                     padding: "16px",
                     borderRadius: "8px",
@@ -49,7 +55,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,27 +100,39 @@ 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;
+    if (!dismissChecked || !isInitialized || isLoading) {
+        return _jsx(TopBannerSkeleton, { className: className, visible: showSkeleton });
     }
     if (!banner) {
-        return null;
+        return (_jsx("div", { className: className, style: {
+                width: "100%",
+                height: 0,
+                overflow: "hidden",
+                opacity: 0,
+                visibility: "hidden",
+            }, "aria-hidden": "true" }));
     }
     if (renderBanner) {
-        return (_jsx(_Fragment, { children: renderBanner(banner, {
+        return (_jsx("div", { style: {
+                opacity: showBanner ? 1 : 0,
+                visibility: showBanner ? "visible" : "hidden",
+                transition: "opacity 0.3s ease, visibility 0.3s ease",
+                pointerEvents: showBanner ? "auto" : "none",
+            }, children: renderBanner(banner, {
                 onClose: handleClose,
                 onAction: handleAction,
             }) }));
     }
     return (_jsx("div", { className: className, style: {
             width: "100%",
-            minHeight: `${BANNER_MIN_HEIGHT}px`,
+            minHeight: showBanner ? `${BANNER_MIN_HEIGHT}px` : 0,
+            opacity: showBanner ? 1 : 0,
+            visibility: showBanner ? "visible" : "hidden",
+            transition: "opacity 0.3s ease, visibility 0.3s ease, min-height 0.3s ease",
+            pointerEvents: showBanner ? "auto" : "none",
+            overflow: "hidden",
         }, children: _jsx(Banner, { hideIcon: true, onDismiss: closable ? handleClose : undefined, children: _jsxs(InlineStack, { gap: "400", blockAlign: "center", wrap: false, children: [banner.icon && (_jsx("div", { style: { flexShrink: 0 }, children: _jsx("img", { src: banner.icon, alt: "", width: 72, height: 72, style: { borderRadius: "8px" }, loading: "eager" }) })), _jsx("div", { style: { flex: 1, minWidth: 0 }, children: _jsxs(BlockStack, { gap: "100", align: "space-between", children: [_jsxs(BlockStack, { gap: "100", children: [_jsx(Text, { variant: "headingSm", as: "h3", children: banner.title }), banner.description && (_jsx(Text, { variant: "bodyMd", tone: "subdued", as: "p", children: banner.description }))] }), banner.link && (_jsx("div", { style: { flexShrink: 0 }, children: _jsx(Button, { icon: ExternalIcon, onClick: handleAction, children: banner.linkText || "Learn More" }) }))] }) })] }) }) }));
 };

package/package.json

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