@instantdb/components 0.22.92-experimental.sync-table-fixes.20350175943.1 → 0.22.92

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@instantdb/components",
   "private": false,
-  "version": "0.22.92-experimental.sync-table-fixes.20350175943.1",
+  "version": "0.22.92",
   "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.92-experimental.sync-table-fixes.20350175943.1",
-    "@instantdb/version": "0.22.92-experimental.sync-table-fixes.20350175943.1",
-    "@instantdb/react": "0.22.92-experimental.sync-table-fixes.20350175943.1",
-    "@instantdb/platform": "0.22.92-experimental.sync-table-fixes.20350175943.1",
-    "@instantdb/admin": "0.22.92-experimental.sync-table-fixes.20350175943.1"
+    "@instantdb/core": "0.22.92",
+    "@instantdb/admin": "0.22.92",
+    "@instantdb/platform": "0.22.92",
+    "@instantdb/react": "0.22.92",
+    "@instantdb/version": "0.22.92"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "vite build",
-    "dev": "vite build --watch --mode development",
+    "dev": "vite build --watch",
     "publish-package": "pnpm pack && npm publish *.tgz --access public",
     "dev:demo": "vite"
   }

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

@@ -246,7 +246,7 @@ export const TableCell = ({ cell }: { cell: Cell<any, unknown> }) => {
   return (
     <Tooltip>
       {' '}
-      <TooltipTrigger className="text-left" asChild>
+      <TooltipTrigger className="text-left">
         <div
           ref={(el) => {
             setNodeRef(el);

package/src/components/ui.tsx

@@ -560,7 +560,7 @@ export const IconButton = ({
 }: IconButtonProps) => {
   return (
     <Tooltip>
-      <TooltipTrigger asChild>
+      <TooltipTrigger>
         <button
           title={label}
           disabled={disabled}
@@ -616,55 +616,19 @@ function DialogPortal({
   return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
-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]);
-
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
   return (
-    <VisuallyHidden>
-      <DialogPrimitive.Title ref={titleRef}>{title}</DialogPrimitive.Title>
-    </VisuallyHidden>
+    <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}
+    />
   );
 }
 
@@ -676,7 +640,6 @@ function DialogContent({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
-  title: string;
 }) {
   const shadowRoot = useShadowRoot();
   const darkMode = useShadowDarkMode();
@@ -685,7 +648,6 @@ 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',
@@ -694,7 +656,9 @@ function DialogContent({
           )}
           {...props}
         >
-          <ShadowDialogTitle title={title} />
+          <VisuallyHidden>
+            <DialogTitle>{title}</DialogTitle>
+          </VisuallyHidden>
           {children}
           {showCloseButton && (
             <DialogPrimitive.Close
@@ -1577,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

package/vite.config.ts

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

package/dist/components/DialogContentPrimitive.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=DialogContentPrimitive.d.ts.map

package/dist/components/DialogContentPrimitive.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DialogContentPrimitive.d.ts","sourceRoot":"","sources":["../../src/components/DialogContentPrimitive.tsx"],"names":[],"mappings":""}