@upstash/react-redis-browser 0.0.0 → 0.1.2-canary

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.css +542 -514
  2. package/dist/index.js +28 -15
  3. package/dist/index.mjs +28 -15
  4. package/package.json +1 -82
package/dist/index.js CHANGED
@@ -3571,6 +3571,19 @@ var _reactcontextmenu = require('@radix-ui/react-context-menu'); var ContextMenu
3571
3571
 
3572
3572
 
3573
3573
 
3574
+ // src/lib/portal-root.ts
3575
+ var root;
3576
+ if (typeof document !== "undefined") {
3577
+ const id = "react-redis-browser-portal-root";
3578
+ root = _nullishCoalesce(document.querySelector(`#${id}`), () => ( document.createElement("div")));
3579
+ root.classList.add("ups-db");
3580
+ root.id = "react-redis-browser-portal-root";
3581
+ document.body.append(root);
3582
+ }
3583
+ var portalRoot = root;
3584
+
3585
+ // src/components/ui/context-menu.tsx
3586
+
3574
3587
  var ContextMenu = ContextMenuPrimitive.Root;
3575
3588
  var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
3576
3589
  var ContextMenuSubTrigger = React4.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
@@ -3595,19 +3608,19 @@ var ContextMenuSubContent = React4.forwardRef(({ className, ...props }, ref) =>
3595
3608
  {
3596
3609
  ref,
3597
3610
  className: cn(
3598
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
3611
+ "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
3599
3612
  className
3600
3613
  ),
3601
3614
  ...props
3602
3615
  }
3603
3616
  ));
3604
3617
  ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
3605
- var ContextMenuContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
3618
+ var ContextMenuContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
3606
3619
  ContextMenuPrimitive.Content,
3607
3620
  {
3608
3621
  ref,
3609
3622
  className: cn(
3610
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
3623
+ "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
3611
3624
  className
3612
3625
  ),
3613
3626
  ...props
@@ -3702,13 +3715,13 @@ var _reactalertdialog = require('@radix-ui/react-alert-dialog'); var AlertDialog
3702
3715
 
3703
3716
  var AlertDialog = AlertDialogPrimitive.Root;
3704
3717
  var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
3705
- var AlertDialogPortal = ({ ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogPrimitive.Portal, { ...props });
3718
+ var AlertDialogPortal = ({ ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogPrimitive.Portal, { container: portalRoot, ...props });
3706
3719
  AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
3707
3720
  var AlertDialogOverlay = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
3708
3721
  AlertDialogPrimitive.Overlay,
3709
3722
  {
3710
3723
  className: cn(
3711
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-white/80 backdrop-blur-sm dark:bg-zinc-950/80",
3724
+ "fixed inset-0 z-50 bg-white/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-zinc-950/80",
3712
3725
  className
3713
3726
  ),
3714
3727
  ...props,
@@ -3723,7 +3736,7 @@ var AlertDialogContent = React5.forwardRef(({ className, ...props }, ref) => /*
3723
3736
  {
3724
3737
  ref,
3725
3738
  className: cn(
3726
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 antialiased data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-white p-6 shadow-lg duration-200 sm:rounded-lg md:w-full dark:border-zinc-800 dark:bg-zinc-950",
3739
+ "antialiased data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:border-zinc-800 dark:bg-zinc-950 sm:rounded-lg md:w-full",
3727
3740
  className
3728
3741
  ),
3729
3742
  ...props
@@ -4072,7 +4085,7 @@ var _reactpopover = require('@radix-ui/react-popover'); var PopoverPrimitive = _
4072
4085
 
4073
4086
  var Popover = PopoverPrimitive.Root;
4074
4087
  var PopoverTrigger = PopoverPrimitive.Trigger;
4075
- var PopoverContent = React8.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverPrimitive.Portal, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
4088
+ var PopoverContent = React8.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
4076
4089
  PopoverPrimitive.Content,
4077
4090
  {
4078
4091
  ref,
@@ -4130,12 +4143,12 @@ var SelectTrigger = React9.forwardRef(({ className, children, ...props }, ref) =
4130
4143
  }
4131
4144
  ));
4132
4145
  SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
4133
- var SelectContent = React9.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.Portal, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
4146
+ var SelectContent = React9.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
4134
4147
  SelectPrimitive.Content,
4135
4148
  {
4136
4149
  ref,
4137
4150
  className: cn(
4138
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white text-zinc-950 shadow-md dark:border-zinc-800 dark:bg-zinc-950 dark:text-neutral-50",
4151
+ "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white text-zinc-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-zinc-800 dark:bg-zinc-950 dark:text-neutral-50",
4139
4152
  position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
4140
4153
  className
4141
4154
  ),
@@ -4418,14 +4431,14 @@ var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) =
4418
4431
  {
4419
4432
  ref,
4420
4433
  className: cn(
4421
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
4434
+ "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
4422
4435
  className
4423
4436
  ),
4424
4437
  ...props
4425
4438
  }
4426
4439
  ));
4427
4440
  DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
4428
- var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
4441
+ var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
4429
4442
  DropdownMenuPrimitive.Content,
4430
4443
  {
4431
4444
  ref,
@@ -5059,7 +5072,7 @@ var _reactdialog = require('@radix-ui/react-dialog'); var DialogPrimitive = _int
5059
5072
 
5060
5073
  var Dialog = DialogPrimitive.Root;
5061
5074
  var DialogTrigger = DialogPrimitive.Trigger;
5062
- var DialogPortal = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogPrimitive.Portal, { ...props });
5075
+ var DialogPortal = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogPrimitive.Portal, { container: portalRoot, ...props });
5063
5076
  DialogPortal.displayName = DialogPrimitive.Portal.displayName;
5064
5077
  var DialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
5065
5078
  DialogPrimitive.Overlay,
@@ -5432,7 +5445,7 @@ function Sidebar() {
5432
5445
  var RedisBrowser = ({ token, url }) => {
5433
5446
  const credentials = _react.useMemo.call(void 0, () => ({ token, url }), [token, url]);
5434
5447
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { redisCredentials: credentials, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, KeysProvider, { children: [
5435
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
5448
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "ups-db h-full", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
5436
5449
  _reactresizablepanels.PanelGroup,
5437
5450
  {
5438
5451
  autoSaveId: "persistence",
@@ -5440,7 +5453,7 @@ var RedisBrowser = ({ token, url }) => {
5440
5453
  className: "h-full w-full gap-0.5 text-sm antialiased",
5441
5454
  children: [
5442
5455
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.Panel, { defaultSize: 30, minSize: 30, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Sidebar, {}) }),
5443
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.PanelResizeHandle, { className: "h-fullm flex w-1.5 items-center justify-center rounded-full hover:bg-zinc-300/20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
5456
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.PanelResizeHandle, { className: "h-full flex w-1.5 items-center justify-center rounded-full hover:bg-zinc-300/20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
5444
5457
  _iconsreact.IconDotsVertical,
5445
5458
  {
5446
5459
  size: 16,
@@ -5451,7 +5464,7 @@ var RedisBrowser = ({ token, url }) => {
5451
5464
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.Panel, { minSize: 40, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataDisplay, {}) })
5452
5465
  ]
5453
5466
  }
5454
- ),
5467
+ ) }),
5455
5468
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Toaster, {})
5456
5469
  ] }) }) }) });
5457
5470
  };
package/dist/index.mjs CHANGED
@@ -3570,6 +3570,19 @@ import { ContextMenuSeparator as ContextMenuSeparator2 } from "@radix-ui/react-c
3570
3570
  import * as React4 from "react";
3571
3571
  import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
3572
3572
  import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
3573
+
3574
+ // src/lib/portal-root.ts
3575
+ var root;
3576
+ if (typeof document !== "undefined") {
3577
+ const id = "react-redis-browser-portal-root";
3578
+ root = document.querySelector(`#${id}`) ?? document.createElement("div");
3579
+ root.classList.add("ups-db");
3580
+ root.id = "react-redis-browser-portal-root";
3581
+ document.body.append(root);
3582
+ }
3583
+ var portalRoot = root;
3584
+
3585
+ // src/components/ui/context-menu.tsx
3573
3586
  import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
3574
3587
  var ContextMenu = ContextMenuPrimitive.Root;
3575
3588
  var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
@@ -3595,19 +3608,19 @@ var ContextMenuSubContent = React4.forwardRef(({ className, ...props }, ref) =>
3595
3608
  {
3596
3609
  ref,
3597
3610
  className: cn(
3598
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
3611
+ "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
3599
3612
  className
3600
3613
  ),
3601
3614
  ...props
3602
3615
  }
3603
3616
  ));
3604
3617
  ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
3605
- var ContextMenuContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx8(
3618
+ var ContextMenuContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(ContextMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx8(
3606
3619
  ContextMenuPrimitive.Content,
3607
3620
  {
3608
3621
  ref,
3609
3622
  className: cn(
3610
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
3623
+ "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
3611
3624
  className
3612
3625
  ),
3613
3626
  ...props
@@ -3702,13 +3715,13 @@ import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
3702
3715
  import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
3703
3716
  var AlertDialog = AlertDialogPrimitive.Root;
3704
3717
  var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
3705
- var AlertDialogPortal = ({ ...props }) => /* @__PURE__ */ jsx9(AlertDialogPrimitive.Portal, { ...props });
3718
+ var AlertDialogPortal = ({ ...props }) => /* @__PURE__ */ jsx9(AlertDialogPrimitive.Portal, { container: portalRoot, ...props });
3706
3719
  AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
3707
3720
  var AlertDialogOverlay = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
3708
3721
  AlertDialogPrimitive.Overlay,
3709
3722
  {
3710
3723
  className: cn(
3711
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-white/80 backdrop-blur-sm dark:bg-zinc-950/80",
3724
+ "fixed inset-0 z-50 bg-white/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-zinc-950/80",
3712
3725
  className
3713
3726
  ),
3714
3727
  ...props,
@@ -3723,7 +3736,7 @@ var AlertDialogContent = React5.forwardRef(({ className, ...props }, ref) => /*
3723
3736
  {
3724
3737
  ref,
3725
3738
  className: cn(
3726
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 antialiased data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-white p-6 shadow-lg duration-200 sm:rounded-lg md:w-full dark:border-zinc-800 dark:bg-zinc-950",
3739
+ "antialiased data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:border-zinc-800 dark:bg-zinc-950 sm:rounded-lg md:w-full",
3727
3740
  className
3728
3741
  ),
3729
3742
  ...props
@@ -4072,7 +4085,7 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
4072
4085
  import { jsx as jsx16 } from "react/jsx-runtime";
4073
4086
  var Popover = PopoverPrimitive.Root;
4074
4087
  var PopoverTrigger = PopoverPrimitive.Trigger;
4075
- var PopoverContent = React8.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx16(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx16(
4088
+ var PopoverContent = React8.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx16(PopoverPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx16(
4076
4089
  PopoverPrimitive.Content,
4077
4090
  {
4078
4091
  ref,
@@ -4130,12 +4143,12 @@ var SelectTrigger = React9.forwardRef(({ className, children, ...props }, ref) =
4130
4143
  }
4131
4144
  ));
4132
4145
  SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
4133
- var SelectContent = React9.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx17(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx17(
4146
+ var SelectContent = React9.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx17(SelectPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx17(
4134
4147
  SelectPrimitive.Content,
4135
4148
  {
4136
4149
  ref,
4137
4150
  className: cn(
4138
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white text-zinc-950 shadow-md dark:border-zinc-800 dark:bg-zinc-950 dark:text-neutral-50",
4151
+ "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white text-zinc-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-zinc-800 dark:bg-zinc-950 dark:text-neutral-50",
4139
4152
  position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
4140
4153
  className
4141
4154
  ),
@@ -4418,14 +4431,14 @@ var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) =
4418
4431
  {
4419
4432
  ref,
4420
4433
  className: cn(
4421
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
4434
+ "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
4422
4435
  className
4423
4436
  ),
4424
4437
  ...props
4425
4438
  }
4426
4439
  ));
4427
4440
  DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
4428
- var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx21(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx21(
4441
+ var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx21(DropdownMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx21(
4429
4442
  DropdownMenuPrimitive.Content,
4430
4443
  {
4431
4444
  ref,
@@ -5059,7 +5072,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
5059
5072
  import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
5060
5073
  var Dialog = DialogPrimitive.Root;
5061
5074
  var DialogTrigger = DialogPrimitive.Trigger;
5062
- var DialogPortal = (props) => /* @__PURE__ */ jsx33(DialogPrimitive.Portal, { ...props });
5075
+ var DialogPortal = (props) => /* @__PURE__ */ jsx33(DialogPrimitive.Portal, { container: portalRoot, ...props });
5063
5076
  DialogPortal.displayName = DialogPrimitive.Portal.displayName;
5064
5077
  var DialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
5065
5078
  DialogPrimitive.Overlay,
@@ -5432,7 +5445,7 @@ import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
5432
5445
  var RedisBrowser = ({ token, url }) => {
5433
5446
  const credentials = useMemo6(() => ({ token, url }), [token, url]);
5434
5447
  return /* @__PURE__ */ jsx42(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx42(TooltipProvider, { children: /* @__PURE__ */ jsx42(DatabrowserProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsxs31(KeysProvider, { children: [
5435
- /* @__PURE__ */ jsxs31(
5448
+ /* @__PURE__ */ jsx42("div", { className: "ups-db h-full", children: /* @__PURE__ */ jsxs31(
5436
5449
  PanelGroup,
5437
5450
  {
5438
5451
  autoSaveId: "persistence",
@@ -5440,7 +5453,7 @@ var RedisBrowser = ({ token, url }) => {
5440
5453
  className: "h-full w-full gap-0.5 text-sm antialiased",
5441
5454
  children: [
5442
5455
  /* @__PURE__ */ jsx42(Panel, { defaultSize: 30, minSize: 30, children: /* @__PURE__ */ jsx42(Sidebar, {}) }),
5443
- /* @__PURE__ */ jsx42(PanelResizeHandle, { className: "h-fullm flex w-1.5 items-center justify-center rounded-full hover:bg-zinc-300/20", children: /* @__PURE__ */ jsx42(
5456
+ /* @__PURE__ */ jsx42(PanelResizeHandle, { className: "h-full flex w-1.5 items-center justify-center rounded-full hover:bg-zinc-300/20", children: /* @__PURE__ */ jsx42(
5444
5457
  IconDotsVertical2,
5445
5458
  {
5446
5459
  size: 16,
@@ -5451,7 +5464,7 @@ var RedisBrowser = ({ token, url }) => {
5451
5464
  /* @__PURE__ */ jsx42(Panel, { minSize: 40, children: /* @__PURE__ */ jsx42(DataDisplay, {}) })
5452
5465
  ]
5453
5466
  }
5454
- ),
5467
+ ) }),
5455
5468
  /* @__PURE__ */ jsx42(Toaster, {})
5456
5469
  ] }) }) }) });
5457
5470
  };
package/package.json CHANGED
@@ -1,82 +1 @@
1
- {
2
- "name": "@upstash/react-redis-browser",
3
- "version": "0.0.0",
4
- "main": "./dist/index.js",
5
- "types": "./dist/index.d.ts",
6
- "license": "MIT",
7
- "private": false,
8
- "publishConfig": {
9
- "access": "public"
10
- },
11
- "bugs": {
12
- "url": "https://github.com/upstash/react-redis-browser/issues"
13
- },
14
- "homepage": "https://github.com/upstash/react-redis-browser",
15
- "files": [
16
- "./dist/**"
17
- ],
18
- "scripts": {
19
- "build": "tsup",
20
- "dev": "vite",
21
- "lint": "tsc && eslint",
22
- "fmt": "prettier --write ."
23
- },
24
- "lint-staged": {
25
- "**/*.{js,ts,tsx}": [
26
- "prettier --write",
27
- "eslint --fix"
28
- ]
29
- },
30
- "dependencies": {
31
- "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
32
- "@monaco-editor/react": "^4.6.0",
33
- "@radix-ui/react-alert-dialog": "^1.0.5",
34
- "@radix-ui/react-context-menu": "^2.2.2",
35
- "@radix-ui/react-dialog": "^1.0.5",
36
- "@radix-ui/react-dropdown-menu": "^2.1.2",
37
- "@radix-ui/react-icons": "1.3.0",
38
- "@radix-ui/react-popover": "^1.0.7",
39
- "@radix-ui/react-scroll-area": "^1.0.3",
40
- "@radix-ui/react-select": "^2.0.0",
41
- "@radix-ui/react-slot": "^1.0.2",
42
- "@radix-ui/react-toast": "^1.1.5",
43
- "@radix-ui/react-tooltip": "^1.0.7",
44
- "@tabler/icons-react": "^3.19.0",
45
- "@tanstack/react-query": "^5.32.0",
46
- "@types/bytes": "^3.1.4",
47
- "@upstash/redis": "^1.31.6",
48
- "bytes": "^3.1.2",
49
- "react-hook-form": "^7.53.0",
50
- "react-resizable-panels": "^2.1.4",
51
- "zustand": "5.0.0"
52
- },
53
- "devDependencies": {
54
- "@types/node": "^22.8.4",
55
- "@types/react": "^18.3.12",
56
- "@types/react-dom": "^18.3.1",
57
- "@typescript-eslint/eslint-plugin": "8.4.0",
58
- "@typescript-eslint/parser": "8.4.0",
59
- "@vitejs/plugin-react": "^4.1.0",
60
- "autoprefixer": "^10.4.14",
61
- "class-variance-authority": "^0.7.0",
62
- "clsx": "^2.0.0",
63
- "eslint": "9.10.0",
64
- "eslint-plugin-unicorn": "55.0.0",
65
- "postcss": "^8.4.31",
66
- "prettier": "^3.0.3",
67
- "prettier-plugin-tailwindcss": "^0.5.5",
68
- "react": "^18.3.1",
69
- "react-dom": "^18.3.1",
70
- "tailwind-merge": "^2.5.4",
71
- "tailwindcss": "^3.4.14",
72
- "tailwindcss-animate": "^1.0.7",
73
- "tsup": "^8.3.5",
74
- "typescript": "^5.0.4",
75
- "vite": "^5.4.10",
76
- "vite-tsconfig-paths": "^5.0.1"
77
- },
78
- "peerDependencies": {
79
- "react": "^18.2.0 || ^19",
80
- "react-dom": "^18.2.0 || ^19"
81
- }
82
- }
1
+ { "name": "@upstash/react-redis-browser", "version": "v0.1.2-canary", "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 ." }, "lint-staged": { "**/*.{js,ts,tsx}": [ "prettier --write", "eslint --fix" ] }, "dependencies": { "@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.0.5", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-icons": "1.3.0", "@radix-ui/react-popover": "^1.0.7", "@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.31.6", "bytes": "^3.1.2", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.4", "zustand": "5.0.0" }, "devDependencies": { "postcss-prefix-selector": "^2.1.0", "@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", "eslint": "9.10.0", "eslint-plugin-unicorn": "55.0.0", "postcss": "^8.4.31", "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" } }