@upstash/react-redis-browser 0.1.4 → 0.1.6-canary

package/dist/index.js

@@ -132,9 +132,12 @@ function useToast() {
 }
 
 // src/lib/clients.ts
-var redisClient = (databrowser) => {
-  const token = _optionalChain([databrowser, 'optionalAccess', _2 => _2.token]) || process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN;
-  const url = _optionalChain([databrowser, 'optionalAccess', _3 => _3.url]) || process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_URL;
+var redisClient = ({
+  credentials,
+  pipelining
+}) => {
+  const token = _optionalChain([credentials, 'optionalAccess', _2 => _2.token]) || process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN;
+  const url = _optionalChain([credentials, 'optionalAccess', _3 => _3.url]) || process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_URL;
   if (!url) {
     throw new Error("Redis URL is missing!");
   }
@@ -144,7 +147,7 @@ var redisClient = (databrowser) => {
   const redis = new (0, _redis.Redis)({
     url,
     token,
-    enableAutoPipelining: true,
+    enableAutoPipelining: pipelining,
     automaticDeserialization: false,
     keepAlive: false
   });
@@ -184,11 +187,12 @@ var DatabrowserProvider = ({
   children,
   redisCredentials
 }) => {
-  const redisInstance = _react.useMemo.call(void 0, () => redisClient(redisCredentials), [redisCredentials]);
+  const redisInstance = _react.useMemo.call(void 0, () => redisClient({ credentials: redisCredentials, pipelining: true }), [redisCredentials]);
+  const redisInstanceNoPipeline = _react.useMemo.call(void 0, () => redisClient({ credentials: redisCredentials, pipelining: false }), [redisCredentials]);
   const [store] = _react.useState.call(void 0, () => {
     return createDatabrowserStore();
   });
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserContext.Provider, { value: { redis: redisInstance, store }, children });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserContext.Provider, { value: { redis: redisInstance, redisNoPipeline: redisInstanceNoPipeline, store }, children });
 };
 var useDatabrowser = () => {
   const context = _react.useContext.call(void 0, DatabrowserContext);
@@ -2938,7 +2942,7 @@ var DATA_TYPE_NAMES = {
 var PAGE_SIZE = 30;
 var FETCH_COUNTS = [100, 200, 400, 800];
 var useFetchKeys = (search) => {
-  const { redis } = useDatabrowser();
+  const { redisNoPipeline: redis } = useDatabrowser();
   const cache = _react.useRef.call(void 0, );
   const lastKey = _react.useRef.call(void 0, );
   const fetchKeys = _react.useCallback.call(void 0, () => {
@@ -3270,7 +3274,7 @@ var useAddKey = () => {
 
 var FETCH_SIMPLE_KEY_QUERY_KEY = "fetch-simple-key";
 var useFetchSimpleKey = (dataKey, type) => {
-  const { redis } = useDatabrowser();
+  const { redisNoPipeline: redis } = useDatabrowser();
   const { deleteKeyCache } = useDeleteKeyCache();
   return _reactquery.useQuery.call(void 0, {
     queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY, dataKey],
@@ -3279,11 +3283,21 @@ var useFetchSimpleKey = (dataKey, type) => {
       if (type === "string") result = await redis.get(dataKey);
       else if (type === "json") result = await redis.json.get(dataKey);
       else throw new Error(`Invalid type when fetching simple key: ${type}`);
+      if (type === "json" && result !== null)
+        result = JSON.stringify(sortObject(JSON.parse(result)));
       if (result === null) deleteKeyCache(dataKey);
       return result;
     }
   });
 };
+var sortObject = (obj) => {
+  if (typeof obj !== "object" || obj === null) return obj;
+  return Object.fromEntries(
+    Object.entries(obj).sort((a, b) => a[0].localeCompare(b[0])).map(
+      ([key, value]) => typeof value === "object" && !Array.isArray(value) && value !== null ? [key, sortObject(value)] : [key, value]
+    )
+  );
+};
 
 // src/components/databrowser/hooks/use-delete-key-cache.ts
 var useDeleteKeyCache = () => {
@@ -3331,7 +3345,7 @@ var useDeleteKey = () => {
 var LIST_DISPLAY_PAGE_SIZE = 50;
 var FETCH_LIST_ITEMS_QUERY_KEY = "use-fetch-list-items";
 var useFetchListItems = ({ dataKey, type }) => {
-  const { redis } = useDatabrowser();
+  const { redisNoPipeline: redis } = useDatabrowser();
   const setQuery = _reactquery.useInfiniteQuery.call(void 0, {
     enabled: type === "set",
     queryKey: [FETCH_LIST_ITEMS_QUERY_KEY, dataKey, "set"],
@@ -4591,7 +4605,7 @@ var DisplayHeader = ({
 }) => {
   const { setSelectedListItem } = useDatabrowserStore();
   const handleAddItem = () => {
-    setSelectedListItem({ key: type === "stream" ? "*" : "", value: "", isNew: true });
+    setSelectedListItem({ key: type === "stream" ? "*" : "", isNew: true });
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-h-10 items-center justify-between gap-4", children: [
@@ -4613,6 +4627,7 @@ var DisplayHeader = ({
 // src/components/databrowser/components/display/display-list-edit.tsx
 
 
+
 // src/components/ui/tooltip.tsx
 
 
@@ -4790,7 +4805,8 @@ var useField = ({
   form,
   height,
   showCopyButton,
-  readOnly
+  readOnly,
+  data
 }) => {
   const { field, fieldState } = _reacthookform.useController.call(void 0, {
     name,
@@ -4800,13 +4816,13 @@ var useField = ({
     () => checkIsValidJSON(field.value) ? "JSON" : "Text"
   );
   _react.useEffect.call(void 0, () => {
-    if (!checkIsValidJSON(field.value)) {
+    if (!checkIsValidJSON(data)) {
       return;
     }
-    form.setValue(name, formatJSON(field.value), {
+    form.setValue(name, formatJSON(data), {
       shouldDirty: false
     });
-  }, []);
+  }, [data]);
   const handleTypeChange = (type) => {
     setContentType(type);
     if (type === "JSON") {
@@ -4856,14 +4872,32 @@ var ListEditDisplay = ({
 var ListEditForm = ({
   type,
   dataKey,
-  item: { key: itemKey, value: itemValue, isNew }
+  item: { key: itemKey, isNew }
 }) => {
+  const query = useFetchListItems({
+    type,
+    dataKey
+  });
+  const findValue = () => {
+    for (const page of _nullishCoalesce(_optionalChain([query, 'access', _28 => _28.data, 'optionalAccess', _29 => _29.pages]), () => ( []))) {
+      const item = page.keys.find((item2) => item2.key === itemKey);
+      if (item && "value" in item) return item.value;
+    }
+    return;
+  };
+  const itemValue = findValue();
   const form = _reacthookform.useForm.call(void 0, {
     defaultValues: {
       key: itemKey,
       value: itemValue
     }
   });
+  _react.useEffect.call(void 0, () => {
+    form.reset({
+      key: itemKey,
+      value: itemValue
+    });
+  }, [itemKey, itemValue]);
   const { mutateAsync: editItem, isPending } = useEditListItem();
   const { setSelectedListItem } = useDatabrowserStore();
   const [keyLabel, valueLabel] = headerLabels[type];
@@ -4886,7 +4920,8 @@ var ListEditForm = ({
           readOnly: type === "stream",
           name: "key",
           height: type === "set" ? 250 : 100,
-          label: keyLabel
+          label: keyLabel,
+          data: itemKey
         }
       ),
       type === "zset" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -4895,7 +4930,8 @@ var ListEditForm = ({
           readOnly: type === "stream",
           name: "value",
           height: type === "list" ? 250 : 100,
-          label: valueLabel
+          label: valueLabel,
+          data: _nullishCoalesce(itemValue, () => ( ""))
         }
       )
     ] }),
@@ -4951,7 +4987,8 @@ var FormItem = ({
   name,
   label,
   height,
-  readOnly
+  readOnly,
+  data
 }) => {
   const form = _reacthookform.useFormContext.call(void 0, );
   const { editor, selector } = useField({
@@ -4959,7 +4996,8 @@ var FormItem = ({
     form,
     height,
     showCopyButton: true,
-    readOnly
+    readOnly,
+    data
   });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 text-xs", children: [
@@ -4996,7 +5034,7 @@ var ListItems = ({
   dataKey
 }) => {
   const { setSelectedListItem } = useDatabrowserStore();
-  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _28 => _28.data, 'optionalAccess', _29 => _29.pages, 'access', _30 => _30.flatMap, 'call', _31 => _31((page) => page.keys)]), () => ( [])), [query.data]);
+  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _30 => _30.data, 'optionalAccess', _31 => _31.pages, 'access', _32 => _32.flatMap, 'call', _33 => _33((page) => page.keys)]), () => ( [])), [query.data]);
   const { mutate: editItem } = useEditListItem();
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: keys.map(({ key, value }, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "tr",
@@ -5004,7 +5042,7 @@ var ListItems = ({
       "data-item-key": key,
       "data-item-value": value,
       onClick: () => {
-        setSelectedListItem({ key, value });
+        setSelectedListItem({ key });
       },
       className: "h-10 border-b border-b-zinc-100 hover:bg-zinc-50",
       children: [
@@ -5083,16 +5121,16 @@ var EditorDisplayForm = ({
   const form = _reacthookform.useForm.call(void 0, {
     defaultValues: { value: data }
   });
-  const { editor, selector } = useField({ name: "value", form });
-  const { mutateAsync: setKey, isPending: isSettingKey } = useSetSimpleKey(dataKey, type);
   _react.useEffect.call(void 0, () => {
     form.reset(
       { value: data },
       {
-        keepValues: true
+        keepValues: false
       }
     );
   }, [data]);
+  const { editor, selector } = useField({ name: "value", form, data });
+  const { mutateAsync: setKey, isPending: isSettingKey } = useSetSimpleKey(dataKey, type);
   const handleCancel = () => {
     form.reset();
   };
@@ -5254,7 +5292,7 @@ function AddKeyModal() {
     setSelectedKey(key);
     setOpen(false);
     setTimeout(() => {
-      _optionalChain([window, 'access', _32 => _32.document, 'access', _33 => _33.querySelector, 'call', _34 => _34(`[data-key="${key}"]`), 'optionalAccess', _35 => _35.scrollIntoView, 'call', _36 => _36({
+      _optionalChain([window, 'access', _34 => _34.document, 'access', _35 => _35.querySelector, 'call', _36 => _36(`[data-key="${key}"]`), 'optionalAccess', _37 => _37.scrollIntoView, 'call', _38 => _38({
         behavior: "smooth",
         block: "start",
         inline: "nearest"
@@ -5299,7 +5337,7 @@ function AddKeyModal() {
                 }
               )
             ] }),
-            formState.errors.key && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-3 mt-2 text-xs text-red-500", children: _optionalChain([formState, 'access', _37 => _37.errors, 'access', _38 => _38.key, 'optionalAccess', _39 => _39.message]) }),
+            formState.errors.key && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-3 mt-2 text-xs text-red-500", children: _optionalChain([formState, 'access', _39 => _39.errors, 'access', _40 => _40.key, 'optionalAccess', _41 => _41.message]) }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-2 text-xs text-zinc-500", children: "After creating the key, you can edit the value" }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-6 flex justify-end gap-2", children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -5393,7 +5431,7 @@ var SidebarContextMenu = ({ children }) => {
 
 var KeysList = () => {
   const { keys } = useKeys();
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pr-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SidebarContextMenu, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: keys.map((data, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyItem, { nextKey: _nullishCoalesce(_optionalChain([keys, 'access', _40 => _40.at, 'call', _41 => _41(i + 1), 'optionalAccess', _42 => _42[0]]), () => ( "")), data }, data[0])) }) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pr-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SidebarContextMenu, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: keys.map((data, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyItem, { nextKey: _nullishCoalesce(_optionalChain([keys, 'access', _42 => _42.at, 'call', _43 => _43(i + 1), 'optionalAccess', _44 => _44[0]]), () => ( "")), data }, data[0])) }) }) });
 };
 var keyStyles = {
   string: "border-sky-400 !bg-sky-50 text-sky-900",
@@ -5529,6 +5567,9 @@ function Sidebar() {
                 queryClient.invalidateQueries({
                   queryKey: [FETCH_LIST_ITEMS_QUERY_KEY]
                 });
+                queryClient.invalidateQueries({
+                  queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY]
+                });
                 queryClient.invalidateQueries({
                   queryKey: [FETCH_DB_SIZE_QUERY_KEY]
                 });

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/databrowser/index.tsx
-import { useEffect as useEffect9, useMemo as useMemo6 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo6 } from "react";
 
 // src/store.tsx
 import { createContext, useContext, useMemo, useState as useState2 } from "react";
@@ -132,9 +132,12 @@ function useToast() {
 }
 
 // src/lib/clients.ts
-var redisClient = (databrowser) => {
-  const token = databrowser?.token || process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN;
-  const url = databrowser?.url || process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_URL;
+var redisClient = ({
+  credentials,
+  pipelining
+}) => {
+  const token = credentials?.token || process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN;
+  const url = credentials?.url || process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_URL;
   if (!url) {
     throw new Error("Redis URL is missing!");
   }
@@ -144,7 +147,7 @@ var redisClient = (databrowser) => {
   const redis = new Redis({
     url,
     token,
-    enableAutoPipelining: true,
+    enableAutoPipelining: pipelining,
     automaticDeserialization: false,
     keepAlive: false
   });
@@ -184,11 +187,12 @@ var DatabrowserProvider = ({
   children,
   redisCredentials
 }) => {
-  const redisInstance = useMemo(() => redisClient(redisCredentials), [redisCredentials]);
+  const redisInstance = useMemo(() => redisClient({ credentials: redisCredentials, pipelining: true }), [redisCredentials]);
+  const redisInstanceNoPipeline = useMemo(() => redisClient({ credentials: redisCredentials, pipelining: false }), [redisCredentials]);
   const [store] = useState2(() => {
     return createDatabrowserStore();
   });
-  return /* @__PURE__ */ jsx(DatabrowserContext.Provider, { value: { redis: redisInstance, store }, children });
+  return /* @__PURE__ */ jsx(DatabrowserContext.Provider, { value: { redis: redisInstance, redisNoPipeline: redisInstanceNoPipeline, store }, children });
 };
 var useDatabrowser = () => {
   const context = useContext(DatabrowserContext);
@@ -2938,7 +2942,7 @@ var DATA_TYPE_NAMES = {
 var PAGE_SIZE = 30;
 var FETCH_COUNTS = [100, 200, 400, 800];
 var useFetchKeys = (search) => {
-  const { redis } = useDatabrowser();
+  const { redisNoPipeline: redis } = useDatabrowser();
   const cache = useRef();
   const lastKey = useRef();
   const fetchKeys = useCallback(() => {
@@ -3270,7 +3274,7 @@ import { useCallback as useCallback3 } from "react";
 import { useQuery as useQuery2 } from "@tanstack/react-query";
 var FETCH_SIMPLE_KEY_QUERY_KEY = "fetch-simple-key";
 var useFetchSimpleKey = (dataKey, type) => {
-  const { redis } = useDatabrowser();
+  const { redisNoPipeline: redis } = useDatabrowser();
   const { deleteKeyCache } = useDeleteKeyCache();
   return useQuery2({
     queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY, dataKey],
@@ -3279,11 +3283,21 @@ var useFetchSimpleKey = (dataKey, type) => {
       if (type === "string") result = await redis.get(dataKey);
       else if (type === "json") result = await redis.json.get(dataKey);
       else throw new Error(`Invalid type when fetching simple key: ${type}`);
+      if (type === "json" && result !== null)
+        result = JSON.stringify(sortObject(JSON.parse(result)));
       if (result === null) deleteKeyCache(dataKey);
       return result;
     }
   });
 };
+var sortObject = (obj) => {
+  if (typeof obj !== "object" || obj === null) return obj;
+  return Object.fromEntries(
+    Object.entries(obj).sort((a, b) => a[0].localeCompare(b[0])).map(
+      ([key, value]) => typeof value === "object" && !Array.isArray(value) && value !== null ? [key, sortObject(value)] : [key, value]
+    )
+  );
+};
 
 // src/components/databrowser/hooks/use-delete-key-cache.ts
 var useDeleteKeyCache = () => {
@@ -3331,7 +3345,7 @@ import { useInfiniteQuery as useInfiniteQuery2 } from "@tanstack/react-query";
 var LIST_DISPLAY_PAGE_SIZE = 50;
 var FETCH_LIST_ITEMS_QUERY_KEY = "use-fetch-list-items";
 var useFetchListItems = ({ dataKey, type }) => {
-  const { redis } = useDatabrowser();
+  const { redisNoPipeline: redis } = useDatabrowser();
   const setQuery = useInfiniteQuery2({
     enabled: type === "set",
     queryKey: [FETCH_LIST_ITEMS_QUERY_KEY, dataKey, "set"],
@@ -4591,7 +4605,7 @@ var DisplayHeader = ({
 }) => {
   const { setSelectedListItem } = useDatabrowserStore();
   const handleAddItem = () => {
-    setSelectedListItem({ key: type === "stream" ? "*" : "", value: "", isNew: true });
+    setSelectedListItem({ key: type === "stream" ? "*" : "", isNew: true });
   };
   return /* @__PURE__ */ jsxs15("div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
     /* @__PURE__ */ jsxs15("div", { className: "flex min-h-10 items-center justify-between gap-4", children: [
@@ -4611,6 +4625,7 @@ var DisplayHeader = ({
 };
 
 // src/components/databrowser/components/display/display-list-edit.tsx
+import { useEffect as useEffect8 } from "react";
 import { Controller as Controller2, FormProvider, useForm as useForm2, useFormContext } from "react-hook-form";
 
 // src/components/ui/tooltip.tsx
@@ -4790,7 +4805,8 @@ var useField = ({
   form,
   height,
   showCopyButton,
-  readOnly
+  readOnly,
+  data
 }) => {
   const { field, fieldState } = useController({
     name,
@@ -4800,13 +4816,13 @@ var useField = ({
     () => checkIsValidJSON(field.value) ? "JSON" : "Text"
   );
   useEffect7(() => {
-    if (!checkIsValidJSON(field.value)) {
+    if (!checkIsValidJSON(data)) {
       return;
     }
-    form.setValue(name, formatJSON(field.value), {
+    form.setValue(name, formatJSON(data), {
       shouldDirty: false
     });
-  }, []);
+  }, [data]);
   const handleTypeChange = (type) => {
     setContentType(type);
     if (type === "JSON") {
@@ -4856,14 +4872,32 @@ var ListEditDisplay = ({
 var ListEditForm = ({
   type,
   dataKey,
-  item: { key: itemKey, value: itemValue, isNew }
+  item: { key: itemKey, isNew }
 }) => {
+  const query = useFetchListItems({
+    type,
+    dataKey
+  });
+  const findValue = () => {
+    for (const page of query.data?.pages ?? []) {
+      const item = page.keys.find((item2) => item2.key === itemKey);
+      if (item && "value" in item) return item.value;
+    }
+    return;
+  };
+  const itemValue = findValue();
   const form = useForm2({
     defaultValues: {
       key: itemKey,
       value: itemValue
     }
   });
+  useEffect8(() => {
+    form.reset({
+      key: itemKey,
+      value: itemValue
+    });
+  }, [itemKey, itemValue]);
   const { mutateAsync: editItem, isPending } = useEditListItem();
   const { setSelectedListItem } = useDatabrowserStore();
   const [keyLabel, valueLabel] = headerLabels[type];
@@ -4886,7 +4920,8 @@ var ListEditForm = ({
           readOnly: type === "stream",
           name: "key",
           height: type === "set" ? 250 : 100,
-          label: keyLabel
+          label: keyLabel,
+          data: itemKey
         }
       ),
       type === "zset" ? /* @__PURE__ */ jsx29(NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ jsx29(
@@ -4895,7 +4930,8 @@ var ListEditForm = ({
           readOnly: type === "stream",
           name: "value",
           height: type === "list" ? 250 : 100,
-          label: valueLabel
+          label: valueLabel,
+          data: itemValue ?? ""
         }
       )
     ] }),
@@ -4951,7 +4987,8 @@ var FormItem = ({
   name,
   label,
   height,
-  readOnly
+  readOnly,
+  data
 }) => {
   const form = useFormContext();
   const { editor, selector } = useField({
@@ -4959,7 +4996,8 @@ var FormItem = ({
     form,
     height,
     showCopyButton: true,
-    readOnly
+    readOnly,
+    data
   });
   return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1 text-xs", children: [
@@ -5004,7 +5042,7 @@ var ListItems = ({
       "data-item-key": key,
       "data-item-value": value,
       onClick: () => {
-        setSelectedListItem({ key, value });
+        setSelectedListItem({ key });
       },
       className: "h-10 border-b border-b-zinc-100 hover:bg-zinc-50",
       children: [
@@ -5059,7 +5097,7 @@ var ListItems = ({
 };
 
 // src/components/databrowser/components/display/display-simple.tsx
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 import { useForm as useForm3 } from "react-hook-form";
 import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
 var EditorDisplay = ({ dataKey, type }) => {
@@ -5083,16 +5121,16 @@ var EditorDisplayForm = ({
   const form = useForm3({
     defaultValues: { value: data }
   });
-  const { editor, selector } = useField({ name: "value", form });
-  const { mutateAsync: setKey, isPending: isSettingKey } = useSetSimpleKey(dataKey, type);
-  useEffect8(() => {
+  useEffect9(() => {
     form.reset(
       { value: data },
       {
-        keepValues: true
+        keepValues: false
       }
     );
   }, [data]);
+  const { editor, selector } = useField({ name: "value", form, data });
+  const { mutateAsync: setKey, isPending: isSettingKey } = useSetSimpleKey(dataKey, type);
   const handleCancel = () => {
     form.reset();
   };
@@ -5529,6 +5567,9 @@ function Sidebar() {
                 queryClient.invalidateQueries({
                   queryKey: [FETCH_LIST_ITEMS_QUERY_KEY]
                 });
+                queryClient.invalidateQueries({
+                  queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY]
+                });
                 queryClient.invalidateQueries({
                   queryKey: [FETCH_DB_SIZE_QUERY_KEY]
                 });
@@ -5552,7 +5593,7 @@ function Sidebar() {
 import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
 var RedisBrowser = ({ token, url }) => {
   const credentials = useMemo6(() => ({ token, url }), [token, url]);
-  useEffect9(() => {
+  useEffect10(() => {
     queryClient.resetQueries();
   }, [credentials.url]);
   return /* @__PURE__ */ jsx42(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx42(TooltipProvider, { children: /* @__PURE__ */ jsx42(DatabrowserProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsx42(KeysProvider, { children: /* @__PURE__ */ jsxs31("div", { className: "ups-db", style: { height: "100%" }, children: [

package/package.json

@@ -1 +1 @@
-{ "name": "@upstash/react-redis-browser", "version": "v0.1.4", "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": { "@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-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.34.3", "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" } }
+{ "name": "@upstash/react-redis-browser", "version": "v0.1.6-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 ./src" }, "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-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.34.3", "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" } }