@instantdb/components 0.22.91-experimental.btnfix.20320360874.1 → 0.22.91-experimental.btnfix.20321339485.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@instantdb/components",
   "private": false,
-  "version": "0.22.91-experimental.btnfix.20320360874.1",
+  "version": "0.22.91-experimental.btnfix.20321339485.1",
   "type": "module",
   "description": "Instant's UI components",
   "homepage": "https://github.com/instantdb/instant/tree/main/client/packages/components",
@@ -93,16 +93,16 @@
     "swr": "^2.2.4",
     "tailwind-merge": "^2.2.1",
     "uuid": "^11.1.0",
-    "@instantdb/core": "0.22.91-experimental.btnfix.20320360874.1",
-    "@instantdb/platform": "0.22.91-experimental.btnfix.20320360874.1",
-    "@instantdb/admin": "0.22.91-experimental.btnfix.20320360874.1",
-    "@instantdb/version": "0.22.91-experimental.btnfix.20320360874.1",
-    "@instantdb/react": "0.22.91-experimental.btnfix.20320360874.1"
+    "@instantdb/admin": "0.22.91-experimental.btnfix.20321339485.1",
+    "@instantdb/core": "0.22.91-experimental.btnfix.20321339485.1",
+    "@instantdb/react": "0.22.91-experimental.btnfix.20321339485.1",
+    "@instantdb/platform": "0.22.91-experimental.btnfix.20321339485.1",
+    "@instantdb/version": "0.22.91-experimental.btnfix.20321339485.1"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "vite build",
-    "dev": "vite build --watch",
+    "dev": "vite build --watch --mode development",
     "publish-package": "pnpm pack && npm publish *.tgz --access public",
     "dev:demo": "vite"
   }

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

@@ -1212,7 +1212,7 @@ export const InnerExplorer: React.FC<{
           {numItemsSelected > 0 && (
             <div className="flex items-center gap-2 pl-4">
               <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
-                <DropdownMenuTrigger asChild>
+                <DropdownMenuTrigger>
                   <Button
                     onClick={() => {
                       setDropdownOpen(true);

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

@@ -246,7 +246,7 @@ export const TableCell = ({ cell }: { cell: Cell<any, unknown> }) => {
   return (
     <Tooltip>
       {' '}
-      <TooltipTrigger asChild>
+      <TooltipTrigger className="text-left" asChild>
         <div
           ref={(el) => {
             setNodeRef(el);
@@ -256,7 +256,7 @@ export const TableCell = ({ cell }: { cell: Cell<any, unknown> }) => {
             ...style,
             padding: disablePadding ? 0 : '0.5rem',
           }}
-          className={cn(`cursor-default truncate whitespace-nowrap text-left`)}
+          className={cn(`cursor-default truncate whitespace-nowrap`)}
           key={cell.id}
         >
           <span

package/src/components/ui.tsx

@@ -616,19 +616,55 @@ function DialogPortal({
   return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+const DialogOverlay = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    data-slot="dialog-overlay"
+    className={cn(
+      '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-black/50',
+      className,
+    )}
+    {...props}
+  />
+));
+
+/**
+ * Radix Dialog's TitleWarning uses document.getElementById to check for a title,
+ * but this doesn't work in Shadow DOM. This component creates a hidden element
+ * in the main document to satisfy the check, using a ref to get the actual ID
+ * that Radix assigns to the title.
+ */
+function ShadowDialogTitle({ title }: { title: string }) {
+  const shadowRoot = useShadowRoot();
+  const titleRef = React.useRef<HTMLHeadingElement>(null);
+
+  React.useEffect(() => {
+    // Only needed in Shadow DOM and in development
+    if (!shadowRoot || process.env.NODE_ENV === 'production') {
+      return;
+    }
+
+    const titleId = titleRef.current?.id;
+    if (!titleId) return;
+
+    // Create a hidden element in the main document to satisfy Radix's getElementById check
+    const hiddenTitle = document.createElement('span');
+    hiddenTitle.id = titleId;
+    hiddenTitle.style.display = 'none';
+    document.body.appendChild(hiddenTitle);
+
+    return () => {
+      hiddenTitle.remove();
+    };
+  }, [shadowRoot]);
+
   return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        '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-black/50',
-        className,
-      )}
-      {...props}
-    />
+    <VisuallyHidden>
+      <DialogPrimitive.Title ref={titleRef}>{title}</DialogPrimitive.Title>
+    </VisuallyHidden>
   );
 }
 
@@ -640,6 +676,7 @@ function DialogContent({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
+  title: string;
 }) {
   const shadowRoot = useShadowRoot();
   const darkMode = useShadowDarkMode();
@@ -648,6 +685,7 @@ function DialogContent({
     <DialogPortal container={shadowRoot} data-slot="dialog-portal">
       <DialogOverlay className={cn(darkMode ? 'dark' : '', 'overflow-y-auto')}>
         <DialogPrimitive.Content
+          aria-label={title}
           data-slot="dialog-content"
           className={cn(
             '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 relative top-[50%] left-[50%] z-50 grid max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto rounded-lg border border-gray-200 bg-white p-6 shadow-lg duration-200 sm:max-w-lg dark:border-neutral-700 dark:bg-neutral-800 dark:text-white',
@@ -656,9 +694,7 @@ function DialogContent({
           )}
           {...props}
         >
-          <VisuallyHidden>
-            <DialogTitle>{title}</DialogTitle>
-          </VisuallyHidden>
+          <ShadowDialogTitle title={title} />
           {children}
           {showCloseButton && (
             <DialogPrimitive.Close
@@ -703,12 +739,6 @@ export function Dialog({
       }}
       open={open}
     >
-      <VisuallyHidden>
-        <DialogTitle>{title}</DialogTitle>
-        <DialogPrimitive.DialogDescription>
-          {title}
-        </DialogPrimitive.DialogDescription>
-      </VisuallyHidden>
       <DialogContent
         title={title}
         onFocusCapture={(e) => {
@@ -1547,7 +1577,6 @@ 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

package/vite.config.ts

@@ -7,7 +7,7 @@ import dts from 'unplugin-dts/vite';
 
 import { peerDependencies, dependencies } from './package.json';
 
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   clearScreen: false,
   plugins: [react({}), tailwindcss({ optimize: true }), dts({})],
   resolve: {
@@ -17,6 +17,7 @@ export default defineConfig({
   },
   build: {
     outDir: 'dist',
+    minify: mode != 'development',
     target: 'esnext',
     emptyOutDir: false,
     cssCodeSplit: true,
@@ -46,4 +47,4 @@ export default defineConfig({
       },
     },
   },
-});
+}));