@bunnyapp/components 1.0.12 → 1.0.13

package/dist/cjs/index.js

@@ -1631,28 +1631,6 @@ var extraQueryClient = new reactQuery.QueryClient();
 function BunnyProvider(_a) {
     var accountId = _a.accountId, children = _a.children, _b = _a.darkMode, darkMode = _b === void 0 ? false : _b, queryClient = _a.queryClient, apiHost = _a.apiHost, token = _a.token, window = _a.window, onTokenExpired = _a.onTokenExpired;
     var graphQLClient = createGraphQLClient(token, apiHost || "");
-    var isMobile = common.useIsMobile();
-    var _c = React.useState(undefined), branding = _c[0], setBranding = _c[1];
-    // ====== START - Copied straight from PageContainer.tsx ========
-    var entityBranding = React.useMemo(function () {
-        var _a;
-        // This is to determine if the secondary color should be white or black
-        var brandColor = (branding === null || branding === void 0 ? void 0 : branding.brandColor)
-            ? "#" + ((_a = branding === null || branding === void 0 ? void 0 : branding.brandColor) === null || _a === void 0 ? void 0 : _a.toString(16))
-            : common.DEFAULT_BRAND_COLOR;
-        var secondaryColor = common.DEFAULT_SECONDARY_COLOR;
-        if (!isMobile && common.isColorTooDark(branding === null || branding === void 0 ? void 0 : branding.accentColor))
-            secondaryColor = "#ffffff";
-        var topNavImageUrl = (branding === null || branding === void 0 ? void 0 : branding.topNavImageUrl) || common.DEFAULT_TOP_NAV_IMAGE_URL;
-        var accentColor = (branding === null || branding === void 0 ? void 0 : branding.accentColor) || common.DEFAULT_ACCENT_COLOR;
-        return {
-            accentColor: accentColor,
-            brandColor: brandColor,
-            secondaryColor: secondaryColor,
-            topNavImageUrl: topNavImageUrl,
-        };
-    }, [branding, isMobile]);
-    // ============================= END ==============================
     React.useEffect(function () {
         var script = document.createElement("script");
         script.src = "https://js.finix.com/v/1/0/6/finix.js";
@@ -1670,44 +1648,35 @@ function BunnyProvider(_a) {
             token: token,
             window: window,
             onTokenExpired: onTokenExpired,
-        } }, { children: [jsxRuntime.jsx("div", __assign({ style: { position: "fixed", left: -2000000000 } }, { children: "test" })), jsxRuntime.jsx(reactQuery.QueryClientProvider, __assign({ client: queryClient || extraQueryClient }, { children: jsxRuntime.jsx(recoil.RecoilRoot, { children: jsxRuntime.jsx(BrandContext.Provider, __assign({ value: entityBranding }, { children: jsxRuntime.jsx(antd.ConfigProvider, __assign({ theme: {
-                                algorithm: darkMode
-                                    ? theme__default["default"].darkAlgorithm
-                                    : theme__default["default"].defaultAlgorithm,
-                                token: {
-                                    borderRadius: 4,
-                                    colorPrimary: entityBranding.brandColor,
-                                    colorLink: entityBranding.brandColor,
-                                    colorLinkActive: entityBranding.brandColor,
-                                    colorLinkHover: entityBranding.brandColor,
-                                    fontFamily: common.MARK_PRO,
-                                    colorBorder: common.INPUT_BORDER_COLOR,
-                                },
-                                components: {
-                                    Drawer: {
-                                        colorBgElevated: darkMode
-                                            ? "var(--row-background-dark)"
-                                            : common.SLATE_50,
-                                    },
-                                    Divider: {
-                                        colorSplit: darkMode ? common.SLATE_400 : common.SLATE_200,
-                                    },
-                                },
-                            } }, { children: jsxRuntime.jsx(SecondaryWrapper, __assign({ setBranding: setBranding }, { children: children })) })) })) }) }))] })));
+        } }, { children: [jsxRuntime.jsx("div", __assign({ style: { position: "fixed", left: -2000000000 } }, { children: "test" })), jsxRuntime.jsx(reactQuery.QueryClientProvider, __assign({ client: queryClient || extraQueryClient }, { children: jsxRuntime.jsx(ContextualWrapper, __assign({ darkMode: darkMode }, { children: children })) }))] })));
 }
-function SecondaryWrapper(_a) {
-    var children = _a.children, setBranding = _a.setBranding;
+function ContextualWrapper(_a) {
+    var children = _a.children, darkMode = _a.darkMode;
     var _b = React.useState(false), interFontLoaded = _b[0], setInterFontLoaded = _b[1];
     var _c = React.useContext(BunnyContext), apiHost = _c.apiHost, token = _c.token;
-    var brandingData = reactQuery.useQuery({
+    var branding = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.brandingKey,
         queryFn: function () { return getBranding({ token: token, apiHost: apiHost }); },
     }).data;
-    React.useEffect(function () {
-        if (brandingData) {
-            setBranding(brandingData);
-        }
-    }, [brandingData]);
+    var isMobile = common.useIsMobile();
+    var entityBranding = React.useMemo(function () {
+        var _a;
+        // This is to determine if the secondary color should be white or black
+        var brandColor = (branding === null || branding === void 0 ? void 0 : branding.brandColor)
+            ? "#" + ((_a = branding === null || branding === void 0 ? void 0 : branding.brandColor) === null || _a === void 0 ? void 0 : _a.toString(16))
+            : common.DEFAULT_BRAND_COLOR;
+        var secondaryColor = common.DEFAULT_SECONDARY_COLOR;
+        if (!isMobile && common.isColorTooDark(branding === null || branding === void 0 ? void 0 : branding.accentColor))
+            secondaryColor = "#ffffff";
+        var topNavImageUrl = (branding === null || branding === void 0 ? void 0 : branding.topNavImageUrl) || common.DEFAULT_TOP_NAV_IMAGE_URL;
+        var accentColor = (branding === null || branding === void 0 ? void 0 : branding.accentColor) || common.DEFAULT_ACCENT_COLOR;
+        return {
+            accentColor: accentColor,
+            brandColor: brandColor,
+            secondaryColor: secondaryColor,
+            topNavImageUrl: topNavImageUrl,
+        };
+    }, [branding, isMobile]);
     // Check if Inter font is loaded
     React.useEffect(function () {
         document.fonts.ready.then(function () {
@@ -1716,7 +1685,28 @@ function SecondaryWrapper(_a) {
     }, []);
     if (!interFontLoaded)
         return null;
-    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+    return (jsxRuntime.jsx(recoil.RecoilRoot, { children: jsxRuntime.jsx(BrandContext.Provider, __assign({ value: entityBranding }, { children: jsxRuntime.jsx(antd.ConfigProvider, __assign({ theme: {
+                    algorithm: darkMode ? theme__default["default"].darkAlgorithm : theme__default["default"].defaultAlgorithm,
+                    token: {
+                        borderRadius: 4,
+                        colorPrimary: entityBranding.brandColor,
+                        colorLink: entityBranding.brandColor,
+                        colorLinkActive: entityBranding.brandColor,
+                        colorLinkHover: entityBranding.brandColor,
+                        fontFamily: common.MARK_PRO,
+                        colorBorder: common.INPUT_BORDER_COLOR,
+                    },
+                    components: {
+                        Drawer: {
+                            colorBgElevated: darkMode
+                                ? "var(--row-background-dark)"
+                                : common.SLATE_50,
+                        },
+                        Divider: {
+                            colorSplit: darkMode ? common.SLATE_400 : common.SLATE_200,
+                        },
+                    },
+                } }, { children: children })) })) }));
 }
 
 var useAjax = function (onError) {

package/dist/esm/index.js

@@ -4,7 +4,7 @@ import React__default, { createContext, useContext, useEffect, useState, useMemo
 import { Markup } from 'interweave';
 import { ConfigProvider, Button, Typography, Tag, Divider, Popconfirm, Input, Checkbox, Collapse, Modal, Form, Drawer, Card as Card$1, Select, Image, Dropdown } from 'antd';
 import styled from 'styled-components';
-import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest, useIsMobile, isColorTooDark, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, QueryKeyFactory, getPlugins, invokePlugin, useErrorNotification, formatCurrency, GRAY_500, GRAY_200, useSuccessNotification, useAllErrorFormats, getFormattedInvoice, PAYABLE_INVOICE_STATES, DOCUMENT_NAME as DOCUMENT_NAME$1, useGraphQLmutation, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, Lists, getAccount, SubscriptionState as SubscriptionState$2, MODAL_MAX_HEIGHT, SLATE_500, StringUtils, DataInterval, TAG_COLORS, ChargeType } from '@bunnyapp/common';
+import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest, QueryKeyFactory, useIsMobile, isColorTooDark, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, getPlugins, invokePlugin, useErrorNotification, formatCurrency, GRAY_500, GRAY_200, useSuccessNotification, useAllErrorFormats, getFormattedInvoice, PAYABLE_INVOICE_STATES, DOCUMENT_NAME as DOCUMENT_NAME$1, useGraphQLmutation, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, Lists, getAccount, SubscriptionState as SubscriptionState$2, MODAL_MAX_HEIGHT, SLATE_500, StringUtils, DataInterval, TAG_COLORS, ChargeType } from '@bunnyapp/common';
 import { QueryClient, QueryClientProvider, useQuery, useQueryClient, useMutation, keepPreviousData } from '@tanstack/react-query';
 import theme from 'antd/lib/theme';
 import { RecoilRoot } from 'recoil';
@@ -1603,28 +1603,6 @@ var extraQueryClient = new QueryClient();
 function BunnyProvider(_a) {
     var accountId = _a.accountId, children = _a.children, _b = _a.darkMode, darkMode = _b === void 0 ? false : _b, queryClient = _a.queryClient, apiHost = _a.apiHost, token = _a.token, window = _a.window, onTokenExpired = _a.onTokenExpired;
     var graphQLClient = createGraphQLClient(token, apiHost || "");
-    var isMobile = useIsMobile();
-    var _c = useState(undefined), branding = _c[0], setBranding = _c[1];
-    // ====== START - Copied straight from PageContainer.tsx ========
-    var entityBranding = useMemo(function () {
-        var _a;
-        // This is to determine if the secondary color should be white or black
-        var brandColor = (branding === null || branding === void 0 ? void 0 : branding.brandColor)
-            ? "#" + ((_a = branding === null || branding === void 0 ? void 0 : branding.brandColor) === null || _a === void 0 ? void 0 : _a.toString(16))
-            : DEFAULT_BRAND_COLOR;
-        var secondaryColor = DEFAULT_SECONDARY_COLOR;
-        if (!isMobile && isColorTooDark(branding === null || branding === void 0 ? void 0 : branding.accentColor))
-            secondaryColor = "#ffffff";
-        var topNavImageUrl = (branding === null || branding === void 0 ? void 0 : branding.topNavImageUrl) || DEFAULT_TOP_NAV_IMAGE_URL;
-        var accentColor = (branding === null || branding === void 0 ? void 0 : branding.accentColor) || DEFAULT_ACCENT_COLOR;
-        return {
-            accentColor: accentColor,
-            brandColor: brandColor,
-            secondaryColor: secondaryColor,
-            topNavImageUrl: topNavImageUrl,
-        };
-    }, [branding, isMobile]);
-    // ============================= END ==============================
     useEffect(function () {
         var script = document.createElement("script");
         script.src = "https://js.finix.com/v/1/0/6/finix.js";
@@ -1642,44 +1620,35 @@ function BunnyProvider(_a) {
             token: token,
             window: window,
             onTokenExpired: onTokenExpired,
-        } }, { children: [jsx("div", __assign({ style: { position: "fixed", left: -2000000000 } }, { children: "test" })), jsx(QueryClientProvider, __assign({ client: queryClient || extraQueryClient }, { children: jsx(RecoilRoot, { children: jsx(BrandContext.Provider, __assign({ value: entityBranding }, { children: jsx(ConfigProvider, __assign({ theme: {
-                                algorithm: darkMode
-                                    ? theme.darkAlgorithm
-                                    : theme.defaultAlgorithm,
-                                token: {
-                                    borderRadius: 4,
-                                    colorPrimary: entityBranding.brandColor,
-                                    colorLink: entityBranding.brandColor,
-                                    colorLinkActive: entityBranding.brandColor,
-                                    colorLinkHover: entityBranding.brandColor,
-                                    fontFamily: MARK_PRO,
-                                    colorBorder: INPUT_BORDER_COLOR,
-                                },
-                                components: {
-                                    Drawer: {
-                                        colorBgElevated: darkMode
-                                            ? "var(--row-background-dark)"
-                                            : SLATE_50,
-                                    },
-                                    Divider: {
-                                        colorSplit: darkMode ? SLATE_400 : SLATE_200,
-                                    },
-                                },
-                            } }, { children: jsx(SecondaryWrapper, __assign({ setBranding: setBranding }, { children: children })) })) })) }) }))] })));
+        } }, { children: [jsx("div", __assign({ style: { position: "fixed", left: -2000000000 } }, { children: "test" })), jsx(QueryClientProvider, __assign({ client: queryClient || extraQueryClient }, { children: jsx(ContextualWrapper, __assign({ darkMode: darkMode }, { children: children })) }))] })));
 }
-function SecondaryWrapper(_a) {
-    var children = _a.children, setBranding = _a.setBranding;
+function ContextualWrapper(_a) {
+    var children = _a.children, darkMode = _a.darkMode;
     var _b = useState(false), interFontLoaded = _b[0], setInterFontLoaded = _b[1];
     var _c = useContext(BunnyContext), apiHost = _c.apiHost, token = _c.token;
-    var brandingData = useQuery({
+    var branding = useQuery({
         queryKey: QueryKeyFactory.default.brandingKey,
         queryFn: function () { return getBranding({ token: token, apiHost: apiHost }); },
     }).data;
-    useEffect(function () {
-        if (brandingData) {
-            setBranding(brandingData);
-        }
-    }, [brandingData]);
+    var isMobile = useIsMobile();
+    var entityBranding = useMemo(function () {
+        var _a;
+        // This is to determine if the secondary color should be white or black
+        var brandColor = (branding === null || branding === void 0 ? void 0 : branding.brandColor)
+            ? "#" + ((_a = branding === null || branding === void 0 ? void 0 : branding.brandColor) === null || _a === void 0 ? void 0 : _a.toString(16))
+            : DEFAULT_BRAND_COLOR;
+        var secondaryColor = DEFAULT_SECONDARY_COLOR;
+        if (!isMobile && isColorTooDark(branding === null || branding === void 0 ? void 0 : branding.accentColor))
+            secondaryColor = "#ffffff";
+        var topNavImageUrl = (branding === null || branding === void 0 ? void 0 : branding.topNavImageUrl) || DEFAULT_TOP_NAV_IMAGE_URL;
+        var accentColor = (branding === null || branding === void 0 ? void 0 : branding.accentColor) || DEFAULT_ACCENT_COLOR;
+        return {
+            accentColor: accentColor,
+            brandColor: brandColor,
+            secondaryColor: secondaryColor,
+            topNavImageUrl: topNavImageUrl,
+        };
+    }, [branding, isMobile]);
     // Check if Inter font is loaded
     useEffect(function () {
         document.fonts.ready.then(function () {
@@ -1688,7 +1657,28 @@ function SecondaryWrapper(_a) {
     }, []);
     if (!interFontLoaded)
         return null;
-    return jsx(Fragment, { children: children });
+    return (jsx(RecoilRoot, { children: jsx(BrandContext.Provider, __assign({ value: entityBranding }, { children: jsx(ConfigProvider, __assign({ theme: {
+                    algorithm: darkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
+                    token: {
+                        borderRadius: 4,
+                        colorPrimary: entityBranding.brandColor,
+                        colorLink: entityBranding.brandColor,
+                        colorLinkActive: entityBranding.brandColor,
+                        colorLinkHover: entityBranding.brandColor,
+                        fontFamily: MARK_PRO,
+                        colorBorder: INPUT_BORDER_COLOR,
+                    },
+                    components: {
+                        Drawer: {
+                            colorBgElevated: darkMode
+                                ? "var(--row-background-dark)"
+                                : SLATE_50,
+                        },
+                        Divider: {
+                            colorSplit: darkMode ? SLATE_400 : SLATE_200,
+                        },
+                    },
+                } }, { children: children })) })) }));
 }
 
 var useAjax = function (onError) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bunnyapp/components",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Components from the Bunny portal to embed Bunny UI functionality into your application.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -61,7 +61,7 @@
     "vite": "^5.4.11"
   },
   "peerDependencies": {
-    "@bunnyapp/common": "^1.0.37",
+    "@bunnyapp/common": "^1.0.38",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",