@upstash/react-redis-browser 0.2.10 → 0.2.11-canary-2

package/dist/index.css

@@ -1470,9 +1470,6 @@
 .ups-db .bg-zinc-900\/10 {
   background-color: rgb(var(--color-zinc-900) / 0.1);
 }
-.ups-db .fill-current {
-  fill: currentColor;
-}
 .ups-db .p-0 {
   padding: 0px;
 }

package/dist/index.d.mts

@@ -3,7 +3,13 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 type DarkModeOption = "dark" | "light";
 
 type RedisCredentials = {
+    /**
+     * The URL of the redis database.
+     */
     url?: string;
+    /**
+     * The token of the redis database.
+     */
     token?: string;
 };
 
@@ -14,7 +20,19 @@ type RedisBrowserStorage = {
     set: (value: string) => void;
     get: () => string | null;
 };
-declare const RedisBrowser: ({ token, url, hideTabs, storage, onFullScreenClick, theme, }: RedisCredentials & {
+declare const RedisBrowser: ({ url, token, hideTabs, storage, disableTelemetry, onFullScreenClick, theme, }: RedisCredentials & {
+    /**
+     * Whether to disable telemetry.
+     *
+     * The redis client sends telemetry data to help us improve your experience.
+     * We collect the following:
+     * - SDK version
+     * - Platform (Deno, Cloudflare, Vercel)
+     * - Runtime version (node@18.x)
+     *
+     * @default false
+     */
+    disableTelemetry?: boolean;
     hideTabs?: boolean;
     /**
      * If defined, the databrowser will have a full screen button in the tab bar.

package/dist/index.d.ts

@@ -3,7 +3,13 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 type DarkModeOption = "dark" | "light";
 
 type RedisCredentials = {
+    /**
+     * The URL of the redis database.
+     */
     url?: string;
+    /**
+     * The token of the redis database.
+     */
     token?: string;
 };
 
@@ -14,7 +20,19 @@ type RedisBrowserStorage = {
     set: (value: string) => void;
     get: () => string | null;
 };
-declare const RedisBrowser: ({ token, url, hideTabs, storage, onFullScreenClick, theme, }: RedisCredentials & {
+declare const RedisBrowser: ({ url, token, hideTabs, storage, disableTelemetry, onFullScreenClick, theme, }: RedisCredentials & {
+    /**
+     * Whether to disable telemetry.
+     *
+     * The redis client sends telemetry data to help us improve your experience.
+     * We collect the following:
+     * - SDK version
+     * - Platform (Deno, Cloudflare, Vercel)
+     * - Runtime version (node@18.x)
+     *
+     * @default false
+     */
+    disableTelemetry?: boolean;
     hideTabs?: boolean;
     /**
      * If defined, the databrowser will have a full screen button in the tab bar.

package/dist/index.js

@@ -24,7 +24,7 @@ var useTheme = () => {
 
 // src/lib/clients.ts
 var _reactquery = require('@tanstack/react-query');
-var _cloudflare = require('@upstash/redis/cloudflare');
+var _redis = require('@upstash/redis');
 
 // src/components/ui/use-toast.ts
 
@@ -151,7 +151,8 @@ function useToast() {
 // src/lib/clients.ts
 var redisClient = ({
   credentials,
-  pipelining
+  pipelining,
+  telemetry
 }) => {
   const safeProcess = typeof process === "undefined" ? { env: {} } : process;
   const token = _optionalChain([credentials, 'optionalAccess', _2 => _2.token]) || safeProcess.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN;
@@ -162,12 +163,13 @@ var redisClient = ({
   if (!token) {
     throw new Error("Redis TOKEN is missing!");
   }
-  const redis = new (0, _cloudflare.Redis)({
+  const redis = new (0, _redis.Redis)({
     url,
     token,
     enableAutoPipelining: pipelining,
     automaticDeserialization: false,
-    keepAlive: false
+    keepAlive: false,
+    enableTelemetry: telemetry
   });
   return redis;
 };
@@ -203,15 +205,16 @@ var queryClient = new (0, _reactquery.QueryClient)({
 var RedisContext = _react.createContext.call(void 0, void 0);
 var RedisProvider = ({
   children,
-  redisCredentials
+  redisCredentials,
+  telemetry
 }) => {
   const redisInstance = _react.useMemo.call(void 0, 
-    () => redisClient({ credentials: redisCredentials, pipelining: true }),
-    [redisCredentials]
+    () => redisClient({ credentials: redisCredentials, pipelining: true, telemetry }),
+    [redisCredentials, telemetry]
   );
   const redisInstanceNoPipeline = _react.useMemo.call(void 0, 
-    () => redisClient({ credentials: redisCredentials, pipelining: false }),
-    [redisCredentials]
+    () => redisClient({ credentials: redisCredentials, pipelining: false, telemetry }),
+    [redisCredentials, telemetry]
   );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     RedisContext.Provider,
@@ -3058,7 +3061,7 @@ var _reactportal = require('@radix-ui/react-portal');
 
 // src/components/ui/toast.tsx
 
-var _reacticons = require('@radix-ui/react-icons');
+var _iconsreact = require('@tabler/icons-react');
 var _reacttoast = require('@radix-ui/react-toast'); var ToastPrimitives = _interopRequireWildcard(_reacttoast);
 
 // node_modules/class-variance-authority/node_modules/clsx/dist/clsx.mjs
@@ -3180,7 +3183,7 @@ var ToastClose = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE_
     ),
     "toast-close": "",
     ...props,
-    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.Cross2Icon, { className: "size-4" })
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconX, { className: "size-4" })
   }
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
@@ -3339,7 +3342,7 @@ var useKeyType = (key) => {
 
 // src/components/databrowser/components/display/display-list.tsx
 
-var _iconsreact = require('@tabler/icons-react');
+
 
 // src/components/ui/button.tsx
 
@@ -3811,7 +3814,7 @@ var useFetchKeySize = (dataKey) => {
   return _reactquery.useQuery.call(void 0, {
     queryKey: [FETCH_KEY_SIZE_QUERY_KEY, dataKey],
     queryFn: async () => {
-      return await redis.eval(`return redis.call("MEMORY", "USAGE", KEYS[1])`, [dataKey], []);
+      return await redis.exec(["MEMORY", "USAGE", dataKey]);
     }
   });
 };
@@ -4270,7 +4273,7 @@ var ContextMenuSubTrigger = React7.forwardRef(({ className, inset, children, ...
     ...props,
     children: [
       children,
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.ChevronRightIcon, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconChevronRight, { className: "ml-auto h-4 w-4" })
     ]
   }
 ));
@@ -4323,7 +4326,7 @@ var ContextMenuCheckboxItem = React7.forwardRef(({ className, children, checked,
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCheck, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
@@ -4339,7 +4342,7 @@ var ContextMenuRadioItem = React7.forwardRef(({ className, children, ...props },
     ),
     ...props,
     children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCircleFilled, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
@@ -4734,7 +4737,7 @@ var SimpleTooltip = ({
 }) => {
   if (!content) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Tooltip, { delayDuration: 400, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipTrigger, { asChild: true, children }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipContent, { side: "top", children: content })
   ] });
 };
@@ -4817,7 +4820,7 @@ var DropdownMenuSubTrigger = React11.forwardRef(({ className, inset, children, .
     ...props,
     children: [
       children,
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.ChevronRightIcon, { className: "ml-auto" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconChevronRight, { className: "ml-auto" })
     ]
   }
 ));
@@ -4872,7 +4875,7 @@ var DropdownMenuCheckboxItem = React11.forwardRef(({ className, children, checke
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCheck, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
@@ -4888,7 +4891,7 @@ var DropdownMenuRadioItem = React11.forwardRef(({ className, children, ...props
     ),
     ...props,
     children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.DotFilledIcon, { className: "h-2 w-2 fill-current" }) }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCircleFilled, { className: "h-2 w-2" }) }) }),
       children
     ]
   }
@@ -5614,7 +5617,6 @@ var DataDisplay = () => {
 var _reactdialog = require('@radix-ui/react-dialog'); var DialogPrimitive = _interopRequireWildcard(_reactdialog);
 
 
-
 // src/components/ui/dialog.tsx
 
 
@@ -5718,6 +5720,7 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/databrowser/components/add-key-modal.tsx
 
+
 function AddKeyModal() {
   const { setSelectedKey } = useTab();
   const [open, setOpen] = _react.useState.call(void 0, false);
@@ -5749,7 +5752,7 @@ function AddKeyModal() {
         setOpen(open2);
       },
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTrigger, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: "Add key", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "primary", size: "icon-sm", "data-testid": "add-key-button", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.PlusIcon, { className: "size-4" }) }) }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: "Add key", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "primary", size: "icon-sm", "data-testid": "add-key-button", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "size-4" }) }) }) }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogContent, { className: "max-w-[400px]", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTitle, { children: "Create new key" }) }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "sr-only", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactdialog.DialogDescription, { children: "Create new key" }) }),
@@ -5915,7 +5918,7 @@ var KeysList = () => {
   const lastClickedIndexRef = _react.useRef.call(void 0, null);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SidebarContextMenu, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-px" }),
-    keys.map((data, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    keys.map((data, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         KeyItem,
         {
@@ -5923,11 +5926,10 @@ var KeysList = () => {
           data,
           allKeys: keys,
           lastClickedIndexRef
-        },
-        data[0]
+        }
       ),
       i !== keys.length - 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "-z-10 mx-2 h-px bg-zinc-100 dark:bg-zinc-200" })
-    ] }))
+    ] }, data[0]))
   ] }) });
 };
 var keyStyles = {
@@ -6274,7 +6276,7 @@ var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 ));
 Command.displayName = _cmdk.Command.displayName;
 var CommandInput = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _cmdk.Command.Input,
     {
@@ -6783,10 +6785,11 @@ function TabsListButton({
 // src/components/databrowser/index.tsx
 
 var RedisBrowser = ({
-  token,
   url,
+  token,
   hideTabs,
   storage,
+  disableTelemetry,
   onFullScreenClick,
   theme = "light"
 }) => {
@@ -6795,7 +6798,7 @@ var RedisBrowser = ({
   _react.useEffect.call(void 0, () => {
     queryClient.resetQueries();
   }, [credentials.url]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DarkModeProvider, { theme, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { storage, rootRef, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RedisProvider, { redisCredentials: credentials, telemetry: !disableTelemetry, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DarkModeProvider, { theme, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { storage, rootRef, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     RedisBrowserRoot,
     {
       hideTabs,

package/dist/index.mjs

@@ -24,7 +24,7 @@ import { createContext as createContext2, useContext as useContext2, useMemo } f
 
 // src/lib/clients.ts
 import { MutationCache, QueryCache, QueryClient } from "@tanstack/react-query";
-import { Redis } from "@upstash/redis/cloudflare";
+import { Redis } from "@upstash/redis";
 
 // src/components/ui/use-toast.ts
 import * as React from "react";
@@ -151,7 +151,8 @@ function useToast() {
 // src/lib/clients.ts
 var redisClient = ({
   credentials,
-  pipelining
+  pipelining,
+  telemetry
 }) => {
   const safeProcess = typeof process === "undefined" ? { env: {} } : process;
   const token = credentials?.token || safeProcess.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN;
@@ -167,7 +168,8 @@ var redisClient = ({
     token,
     enableAutoPipelining: pipelining,
     automaticDeserialization: false,
-    keepAlive: false
+    keepAlive: false,
+    enableTelemetry: telemetry
   });
   return redis;
 };
@@ -203,15 +205,16 @@ import { jsx as jsx2 } from "react/jsx-runtime";
 var RedisContext = createContext2(void 0);
 var RedisProvider = ({
   children,
-  redisCredentials
+  redisCredentials,
+  telemetry
 }) => {
   const redisInstance = useMemo(
-    () => redisClient({ credentials: redisCredentials, pipelining: true }),
-    [redisCredentials]
+    () => redisClient({ credentials: redisCredentials, pipelining: true, telemetry }),
+    [redisCredentials, telemetry]
   );
   const redisInstanceNoPipeline = useMemo(
-    () => redisClient({ credentials: redisCredentials, pipelining: false }),
-    [redisCredentials]
+    () => redisClient({ credentials: redisCredentials, pipelining: false, telemetry }),
+    [redisCredentials, telemetry]
   );
   return /* @__PURE__ */ jsx2(
     RedisContext.Provider,
@@ -3058,7 +3061,7 @@ import { Portal } from "@radix-ui/react-portal";
 
 // src/components/ui/toast.tsx
 import * as React2 from "react";
-import { Cross2Icon } from "@radix-ui/react-icons";
+import { IconX } from "@tabler/icons-react";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 
 // node_modules/class-variance-authority/node_modules/clsx/dist/clsx.mjs
@@ -3180,7 +3183,7 @@ var ToastClose = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE_
     ),
     "toast-close": "",
     ...props,
-    children: /* @__PURE__ */ jsx5(Cross2Icon, { className: "size-4" })
+    children: /* @__PURE__ */ jsx5(IconX, { className: "size-4" })
   }
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
@@ -3811,7 +3814,7 @@ var useFetchKeySize = (dataKey) => {
   return useQuery5({
     queryKey: [FETCH_KEY_SIZE_QUERY_KEY, dataKey],
     queryFn: async () => {
-      return await redis.eval(`return redis.call("MEMORY", "USAGE", KEYS[1])`, [dataKey], []);
+      return await redis.exec(["MEMORY", "USAGE", dataKey]);
     }
   });
 };
@@ -4254,7 +4257,7 @@ import { ContextMenuSeparator as ContextMenuSeparator2 } from "@radix-ui/react-c
 // src/components/ui/context-menu.tsx
 import * as React7 from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
+import { IconCheck, IconChevronRight, IconCircleFilled } from "@tabler/icons-react";
 import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 var ContextMenu = ContextMenuPrimitive.Root;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
@@ -4270,7 +4273,7 @@ var ContextMenuSubTrigger = React7.forwardRef(({ className, inset, children, ...
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx18(ChevronRightIcon, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ jsx18(IconChevronRight, { className: "ml-auto h-4 w-4" })
     ]
   }
 ));
@@ -4323,7 +4326,7 @@ var ContextMenuCheckboxItem = React7.forwardRef(({ className, children, checked,
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx18("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx18(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx18(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx18("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx18(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx18(IconCheck, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
@@ -4339,7 +4342,7 @@ var ContextMenuRadioItem = React7.forwardRef(({ className, children, ...props },
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx18("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx18(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx18(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      /* @__PURE__ */ jsx18("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx18(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx18(IconCircleFilled, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
@@ -4734,7 +4737,7 @@ var SimpleTooltip = ({
 }) => {
   if (!content) return /* @__PURE__ */ jsx24(Fragment3, { children });
   return /* @__PURE__ */ jsxs14(Tooltip, { delayDuration: 400, children: [
-    /* @__PURE__ */ jsx24(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx24("div", { children }) }),
+    /* @__PURE__ */ jsx24(TooltipTrigger, { asChild: true, children }),
     /* @__PURE__ */ jsx24(TooltipContent, { side: "top", children: content })
   ] });
 };
@@ -4801,7 +4804,7 @@ import { IconDotsVertical } from "@tabler/icons-react";
 // src/components/ui/dropdown-menu.tsx
 import * as React11 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { CheckIcon as CheckIcon2, ChevronRightIcon as ChevronRightIcon2, DotFilledIcon as DotFilledIcon2 } from "@radix-ui/react-icons";
+import { IconCheck as IconCheck2, IconChevronRight as IconChevronRight2, IconCircleFilled as IconCircleFilled2 } from "@tabler/icons-react";
 import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
@@ -4817,7 +4820,7 @@ var DropdownMenuSubTrigger = React11.forwardRef(({ className, inset, children, .
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx26(ChevronRightIcon2, { className: "ml-auto" })
+      /* @__PURE__ */ jsx26(IconChevronRight2, { className: "ml-auto" })
     ]
   }
 ));
@@ -4872,7 +4875,7 @@ var DropdownMenuCheckboxItem = React11.forwardRef(({ className, children, checke
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx26("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx26(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx26(CheckIcon2, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx26("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx26(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx26(IconCheck2, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
@@ -4888,7 +4891,7 @@ var DropdownMenuRadioItem = React11.forwardRef(({ className, children, ...props
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx26("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx26(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx26(DotFilledIcon2, { className: "h-2 w-2 fill-current" }) }) }),
+      /* @__PURE__ */ jsx26("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx26(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx26(IconCircleFilled2, { className: "h-2 w-2" }) }) }),
       children
     ]
   }
@@ -5095,7 +5098,7 @@ import { Editor, useMonaco } from "@monaco-editor/react";
 
 // src/components/databrowser/copy-button.tsx
 import { useState as useState6 } from "react";
-import { IconCheck, IconCopy as IconCopy2 } from "@tabler/icons-react";
+import { IconCheck as IconCheck3, IconCopy as IconCopy2 } from "@tabler/icons-react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 function CopyButton({ value, ...props }) {
   const [copied, setCopied] = useState6(false);
@@ -5116,7 +5119,7 @@ function CopyButton({ value, ...props }) {
       variant: "secondary",
       size: "icon-sm",
       ...props,
-      children: copied ? /* @__PURE__ */ jsx31(IconCheck, { className: "size-4 text-green-500" }) : /* @__PURE__ */ jsx31(IconCopy2, { className: "size-4 text-zinc-500" })
+      children: copied ? /* @__PURE__ */ jsx31(IconCheck3, { className: "size-4 text-green-500" }) : /* @__PURE__ */ jsx31(IconCopy2, { className: "size-4 text-zinc-500" })
     }
   );
 }
@@ -5612,7 +5615,6 @@ var DataDisplay = () => {
 // src/components/databrowser/components/add-key-modal.tsx
 import { useState as useState9 } from "react";
 import { DialogDescription as DialogDescription2 } from "@radix-ui/react-dialog";
-import { PlusIcon } from "@radix-ui/react-icons";
 import { Controller as Controller3, useForm as useForm4 } from "react-hook-form";
 
 // src/components/ui/dialog.tsx
@@ -5717,6 +5719,7 @@ var DialogDescription = React12.forwardRef(({ className, ...props }, ref) => /*
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/databrowser/components/add-key-modal.tsx
+import { IconPlus as IconPlus2 } from "@tabler/icons-react";
 import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
 function AddKeyModal() {
   const { setSelectedKey } = useTab();
@@ -5749,7 +5752,7 @@ function AddKeyModal() {
         setOpen(open2);
       },
       children: [
-        /* @__PURE__ */ jsx40(DialogTrigger, { children: /* @__PURE__ */ jsx40(SimpleTooltip, { content: "Add key", children: /* @__PURE__ */ jsx40(Button, { variant: "primary", size: "icon-sm", "data-testid": "add-key-button", children: /* @__PURE__ */ jsx40(PlusIcon, { className: "size-4" }) }) }) }),
+        /* @__PURE__ */ jsx40(SimpleTooltip, { content: "Add key", children: /* @__PURE__ */ jsx40(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx40(Button, { variant: "primary", size: "icon-sm", "data-testid": "add-key-button", children: /* @__PURE__ */ jsx40(IconPlus2, { className: "size-4" }) }) }) }),
         /* @__PURE__ */ jsxs24(DialogContent, { className: "max-w-[400px]", children: [
           /* @__PURE__ */ jsx40(DialogHeader, { children: /* @__PURE__ */ jsx40(DialogTitle, { children: "Create new key" }) }),
           /* @__PURE__ */ jsx40("div", { className: "sr-only", children: /* @__PURE__ */ jsx40(DialogDescription2, { children: "Create new key" }) }),
@@ -5811,7 +5814,7 @@ var Empty = () => {
 };
 
 // src/components/databrowser/components/sidebar/keys-list.tsx
-import { useRef as useRef3 } from "react";
+import { Fragment as Fragment9, useRef as useRef3 } from "react";
 
 // src/components/databrowser/components/sidebar-context-menu.tsx
 import { useState as useState10 } from "react";
@@ -5909,11 +5912,11 @@ var SidebarContextMenu = ({ children }) => {
 };
 
 // src/components/databrowser/components/sidebar/keys-list.tsx
-import { Fragment as Fragment9, jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
 var KeysList = () => {
   const { keys } = useKeys();
   const lastClickedIndexRef = useRef3(null);
-  return /* @__PURE__ */ jsx43(SidebarContextMenu, { children: /* @__PURE__ */ jsxs27(Fragment9, { children: [
+  return /* @__PURE__ */ jsx43(SidebarContextMenu, { children: /* @__PURE__ */ jsxs27(Fragment10, { children: [
     /* @__PURE__ */ jsx43("div", { className: "h-px" }),
     keys.map((data, i) => /* @__PURE__ */ jsxs27(Fragment9, { children: [
       /* @__PURE__ */ jsx43(
@@ -5923,11 +5926,10 @@ var KeysList = () => {
           data,
           allKeys: keys,
           lastClickedIndexRef
-        },
-        data[0]
+        }
       ),
       i !== keys.length - 1 && /* @__PURE__ */ jsx43("div", { className: "-z-10 mx-2 h-px bg-zinc-100 dark:bg-zinc-200" })
-    ] }))
+    ] }, data[0]))
   ] }) });
 };
 var keyStyles = {
@@ -6016,7 +6018,7 @@ var ReloadButton = ({
 
 // src/components/databrowser/components/sidebar/search-input.tsx
 import { useEffect as useEffect11, useRef as useRef4, useState as useState12 } from "react";
-import { IconX } from "@tabler/icons-react";
+import { IconX as IconX2 } from "@tabler/icons-react";
 import { jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
 var dedupeSearchHistory = (history) => {
   const seen = /* @__PURE__ */ new Set();
@@ -6130,7 +6132,7 @@ var SearchInput = () => {
           setState("");
         },
         children: [
-          /* @__PURE__ */ jsx45(IconX, { size: 16 }),
+          /* @__PURE__ */ jsx45(IconX2, { size: 16 }),
           /* @__PURE__ */ jsx45("span", { className: "sr-only", children: "Clear" })
         ]
       }
@@ -6254,12 +6256,12 @@ import {
 import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 import { horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { IconChevronDown as IconChevronDown2, IconMaximize, IconPlus as IconPlus2 } from "@tabler/icons-react";
+import { IconChevronDown as IconChevronDown2, IconMaximize, IconPlus as IconPlus3 } from "@tabler/icons-react";
 
 // src/components/ui/command.tsx
 import * as React13 from "react";
 import { Command as CommandPrimitive } from "cmdk";
-import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { IconSearch } from "@tabler/icons-react";
 import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
 var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
   CommandPrimitive,
@@ -6274,7 +6276,7 @@ var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 ));
 Command.displayName = CommandPrimitive.displayName;
 var CommandInput = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs33("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ jsx50(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx50(IconSearch, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
   /* @__PURE__ */ jsx50(
     CommandPrimitive.Input,
     {
@@ -6342,9 +6344,9 @@ import {
   IconArrowsMinimize,
   IconCopyPlus,
   IconPin,
-  IconSearch,
+  IconSearch as IconSearch2,
   IconSquareX,
-  IconX as IconX2
+  IconX as IconX3
 } from "@tabler/icons-react";
 
 // src/components/databrowser/components/tab-type-icon.tsx
@@ -6399,7 +6401,7 @@ var Tab = ({ id, isList }) => {
   const hasPinnedTabs = tabs.some(([, data]) => data.pinned);
   const { ref, isOverflow } = useOverflow();
   const label = search.key || selectedKey;
-  const iconNode = search.key ? /* @__PURE__ */ jsx52(IconSearch, { size: 15 }) : selectedKey ? /* @__PURE__ */ jsx52(TabTypeIcon, { selectedKey }) : void 0;
+  const iconNode = search.key ? /* @__PURE__ */ jsx52(IconSearch2, { size: 15 }) : selectedKey ? /* @__PURE__ */ jsx52(TabTypeIcon, { selectedKey }) : void 0;
   const tabNode = /* @__PURE__ */ jsxs34(
     "div",
     {
@@ -6430,7 +6432,7 @@ var Tab = ({ id, isList }) => {
               removeTab(id);
             },
             className: "p-1 text-zinc-300 transition-colors hover:text-zinc-500 dark:text-zinc-400",
-            children: /* @__PURE__ */ jsx52(IconX2, { size: 16 })
+            children: /* @__PURE__ */ jsx52(IconX3, { size: 16 })
           }
         )
       ]
@@ -6455,7 +6457,7 @@ var Tab = ({ id, isList }) => {
           ] }),
           /* @__PURE__ */ jsx52(ContextMenuSeparator, {}),
           /* @__PURE__ */ jsxs34(ContextMenuItem, { onSelect: () => forceRemoveTab(id), className: "gap-2", children: [
-            /* @__PURE__ */ jsx52(IconX2, { size: 16 }),
+            /* @__PURE__ */ jsx52(IconX3, { size: 16 }),
             "Close Tab"
           ] }),
           /* @__PURE__ */ jsxs34(ContextMenuItem, { onSelect: () => closeOtherTabs(id), className: "gap-2", children: [
@@ -6720,7 +6722,7 @@ function AddTabButton() {
       size: "icon-sm",
       onClick: handleAddTab,
       className: "flex-shrink-0 dark:bg-zinc-200",
-      children: /* @__PURE__ */ jsx53(IconPlus2, { className: "text-zinc-500 dark:text-zinc-600", size: 16 })
+      children: /* @__PURE__ */ jsx53(IconPlus3, { className: "text-zinc-500 dark:text-zinc-600", size: 16 })
     }
   );
 }
@@ -6783,10 +6785,11 @@ function TabsListButton({
 // src/components/databrowser/index.tsx
 import { jsx as jsx54, jsxs as jsxs36 } from "react/jsx-runtime";
 var RedisBrowser = ({
-  token,
   url,
+  token,
   hideTabs,
   storage,
+  disableTelemetry,
   onFullScreenClick,
   theme = "light"
 }) => {
@@ -6795,7 +6798,7 @@ var RedisBrowser = ({
   useEffect14(() => {
     queryClient.resetQueries();
   }, [credentials.url]);
-  return /* @__PURE__ */ jsx54(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx54(RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsx54(DarkModeProvider, { theme, children: /* @__PURE__ */ jsx54(DatabrowserProvider, { storage, rootRef, children: /* @__PURE__ */ jsx54(TooltipProvider, { children: /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx54(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx54(RedisProvider, { redisCredentials: credentials, telemetry: !disableTelemetry, children: /* @__PURE__ */ jsx54(DarkModeProvider, { theme, children: /* @__PURE__ */ jsx54(DatabrowserProvider, { storage, rootRef, children: /* @__PURE__ */ jsx54(TooltipProvider, { children: /* @__PURE__ */ jsx54(
     RedisBrowserRoot,
     {
       hideTabs,

package/package.json

@@ -1 +1 @@
-{ "name": "@upstash/react-redis-browser", "version": "v0.2.10", "main": "./dist/index.js", "types": "./dist/index.d.ts", "license": "MIT", "private": false, "publishConfig": { "access": "public" }, "bugs": { "url": "https://github.com/upstash/react-redis-browser/issues" }, "homepage": "https://github.com/upstash/react-redis-browser", "files": [ "./dist/**" ], "scripts": { "build": "tsup", "dev": "vite", "lint": "tsc && eslint", "fmt": "prettier --write ./src" }, "lint-staged": { "**/*.{js,ts,tsx}": [ "prettier --write", "eslint --fix" ] }, "dependencies": { "@dnd-kit/core": "^6.3.1", "@dnd-kit/modifiers": "^9.0.0", "@dnd-kit/sortable": "^10.0.0", "@dnd-kit/utilities": "^3.2.2", "@ianvs/prettier-plugin-sort-imports": "^4.4.0", "@monaco-editor/react": "^4.6.0", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-context-menu": "^2.2.2", "@radix-ui/react-dialog": "^1.1.14", "@radix-ui/react-dropdown-menu": "^2.1.15", "@radix-ui/react-icons": "1.3.0", "@radix-ui/react-label": "^2.1.7", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-portal": "^1.1.2", "@radix-ui/react-scroll-area": "^1.0.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.0.7", "@tabler/icons-react": "^3.19.0", "@tanstack/react-query": "^5.32.0", "@types/bytes": "^3.1.4", "@upstash/redis": "^1.35.3", "bytes": "^3.1.2", "cmdk": "^1.1.1", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.4", "zustand": "5.0.0" }, "devDependencies": { "@playwright/test": "^1.56.1", "@types/node": "^22.8.4", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@typescript-eslint/eslint-plugin": "8.4.0", "@typescript-eslint/parser": "8.4.0", "@vitejs/plugin-react": "^4.1.0", "autoprefixer": "^10.4.14", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "dotenv": "^16.5.0", "eslint": "9.10.0", "eslint-plugin-unicorn": "55.0.0", "postcss": "^8.4.31", "postcss-prefix-selector": "^2.1.0", "prettier": "^3.0.3", "prettier-plugin-tailwindcss": "^0.5.5", "react": "^18.3.1", "react-dom": "^18.3.1", "tailwind-merge": "^2.5.4", "tailwindcss": "^3.4.14", "tailwindcss-animate": "^1.0.7", "tsup": "^8.3.5", "typescript": "^5.0.4", "vite": "^5.4.10", "vite-tsconfig-paths": "^5.0.1" }, "peerDependencies": { "react": "^18.2.0 || ^19", "react-dom": "^18.2.0 || ^19" } }
+{ "name": "@upstash/react-redis-browser", "version": "v0.2.11-canary-2", "main": "./dist/index.js", "types": "./dist/index.d.ts", "license": "MIT", "private": false, "publishConfig": { "access": "public" }, "bugs": { "url": "https://github.com/upstash/react-redis-browser/issues" }, "homepage": "https://github.com/upstash/react-redis-browser", "files": [ "./dist/**" ], "scripts": { "build": "tsup", "dev": "vite", "lint": "tsc && eslint", "fmt": "prettier --write ./src" }, "lint-staged": { "**/*.{js,ts,tsx}": [ "prettier --write", "eslint --fix" ] }, "dependencies": { "@dnd-kit/core": "^6.3.1", "@dnd-kit/modifiers": "^9.0.0", "@dnd-kit/sortable": "^10.0.0", "@dnd-kit/utilities": "^3.2.2", "@ianvs/prettier-plugin-sort-imports": "^4.4.0", "@monaco-editor/react": "^4.6.0", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-context-menu": "^2.2.2", "@radix-ui/react-dialog": "^1.1.14", "@radix-ui/react-dropdown-menu": "^2.1.15", "@radix-ui/react-label": "^2.1.7", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-portal": "^1.1.2", "@radix-ui/react-scroll-area": "^1.0.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.0.7", "@tabler/icons-react": "^3.19.0", "@tanstack/react-query": "^5.32.0", "@types/bytes": "^3.1.4", "@upstash/redis": "1.35.8-canary-2", "bytes": "^3.1.2", "cmdk": "^1.1.1", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.4", "zustand": "5.0.0" }, "devDependencies": { "@playwright/test": "^1.56.1", "@types/node": "^22.8.4", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@typescript-eslint/eslint-plugin": "8.4.0", "@typescript-eslint/parser": "8.4.0", "@vitejs/plugin-react": "^4.1.0", "autoprefixer": "^10.4.14", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "dotenv": "^16.5.0", "eslint": "9.10.0", "eslint-plugin-unicorn": "55.0.0", "postcss": "^8.4.31", "postcss-prefix-selector": "^2.1.0", "prettier": "^3.0.3", "prettier-plugin-tailwindcss": "^0.5.5", "react": "^18.3.1", "react-dom": "^18.3.1", "tailwind-merge": "^2.5.4", "tailwindcss": "^3.4.14", "tailwindcss-animate": "^1.0.7", "tsup": "^8.3.5", "typescript": "^5.0.4", "vite": "^5.4.10", "vite-tsconfig-paths": "^5.0.1" }, "peerDependencies": { "react": "^18.2.0 || ^19", "react-dom": "^18.2.0 || ^19" } }