@novu/react 2.1.2 → 2.3.0

package/dist/client/index.js

@@ -32,7 +32,7 @@ var src_exports = {};
 __export(src_exports, {
   Bell: () => Bell,
   Inbox: () => Inbox,
-  InboxChild: () => InboxChild,
+  InboxContent: () => InboxContent,
   Notifications: () => Notifications,
   NovuProvider: () => NovuProvider,
   Preferences: () => Preferences,
@@ -45,10 +45,36 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/components/Bell.tsx
-var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
+
+// src/components/Mounter.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function Mounter({ mount }) {
+  const ref = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    let unmount;
+    const element = ref.current;
+    if (element && mount) {
+      const possibleUnmount = mount(element);
+      if (possibleUnmount) {
+        unmount = possibleUnmount;
+      }
+    }
+    return () => {
+      if (element && unmount) {
+        unmount(element);
+      }
+    };
+  }, [ref, mount]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref });
+}
+
+// src/components/Renderer.tsx
+var import_react3 = require("react");
 
 // src/utils/createContextAndHook.ts
-var import_react = __toESM(require("react"));
+var import_react2 = __toESM(require("react"));
 function assertContextExists(contextVal, msgOrCtx) {
   if (!contextVal) {
     throw typeof msgOrCtx === "string" ? new Error(msgOrCtx) : new Error(`${msgOrCtx.displayName} not found`);
@@ -56,56 +82,79 @@ function assertContextExists(contextVal, msgOrCtx) {
 }
 var createContextAndHook = (displayName, options) => {
   const { assertCtxFn = assertContextExists } = options || {};
-  const Ctx = import_react.default.createContext(void 0);
+  const Ctx = import_react2.default.createContext(void 0);
   Ctx.displayName = displayName;
   const useCtx = () => {
-    const ctx = import_react.default.useContext(Ctx);
-    assertCtxFn(ctx, `Component must be wrapped with the <Inbox /> Component`);
+    const ctx = import_react2.default.useContext(Ctx);
+    assertCtxFn(ctx, `Component must be wrapped with ${Ctx.displayName}`);
     return ctx.value;
   };
   const useCtxWithoutGuarantee = () => {
-    const ctx = import_react.default.useContext(Ctx);
+    const ctx = import_react2.default.useContext(Ctx);
     return ctx ? ctx.value : {};
   };
   return [Ctx, useCtx, useCtxWithoutGuarantee];
 };
 
-// src/context/RenderContext.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var [RendererContext, useRendererContext] = createContextAndHook("RendererContext");
+// src/context/RendererContext.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var [RendererContext, useRendererContext, useUnsafeRendererContext] = createContextAndHook("RendererContext");
 var RendererProvider = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RendererContext.Provider, { value: { value: props.value }, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RendererContext.Provider, { value: { value: props.value }, children: props.children });
 };
 
-// src/components/Mounter.tsx
-var import_react2 = __toESM(require("react"));
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function Mounter({ mount }) {
-  const ref = import_react2.default.useRef(null);
-  import_react2.default.useEffect(() => {
-    let unmount;
-    const element = ref.current;
-    if (element && mount) {
-      const possibleUnmount = mount(element);
-      if (possibleUnmount) {
-        unmount = possibleUnmount;
-      }
-    }
-    return () => {
-      if (element && unmount) {
-        unmount(element);
-      }
-    };
-  }, [ref, mount]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref });
-}
+// src/components/Renderer.tsx
+var import_react_dom = require("react-dom");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Renderer = (props) => {
+  const { children } = props;
+  const [mountedElements, setMountedElements] = (0, import_react3.useState)(/* @__PURE__ */ new Map());
+  const mountElement = (0, import_react3.useCallback)(
+    (el, mountedElement) => {
+      setMountedElements((prev) => {
+        const newMountedElements = new Map(prev);
+        newMountedElements.set(el, mountedElement);
+        return newMountedElements;
+      });
+      return () => {
+        setMountedElements((prev) => {
+          const newMountedElements = new Map(prev);
+          newMountedElements.delete(el);
+          return newMountedElements;
+        });
+      };
+    },
+    [setMountedElements]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(RendererProvider, { value: { mountElement }, children: [
+    [...mountedElements].map(([element, mountedElement]) => {
+      return (0, import_react_dom.createPortal)(mountedElement, element);
+    }),
+    children
+  ] });
+};
+var withRenderer = (WrappedComponent) => {
+  const HOC = (props) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Renderer, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(WrappedComponent, { ...props }) });
+  };
+  HOC.displayName = `WithRenderer(${WrappedComponent.displayName || WrappedComponent.name || "Component"})`;
+  return HOC;
+};
+
+// src/context/NovuUIContext.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var [NovuUIContext, useNovuUIContext, useUnsafeNovuUIContext] = createContextAndHook("NovuUIContext");
+var NovuUIProvider = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NovuUIContext.Provider, { value: { value: props.value }, children: props.children });
+};
 
 // src/components/Bell.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Bell = import_react3.default.memo((props) => {
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var _Bell = import_react4.default.memo((props) => {
   const { renderBell } = props;
-  const { novuUI, mountElement } = useRendererContext();
-  const mount = import_react3.default.useCallback(
+  const { novuUI } = useNovuUIContext();
+  const { mountElement } = useRendererContext();
+  const mount = import_react4.default.useCallback(
     (element) => {
       return novuUI.mountComponent({
         name: "Bell",
@@ -115,56 +164,70 @@ var Bell = import_react3.default.memo((props) => {
     },
     [renderBell]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Mounter, { mount });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Mounter, { mount });
 });
+var Bell = withRenderer(_Bell);
 
 // src/components/Inbox.tsx
-var import_react6 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 
-// src/components/Renderer.tsx
+// src/hooks/NovuProvider.tsx
+var import_js = require("@novu/js");
 var import_react5 = require("react");
-var import_react_dom = __toESM(require("react-dom"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var NovuContext = (0, import_react5.createContext)(void 0);
+var NovuProvider = ({
+  children,
+  applicationIdentifier,
+  subscriberId,
+  subscriberHash,
+  backendUrl,
+  socketUrl,
+  useCache
+}) => {
+  const novu = (0, import_react5.useMemo)(
+    () => new import_js.Novu({ applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache }),
+    [applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NovuContext.Provider, { value: novu, children });
+};
+var useNovu = () => {
+  const context = (0, import_react5.useContext)(NovuContext);
+  if (!context) {
+    throw new Error("useNovu must be used within a <NovuProvider />");
+  }
+  return context;
+};
+var useUnsafeNovu = () => {
+  const context = (0, import_react5.useContext)(NovuContext);
+  return context;
+};
+
+// src/components/NovuUI.tsx
 var import_ui = require("@novu/js/ui");
+var import_react7 = require("react");
 
 // src/hooks/internal/useDataRef.ts
-var import_react4 = require("react");
+var import_react6 = require("react");
 var useDataRef = (data) => {
-  const ref = (0, import_react4.useRef)(data);
+  const ref = (0, import_react6.useRef)(data);
   ref.current = data;
   return ref;
 };
 
-// src/components/Renderer.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Renderer = ({ options, novu, children }) => {
+// src/components/NovuUI.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var NovuUI = ({ options, novu, children }) => {
   const optionsRef = useDataRef({ ...options, novu });
-  const [novuUI, setNovuUI] = (0, import_react5.useState)();
-  const [mountedElements, setMountedElements] = (0, import_react5.useState)(/* @__PURE__ */ new Map());
-  const mountElement = (0, import_react5.useCallback)(
-    (el, mountedElement) => {
-      setMountedElements((prev) => {
-        const newMountedElements = new Map(prev);
-        newMountedElements.set(el, mountedElement);
-        return newMountedElements;
-      });
-      return () => {
-        setMountedElements((prev) => {
-          const newMountedElements = new Map(prev);
-          newMountedElements.delete(el);
-          return newMountedElements;
-        });
-      };
-    },
-    [setMountedElements]
-  );
-  (0, import_react5.useEffect)(() => {
+  const [novuUI, setNovuUI] = (0, import_react7.useState)();
+  (0, import_react7.useEffect)(() => {
     const novu2 = new import_ui.NovuUI(optionsRef.current);
     setNovuUI(novu2);
     return () => {
       novu2.unmount();
     };
   }, []);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!novuUI) {
       return;
     }
@@ -177,20 +240,16 @@ var Renderer = ({ options, novu, children }) => {
   if (!novuUI) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(RendererProvider, { value: { mountElement, novuUI }, children: [
-    [...mountedElements].map(([element, mountedElement]) => {
-      return import_react_dom.default.createPortal(mountedElement, element);
-    }),
-    children
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NovuUIProvider, { value: { novuUI }, children });
 };
 
 // src/components/Inbox.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var DefaultInbox = (props) => {
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var _DefaultInbox = (props) => {
   const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } = props;
-  const { novuUI, mountElement } = useRendererContext();
-  const mount = import_react6.default.useCallback(
+  const { novuUI } = useNovuUIContext();
+  const { mountElement } = useRendererContext();
+  const mount = import_react8.default.useCallback(
     (element) => {
       return novuUI.mountComponent({
         name: "Inbox",
@@ -207,15 +266,16 @@ var DefaultInbox = (props) => {
     },
     [open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Mounter, { mount });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Mounter, { mount });
 };
-var Inbox = import_react6.default.memo((props) => {
+var DefaultInbox = withRenderer(_DefaultInbox);
+var Inbox = import_react8.default.memo((props) => {
   const { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl } = props;
   const novu = useUnsafeNovu();
   if (novu) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InboxChild, { ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(InboxChild, { ...props });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     NovuProvider,
     {
       applicationIdentifier,
@@ -223,15 +283,16 @@ var Inbox = import_react6.default.memo((props) => {
       subscriberHash,
       backendUrl,
       socketUrl,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InboxChild, { ...props })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(InboxChild, { ...props })
     }
   );
 });
-var InboxChild = import_react6.default.memo((props) => {
+var InboxChild = import_react8.default.memo((props) => {
   const {
     localization,
     appearance,
     tabs,
+    preferencesFilter,
     routerPush,
     applicationIdentifier,
     subscriberId,
@@ -240,20 +301,31 @@ var InboxChild = import_react6.default.memo((props) => {
     socketUrl
   } = props;
   const novu = useNovu();
-  const options = (0, import_react6.useMemo)(() => {
+  const options = (0, import_react8.useMemo)(() => {
     return {
       localization,
       appearance,
       tabs,
+      preferencesFilter,
       routerPush,
       options: { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl }
     };
-  }, [localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl]);
+  }, [
+    localization,
+    appearance,
+    tabs,
+    preferencesFilter,
+    applicationIdentifier,
+    subscriberId,
+    subscriberHash,
+    backendUrl,
+    socketUrl
+  ]);
   if (isWithChildrenProps(props)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Renderer, { options, novu, children: props.children });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NovuUI, { options, novu, children: props.children });
   }
   const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Renderer, { options, novu, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NovuUI, { options, novu, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     DefaultInbox,
     {
       open,
@@ -270,26 +342,27 @@ function isWithChildrenProps(props) {
 }
 
 // src/components/Preferences.tsx
-var import_react7 = __toESM(require("react"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react9 = __toESM(require("react"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var Preferences = () => {
-  const { novuUI } = useRendererContext();
-  const mount = import_react7.default.useCallback((element) => {
+  const { novuUI } = useNovuUIContext();
+  const mount = import_react9.default.useCallback((element) => {
     return novuUI.mountComponent({
       name: "Preferences",
       element
     });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Mounter, { mount });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Mounter, { mount });
 };
 
 // src/components/Notifications.tsx
-var import_react8 = __toESM(require("react"));
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Notifications = import_react8.default.memo((props) => {
+var import_react10 = __toESM(require("react"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var _Notifications = import_react10.default.memo((props) => {
   const { onNotificationClick, onPrimaryActionClick, renderNotification, onSecondaryActionClick } = props;
-  const { novuUI, mountElement } = useRendererContext();
-  const mount = import_react8.default.useCallback(
+  const { novuUI } = useNovuUIContext();
+  const { mountElement } = useRendererContext();
+  const mount = import_react10.default.useCallback(
     (element) => {
       return novuUI.mountComponent({
         name: "Notifications",
@@ -304,53 +377,57 @@ var Notifications = import_react8.default.memo((props) => {
     },
     [renderNotification, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Mounter, { mount });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Mounter, { mount });
 });
+var Notifications = withRenderer(_Notifications);
 
-// src/hooks/NovuProvider.tsx
-var import_js = require("@novu/js");
-var import_react9 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var NovuContext = (0, import_react9.createContext)(void 0);
-var NovuProvider = ({
-  children,
-  applicationIdentifier,
-  subscriberId,
-  subscriberHash,
-  backendUrl,
-  socketUrl,
-  useCache
-}) => {
-  const novu = (0, import_react9.useMemo)(
-    () => new import_js.Novu({ applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache }),
-    [applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache]
+// src/components/InboxContent.tsx
+var import_react11 = __toESM(require("react"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var _InboxContent = import_react11.default.memo((props) => {
+  const {
+    onNotificationClick,
+    onPrimaryActionClick,
+    renderNotification,
+    onSecondaryActionClick,
+    initialPage,
+    hideNav
+  } = props;
+  const { novuUI } = useNovuUIContext();
+  const { mountElement } = useRendererContext();
+  const mount = import_react11.default.useCallback(
+    (element) => {
+      return novuUI.mountComponent({
+        name: "InboxContent",
+        element,
+        props: {
+          renderNotification: renderNotification ? (el, notification) => mountElement(el, renderNotification(notification)) : void 0,
+          onNotificationClick,
+          onPrimaryActionClick,
+          onSecondaryActionClick,
+          initialPage,
+          hideNav
+        }
+      });
+    },
+    [renderNotification, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NovuContext.Provider, { value: novu, children });
-};
-var useNovu = () => {
-  const context = (0, import_react9.useContext)(NovuContext);
-  if (!context) {
-    throw new Error("useNovu must be used within a <NovuProvider />");
-  }
-  return context;
-};
-var useUnsafeNovu = () => {
-  const context = (0, import_react9.useContext)(NovuContext);
-  return context;
-};
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Mounter, { mount });
+});
+var InboxContent = withRenderer(_InboxContent);
 
 // src/hooks/useNotifications.ts
-var import_react10 = require("react");
+var import_react12 = require("react");
 var import_js2 = require("@novu/js");
 var useNotifications = (props) => {
   const { tags, read, archived = false, limit, onSuccess, onError } = props || {};
-  const filterRef = (0, import_react10.useRef)(void 0);
+  const filterRef = (0, import_react12.useRef)(void 0);
   const { notifications, on, off } = useNovu();
-  const [data, setData] = (0, import_react10.useState)();
-  const [error, setError] = (0, import_react10.useState)();
-  const [isLoading, setIsLoading] = (0, import_react10.useState)(true);
-  const [isFetching, setIsFetching] = (0, import_react10.useState)(false);
-  const [hasMore, setHasMore] = (0, import_react10.useState)(false);
+  const [data, setData] = (0, import_react12.useState)();
+  const [error, setError] = (0, import_react12.useState)();
+  const [isLoading, setIsLoading] = (0, import_react12.useState)(true);
+  const [isFetching, setIsFetching] = (0, import_react12.useState)(false);
+  const [hasMore, setHasMore] = (0, import_react12.useState)(false);
   const length = data?.length;
   const after = length ? data[length - 1].id : void 0;
   const sync = (event) => {
@@ -360,13 +437,13 @@ var useNotifications = (props) => {
     setData(event.data.notifications);
     setHasMore(event.data.hasMore);
   };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     on("notifications.list.updated", sync);
     return () => {
       off("notifications.list.updated", sync);
     };
   }, []);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const newFilter = { tags, read, archived };
     if (filterRef.current && (0, import_js2.isSameFilter)(filterRef.current, newFilter)) {
       return;
@@ -432,21 +509,21 @@ var useNotifications = (props) => {
 };
 
 // src/hooks/usePreferences.ts
-var import_react11 = require("react");
+var import_react13 = require("react");
 var usePreferences = (props) => {
   const { onSuccess, onError } = props || {};
-  const [data, setData] = (0, import_react11.useState)();
+  const [data, setData] = (0, import_react13.useState)();
   const { preferences, on, off } = useNovu();
-  const [error, setError] = (0, import_react11.useState)();
-  const [isLoading, setIsLoading] = (0, import_react11.useState)(true);
-  const [isFetching, setIsFetching] = (0, import_react11.useState)(false);
+  const [error, setError] = (0, import_react13.useState)();
+  const [isLoading, setIsLoading] = (0, import_react13.useState)(true);
+  const [isFetching, setIsFetching] = (0, import_react13.useState)(false);
   const sync = (event) => {
     if (!event.data) {
       return;
     }
     setData(event.data);
   };
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     fetchPreferences();
     on("preferences.list.updated", sync);
     on("preferences.list.pending", sync);
@@ -459,7 +536,7 @@ var usePreferences = (props) => {
   }, []);
   const fetchPreferences = async () => {
     setIsFetching(true);
-    const response = await preferences.list();
+    const response = await preferences.list(props?.filter);
     if (response.error) {
       setError(response.error);
       onError?.(response.error);
@@ -483,11 +560,11 @@ var usePreferences = (props) => {
 };
 
 // src/hooks/useCounts.ts
-var import_react14 = require("react");
+var import_react16 = require("react");
 var import_js3 = require("@novu/js");
 
 // src/hooks/internal/useWebsocketEvent.ts
-var import_react13 = require("react");
+var import_react15 = require("react");
 
 // src/utils/requestLock.ts
 function requestLock(id, cb) {
@@ -514,18 +591,18 @@ function requestLock(id, cb) {
 }
 
 // src/hooks/internal/useBrowserTabsChannel.ts
-var import_react12 = require("react");
+var import_react14 = require("react");
 var useBrowserTabsChannel = ({
   channelName,
   onMessage
 }) => {
-  const [tabsChannel] = (0, import_react12.useState)(
+  const [tabsChannel] = (0, import_react14.useState)(
     typeof BroadcastChannel !== "undefined" ? new BroadcastChannel(channelName) : void 0
   );
   const postMessage = (data) => {
     tabsChannel?.postMessage(data);
   };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const listener = (event) => {
       onMessage(event.data);
     };
@@ -548,7 +625,7 @@ var useWebSocketEvent = ({
     onMessage(data);
     postMessage(data);
   };
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const resolveLock = requestLock(`nv.${webSocketEvent}`, () => {
       novu.on(webSocketEvent, updateReadCount);
     });
@@ -563,10 +640,10 @@ var useWebSocketEvent = ({
 var useCounts = (props) => {
   const { filters, onSuccess, onError } = props;
   const { notifications } = useNovu();
-  const [error, setError] = (0, import_react14.useState)();
-  const [counts, setCounts] = (0, import_react14.useState)();
-  const [isLoading, setIsLoading] = (0, import_react14.useState)(true);
-  const [isFetching, setIsFetching] = (0, import_react14.useState)(false);
+  const [error, setError] = (0, import_react16.useState)();
+  const [counts, setCounts] = (0, import_react16.useState)();
+  const [isLoading, setIsLoading] = (0, import_react16.useState)(true);
+  const [isFetching, setIsFetching] = (0, import_react16.useState)(false);
   const sync = async (notification) => {
     const existingCounts = counts ?? new Array(filters.length).fill(void 0);
     let countFiltersToFetch = [];
@@ -616,7 +693,7 @@ var useCounts = (props) => {
       sync();
     }
   });
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     setError(void 0);
     setIsLoading(true);
     setIsFetching(false);