@upstash/react-redis-browser 0.2.14-rc.1 → 0.2.14-rc.10

package/dist/index.css

@@ -792,6 +792,9 @@
 .ups-db .invisible {
   visibility: hidden;
 }
+.ups-db .collapse {
+  visibility: collapse;
+}
 .ups-db .static {
   position: static;
 }
@@ -864,6 +867,9 @@
 .ups-db .z-\[100\] {
   z-index: 100;
 }
+.ups-db .col-span-2 {
+  grid-column: span 2 / span 2;
+}
 .ups-db .-mx-1 {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
@@ -894,6 +900,9 @@
 .ups-db .mb-1 {
   margin-bottom: 0.25rem;
 }
+.ups-db .mb-1\.5 {
+  margin-bottom: 0.375rem;
+}
 .ups-db .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -912,6 +921,9 @@
 .ups-db .ml-2 {
   margin-left: 0.5rem;
 }
+.ups-db .ml-\[15px\] {
+  margin-left: 15px;
+}
 .ups-db .ml-auto {
   margin-left: auto;
 }
@@ -924,9 +936,15 @@
 .ups-db .mt-0\.5 {
   margin-top: 0.125rem;
 }
+.ups-db .mt-1 {
+  margin-top: 0.25rem;
+}
 .ups-db .mt-2 {
   margin-top: 0.5rem;
 }
+.ups-db .mt-3 {
+  margin-top: 0.75rem;
+}
 .ups-db .mt-4 {
   margin-top: 1rem;
 }
@@ -1013,6 +1031,9 @@
 .ups-db .h-\[18px\] {
   height: 18px;
 }
+.ups-db .h-\[200px\] {
+  height: 200px;
+}
 .ups-db .h-\[20px\] {
   height: 20px;
 }
@@ -1034,9 +1055,15 @@
 .ups-db .h-px {
   height: 1px;
 }
+.ups-db .max-h-\[200px\] {
+  max-height: 200px;
+}
 .ups-db .max-h-\[300px\] {
   max-height: 300px;
 }
+.ups-db .max-h-\[40vh\] {
+  max-height: 40vh;
+}
 .ups-db .max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
   max-height: var(--radix-dropdown-menu-content-available-height);
 }
@@ -1046,6 +1073,9 @@
 .ups-db .min-h-0 {
   min-height: 0px;
 }
+.ups-db .min-h-\[150px\] {
+  min-height: 150px;
+}
 .ups-db .min-h-\[20px\] {
   min-height: 20px;
 }
@@ -1073,6 +1103,9 @@
 .ups-db .w-24 {
   width: 6rem;
 }
+.ups-db .w-3 {
+  width: 0.75rem;
+}
 .ups-db .w-3\.5 {
   width: 0.875rem;
 }
@@ -1131,6 +1164,9 @@
 .ups-db .min-w-24 {
   min-width: 6rem;
 }
+.ups-db .min-w-\[140px\] {
+  min-width: 140px;
+}
 .ups-db .min-w-\[30px\] {
   min-width: 30px;
 }
@@ -1143,9 +1179,15 @@
 .ups-db .max-w-0 {
   max-width: 0px;
 }
+.ups-db .max-w-2xl {
+  max-width: 42rem;
+}
 .ups-db .max-w-32 {
   max-width: 8rem;
 }
+.ups-db .max-w-4xl {
+  max-width: 56rem;
+}
 .ups-db .max-w-\[370px\] {
   max-width: 370px;
 }
@@ -1158,6 +1200,9 @@
 .ups-db .max-w-md {
   max-width: 28rem;
 }
+.ups-db .max-w-xs {
+  max-width: 20rem;
+}
 .ups-db .flex-1 {
   flex: 1 1 0%;
 }
@@ -1239,9 +1284,20 @@
 .ups-db .resize-none {
   resize: none;
 }
+.ups-db .resize-y {
+  resize: vertical;
+}
 .ups-db .resize {
   resize: both;
 }
+.ups-db .appearance-none {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+.ups-db .grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
 .ups-db .flex-col {
   flex-direction: column;
 }
@@ -1330,9 +1386,6 @@
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
-.ups-db .overflow-auto {
-  overflow: auto;
-}
 .ups-db .overflow-hidden {
   overflow: hidden;
 }
@@ -1359,9 +1412,6 @@
 .ups-db .whitespace-nowrap {
   white-space: nowrap;
 }
-.ups-db .whitespace-pre-wrap {
-  white-space: pre-wrap;
-}
 .ups-db .text-balance {
   text-wrap: balance;
 }
@@ -1395,6 +1445,10 @@
 .ups-db .rounded-xl {
   border-radius: 0.75rem;
 }
+.ups-db .rounded-b-lg {
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
 .ups-db .rounded-l-lg {
   border-top-left-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
@@ -1407,6 +1461,10 @@
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
 }
+.ups-db .rounded-r-lg {
+  border-top-right-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
 .ups-db .rounded-r-md {
   border-top-right-radius: 0.375rem;
   border-bottom-right-radius: 0.375rem;
@@ -1422,6 +1480,9 @@
 .ups-db .border {
   border-width: 1px;
 }
+.ups-db .border-2 {
+  border-width: 2px;
+}
 .ups-db .border-\[4px\] {
   border-width: 4px;
 }
@@ -1506,6 +1567,10 @@
   --tw-border-opacity: 1;
   border-bottom-color: rgb(var(--color-zinc-100) / var(--tw-border-opacity));
 }
+.ups-db .border-t-zinc-600 {
+  --tw-border-opacity: 1;
+  border-top-color: rgb(var(--color-zinc-600) / var(--tw-border-opacity));
+}
 .ups-db .\!bg-amber-50 {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(var(--color-amber-50) / var(--tw-bg-opacity)) !important;
@@ -1577,6 +1642,14 @@
   --tw-bg-opacity: 1;
   background-color: rgb(var(--color-emerald-500) / var(--tw-bg-opacity));
 }
+.ups-db .bg-emerald-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-emerald-600) / var(--tw-bg-opacity));
+}
+.ups-db .bg-emerald-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-emerald-800) / var(--tw-bg-opacity));
+}
 .ups-db .bg-gray-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -1589,6 +1662,13 @@
   --tw-bg-opacity: 1;
   background-color: rgb(var(--color-indigo-200) / var(--tw-bg-opacity));
 }
+.ups-db .bg-neutral-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
+}
+.ups-db .bg-neutral-900\/20 {
+  background-color: rgb(23 23 23 / 0.2);
+}
 .ups-db .bg-orange-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--color-orange-200) / var(--tw-bg-opacity));
@@ -1642,13 +1722,13 @@
   --tw-bg-opacity: 1;
   background-color: rgb(var(--color-zinc-200) / var(--tw-bg-opacity));
 }
-.ups-db .bg-zinc-200\/70 {
-  background-color: rgb(var(--color-zinc-200) / 0.7);
-}
 .ups-db .bg-zinc-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--color-zinc-300) / var(--tw-bg-opacity));
 }
+.ups-db .bg-zinc-400\/70 {
+  background-color: rgb(var(--color-zinc-400) / 0.7);
+}
 .ups-db .bg-zinc-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--color-zinc-50) / var(--tw-bg-opacity));
@@ -1680,6 +1760,9 @@
 .ups-db .p-2 {
   padding: 0.5rem;
 }
+.ups-db .p-3 {
+  padding: 0.75rem;
+}
 .ups-db .p-4 {
   padding: 1rem;
 }
@@ -1751,6 +1834,10 @@
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
+.ups-db .py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
 .ups-db .py-5 {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
@@ -1763,6 +1850,13 @@
   padding-top: 3px;
   padding-bottom: 3px;
 }
+.ups-db .py-\[5px\] {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+.ups-db .pb-1\.5 {
+  padding-bottom: 0.375rem;
+}
 .ups-db .pb-5 {
   padding-bottom: 1.25rem;
 }
@@ -1893,6 +1987,10 @@
   --tw-text-opacity: 1;
   color: rgb(var(--color-blue-600) / var(--tw-text-opacity));
 }
+.ups-db .text-emerald-100 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--color-emerald-100) / var(--tw-text-opacity));
+}
 .ups-db .text-emerald-600 {
   --tw-text-opacity: 1;
   color: rgb(var(--color-emerald-600) / var(--tw-text-opacity));
@@ -1989,6 +2087,9 @@
   --tw-text-opacity: 1;
   color: rgb(var(--color-sky-900) / var(--tw-text-opacity));
 }
+.ups-db .text-transparent {
+  color: transparent;
+}
 .ups-db .text-white {
   --tw-text-opacity: 1;
   color: rgb(var(--color-white) / var(--tw-text-opacity));
@@ -2028,6 +2129,9 @@
 .ups-db .text-zinc-950\/50 {
   color: rgb(var(--color-zinc-950) / 0.5);
 }
+.ups-db .underline {
+  text-decoration-line: underline;
+}
 .ups-db .underline-offset-2 {
   text-underline-offset: 2px;
 }
@@ -2241,6 +2345,11 @@
 .ups-db .ease-out {
   animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
+.ups-db .\[appearance\:textfield\] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
 .ups-db .tabs-shadow-left {
   background:
     linear-gradient(
@@ -2255,6 +2364,20 @@
       rgba(0, 0, 0, 0.08),
       rgba(0, 0, 0, 0));
 }
+.ups-db .scroll-shadow-top {
+  background:
+    linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0.04),
+      rgba(0, 0, 0, 0));
+}
+.ups-db .scroll-shadow-bottom {
+  background:
+    linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0.04),
+      rgba(0, 0, 0, 0));
+}
 .ups-db svg.tabler-icon {
   stroke-width: 2 !important;
 }
@@ -2317,6 +2440,14 @@
 .ups-db .file\:font-medium::file-selector-button {
   font-weight: 500;
 }
+.ups-db .placeholder\:text-zinc-400::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(var(--color-zinc-400) / var(--tw-text-opacity));
+}
+.ups-db .placeholder\:text-zinc-400::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(var(--color-zinc-400) / var(--tw-text-opacity));
+}
 .ups-db .placeholder\:text-zinc-500::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(var(--color-zinc-500) / var(--tw-text-opacity));
@@ -2328,10 +2459,18 @@
 .ups-db .hover\:bg-black\/10:hover {
   background-color: rgb(var(--color-black) / 0.1);
 }
+.ups-db .hover\:bg-emerald-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-emerald-100) / var(--tw-bg-opacity));
+}
 .ups-db .hover\:bg-emerald-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--color-emerald-600) / var(--tw-bg-opacity));
 }
+.ups-db .hover\:bg-emerald-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-emerald-700) / var(--tw-bg-opacity));
+}
 .ups-db .hover\:bg-red-500\/90:hover {
   background-color: rgb(var(--color-red-500) / 0.9);
 }
@@ -2352,9 +2491,9 @@
 .ups-db .hover\:bg-zinc-300\/10:hover {
   background-color: rgb(var(--color-zinc-300) / 0.1);
 }
-.ups-db .hover\:bg-zinc-800:hover {
+.ups-db .hover\:bg-zinc-50:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--color-zinc-800) / var(--tw-bg-opacity));
+  background-color: rgb(var(--color-zinc-50) / var(--tw-bg-opacity));
 }
 .ups-db .hover\:text-red-500:hover {
   --tw-text-opacity: 1;
@@ -2666,14 +2805,17 @@
 .ups-db .data-\[state\=open\]\:slide-in-from-top-full[data-state=open] {
   --tw-enter-translate-y: -100%;
 }
-.ups-db .dark\:border-zinc-700:is(.dark *) {
-  --tw-border-opacity: 1;
-  border-color: rgb(var(--color-zinc-700) / var(--tw-border-opacity));
-}
 .ups-db .dark\:border-b-zinc-200:is(.dark *) {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(var(--color-zinc-200) / var(--tw-border-opacity));
 }
+.ups-db .dark\:bg-neutral-50:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
+}
+.ups-db .dark\:bg-neutral-50\/20:is(.dark *) {
+  background-color: rgb(250 250 250 / 0.2);
+}
 .ups-db .dark\:bg-zinc-100:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--color-zinc-100) / var(--tw-bg-opacity));
@@ -2682,30 +2824,14 @@
   --tw-bg-opacity: 1;
   background-color: rgb(var(--color-zinc-200) / var(--tw-bg-opacity));
 }
-.ups-db .dark\:bg-zinc-700:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--color-zinc-700) / var(--tw-bg-opacity));
-}
-.ups-db .dark\:bg-zinc-800:is(.dark *) {
+.ups-db .dark\:bg-zinc-300:is(.dark *) {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--color-zinc-800) / var(--tw-bg-opacity));
+  background-color: rgb(var(--color-zinc-300) / var(--tw-bg-opacity));
 }
 .ups-db .dark\:text-red-400:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(var(--color-red-400) / var(--tw-text-opacity));
 }
-.ups-db .dark\:text-zinc-100:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(var(--color-zinc-100) / var(--tw-text-opacity));
-}
-.ups-db .dark\:text-zinc-400:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(var(--color-zinc-400) / var(--tw-text-opacity));
-}
-.ups-db .dark\:text-zinc-500:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(var(--color-zinc-500) / var(--tw-text-opacity));
-}
 .ups-db .dark\:text-zinc-600:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(var(--color-zinc-600) / var(--tw-text-opacity));
@@ -2754,6 +2880,14 @@
   font-size: 0.75rem;
   line-height: 1rem;
 }
+.ups-db .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+}
+.ups-db .\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+}
 .ups-db .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
   display: none;
 }

package/dist/index.d.mts

@@ -20,7 +20,8 @@ type RedisBrowserStorage = {
     set: (value: string) => void;
     get: () => string | null;
 };
-declare const RedisBrowser: ({ url, token, hideTabs, storage, disableTelemetry, onFullScreenClick, theme, }: RedisCredentials & {
+type TabType = "keys" | "search" | "all";
+declare const RedisBrowser: ({ url, token, hideTabs, tabType, storage, disableTelemetry, onFullScreenClick, theme, allowSearch, }: RedisCredentials & {
     /**
      * Whether to disable telemetry.
      *
@@ -34,6 +35,15 @@ declare const RedisBrowser: ({ url, token, hideTabs, storage, disableTelemetry,
      */
     disableTelemetry?: boolean;
     hideTabs?: boolean;
+    /**
+     * Which tab(s) to show in the databrowser.
+     * - "keys": Only show the Keys tab
+     * - "search": Only show the Search tab
+     * - "all": Show both tabs with a segmented selector
+     *
+     * @default "all"
+     */
+    tabType?: TabType;
     /**
      * If defined, the databrowser will have a full screen button in the tab bar.
      * Clicking on the button will call this function.
@@ -66,6 +76,14 @@ declare const RedisBrowser: ({ url, token, hideTabs, storage, disableTelemetry,
      * ```
      */
     theme?: DarkModeOption;
+    /**
+     * Whether to allow picking the "Search Index" type filter in keys search.
+     *
+     * This option is temporary
+     *
+     * @default true
+     */
+    allowSearch?: boolean;
 }) => react_jsx_runtime.JSX.Element;
 
 export { type DarkModeOption, RedisBrowser, type RedisBrowserStorage };

package/dist/index.d.ts

@@ -20,7 +20,8 @@ type RedisBrowserStorage = {
     set: (value: string) => void;
     get: () => string | null;
 };
-declare const RedisBrowser: ({ url, token, hideTabs, storage, disableTelemetry, onFullScreenClick, theme, }: RedisCredentials & {
+type TabType = "keys" | "search" | "all";
+declare const RedisBrowser: ({ url, token, hideTabs, tabType, storage, disableTelemetry, onFullScreenClick, theme, allowSearch, }: RedisCredentials & {
     /**
      * Whether to disable telemetry.
      *
@@ -34,6 +35,15 @@ declare const RedisBrowser: ({ url, token, hideTabs, storage, disableTelemetry,
      */
     disableTelemetry?: boolean;
     hideTabs?: boolean;
+    /**
+     * Which tab(s) to show in the databrowser.
+     * - "keys": Only show the Keys tab
+     * - "search": Only show the Search tab
+     * - "all": Show both tabs with a segmented selector
+     *
+     * @default "all"
+     */
+    tabType?: TabType;
     /**
      * If defined, the databrowser will have a full screen button in the tab bar.
      * Clicking on the button will call this function.
@@ -66,6 +76,14 @@ declare const RedisBrowser: ({ url, token, hideTabs, storage, disableTelemetry,
      * ```
      */
     theme?: DarkModeOption;
+    /**
+     * Whether to allow picking the "Search Index" type filter in keys search.
+     *
+     * This option is temporary
+     *
+     * @default true
+     */
+    allowSearch?: boolean;
 }) => react_jsx_runtime.JSX.Element;
 
 export { type DarkModeOption, RedisBrowser, type RedisBrowserStorage };