@instantdb/components 0.22.89-experimental.drewh-use-env-for-explorer-demo.20280152775.1 → 0.22.89-experimental.drewh-ssr.20280366757.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@instantdb/components",
   "private": false,
-  "version": "0.22.89-experimental.drewh-use-env-for-explorer-demo.20280152775.1",
+  "version": "0.22.89-experimental.drewh-ssr.20280366757.1",
   "type": "module",
   "description": "Instant's UI components",
   "homepage": "https://github.com/instantdb/instant/tree/main/client/packages/components",
@@ -54,8 +54,8 @@
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0"
   },
   "dependencies": {
     "@babel/parser": "^8.0.0-beta.0",
@@ -74,6 +74,7 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.1.7",
+    "@radix-ui/react-visually-hidden": "^1.2.4",
     "@tanstack/react-table": "^8.21.3",
     "clsx": "^2.1.0",
     "copy-to-clipboard": "^3.3.3",
@@ -92,11 +93,11 @@
     "swr": "^2.2.4",
     "tailwind-merge": "^2.2.1",
     "uuid": "^11.1.0",
-    "@instantdb/core": "0.22.89-experimental.drewh-use-env-for-explorer-demo.20280152775.1",
-    "@instantdb/version": "0.22.89-experimental.drewh-use-env-for-explorer-demo.20280152775.1",
-    "@instantdb/react": "0.22.89-experimental.drewh-use-env-for-explorer-demo.20280152775.1",
-    "@instantdb/admin": "0.22.89-experimental.drewh-use-env-for-explorer-demo.20280152775.1",
-    "@instantdb/platform": "0.22.89-experimental.drewh-use-env-for-explorer-demo.20280152775.1"
+    "@instantdb/admin": "0.22.89-experimental.drewh-ssr.20280366757.1",
+    "@instantdb/core": "0.22.89-experimental.drewh-ssr.20280366757.1",
+    "@instantdb/react": "0.22.89-experimental.drewh-ssr.20280366757.1",
+    "@instantdb/platform": "0.22.89-experimental.drewh-ssr.20280366757.1",
+    "@instantdb/version": "0.22.89-experimental.drewh-ssr.20280366757.1"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/components/explorer/explorer-layout.tsx

@@ -55,10 +55,10 @@ export const ExplorerLayout = ({
         props.className,
       )}
     >
-      <Dialog {...recentlyDeletedNsDialog}>
+      <Dialog title="Recently Deleted Namespaces" {...recentlyDeletedNsDialog}>
         <RecentlyDeletedNamespaces appId={props.appId} db={db} />
       </Dialog>
-      <Dialog {...newNsDialog}>
+      <Dialog title="New Namespace" {...newNsDialog}>
         <NewNamespaceDialog
           db={db}
           onClose={(p) => {

package/src/components/explorer/index.tsx

@@ -120,12 +120,20 @@ export const Explorer = (_props: WithOptional<ExplorerProps>) => {
   const [_explorerState, _setExplorerState] = useState<ExplorerNav | null>(
     null,
   );
+
   const props: WithDefaults<ExplorerProps> = fillPropsWithDefaults(
     _props,
     _explorerState,
     _setExplorerState,
   );
 
+  if (!props.adminToken) {
+    throw new Error('adminToken is required for explorer');
+  }
+  if (!props.appId) {
+    throw new Error('appId is required for explorer');
+  }
+
   // inside the component avoid setting explorer state directly
   // if change could be useful for history
   const { explorerState, setExplorerState } = props;

package/src/components/explorer/inner-explorer.tsx

@@ -830,6 +830,7 @@ export const InnerExplorer: React.FC<{
   return (
     <>
       <Dialog
+        title="Delete Rows"
         open={deleteDataConfirmationOpen}
         onClose={() => setDeleteDataConfirmationOpen(false)}
       >
@@ -900,6 +901,7 @@ export const InnerExplorer: React.FC<{
         ) : null}
       </Dialog>
       <Dialog
+        title="Edit Row"
         open={addItemDialogOpen}
         onClose={() => setAddItemDialogOpen(false)}
       >
@@ -913,6 +915,7 @@ export const InnerExplorer: React.FC<{
         ) : null}
       </Dialog>
       <Dialog
+        title="Edit Row"
         open={!!selectedEditableItem}
         onClose={() => setEditableRowId(null)}
       >
@@ -926,6 +929,7 @@ export const InnerExplorer: React.FC<{
         ) : null}
       </Dialog>
       <Dialog
+        title="Edit Namespace"
         stopFocusPropagation={true}
         open={Boolean(editNs)}
         onClose={() => setEditNs(null)}

package/src/components/explorer/view-settings.tsx

@@ -25,6 +25,7 @@ export const ViewSettings = ({
         onClick={() => setDialogOpen(true)}
       />
       <Dialog
+        title="Explorer View Settings"
         hideCloseButton={true}
         onClose={() => setDialogOpen(false)}
         open={dialogOpen}

package/src/components/ui.tsx

@@ -1,5 +1,6 @@
 'use client';
 import { Toaster, toast } from 'sonner';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { Editor, Monaco, OnMount } from '@monaco-editor/react';
 import type { ClassValue } from 'clsx';
 import clsx from 'clsx';
@@ -635,6 +636,7 @@ function DialogContent({
   className,
   children,
   showCloseButton = false,
+  title,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
@@ -654,6 +656,9 @@ function DialogContent({
           )}
           {...props}
         >
+          <VisuallyHidden>
+            <DialogTitle>{title}</DialogTitle>
+          </VisuallyHidden>
           {children}
           {showCloseButton && (
             <DialogPrimitive.Close
@@ -677,11 +682,13 @@ export function Dialog({
   children,
   onClose,
   className,
+  title,
   stopFocusPropagation = false,
   hideCloseButton = false,
 }: {
   open: boolean;
   children: React.ReactNode;
+  title: string;
   onClose: () => void;
   className?: string;
   stopFocusPropagation?: boolean;
@@ -697,6 +704,7 @@ export function Dialog({
       open={open}
     >
       <DialogContent
+        title={title}
         onFocusCapture={(e) => {
           if (stopFocusPropagation) {
             e.stopPropagation();
@@ -1533,6 +1541,7 @@ export function Fence({
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import { rosePineDawnTheme } from './rosePineDawnTheme';
 import { useShadowRoot, useShadowDarkMode } from './StyleMe';
+import { DialogTitle } from '@radix-ui/react-dialog';
 function Switch({
   className,
   ...props