@dust-tt/sparkle 0.2.576 → 0.2.577-rc-1

package/src/components/Dialog.tsx

@@ -78,6 +78,7 @@ interface DialogContentProps
   height?: DialogHeightType;
   trapFocusScope?: boolean;
   isAlertDialog?: boolean;
+  preventAutoFocusOnClose?: boolean;
 }
 
 const DialogContent = React.forwardRef<
@@ -92,26 +93,43 @@ const DialogContent = React.forwardRef<
       height,
       trapFocusScope,
       isAlertDialog,
+      preventAutoFocusOnClose = true,
+      onCloseAutoFocus,
       ...props
     },
     ref
-  ) => (
-    <DialogPortal>
-      <DialogOverlay />
-      <FocusScope trapped={trapFocusScope} asChild>
-        <DialogPrimitive.Content
-          ref={ref}
-          className={cn(dialogVariants({ size, height }), className)}
-          onInteractOutside={
-            isAlertDialog ? (e) => e.preventDefault() : props.onInteractOutside
-          }
-          {...props}
-        >
-          {children}
-        </DialogPrimitive.Content>
-      </FocusScope>
-    </DialogPortal>
-  )
+  ) => {
+    const handleCloseAutoFocus = React.useCallback(
+      (event: Event) => {
+        if (preventAutoFocusOnClose) {
+          event.preventDefault();
+        }
+        onCloseAutoFocus?.(event);
+      },
+      [preventAutoFocusOnClose, onCloseAutoFocus]
+    );
+
+    return (
+      <DialogPortal>
+        <DialogOverlay />
+        <FocusScope trapped={trapFocusScope} asChild>
+          <DialogPrimitive.Content
+            ref={ref}
+            className={cn(dialogVariants({ size, height }), className)}
+            onInteractOutside={
+              isAlertDialog
+                ? (e) => e.preventDefault()
+                : props.onInteractOutside
+            }
+            onCloseAutoFocus={handleCloseAutoFocus}
+            {...props}
+          >
+            {children}
+          </DialogPrimitive.Content>
+        </FocusScope>
+      </DialogPortal>
+    );
+  }
 );
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 

package/src/components/Dropdown.tsx

@@ -244,7 +244,7 @@ interface DropdownMenuContentProps
   mountPortal?: boolean;
   mountPortalContainer?: HTMLElement;
   dropdownHeaders?: React.ReactNode;
-  onOpenAutoFocus?: (e: React.FocusEvent<HTMLDivElement>) => void;
+  preventAutoFocusOnClose?: boolean;
 }
 
 const DropdownMenuContent = React.forwardRef<
@@ -258,11 +258,23 @@ const DropdownMenuContent = React.forwardRef<
       mountPortal = true,
       mountPortalContainer,
       dropdownHeaders,
+      preventAutoFocusOnClose = true,
+      onCloseAutoFocus,
       children,
       ...props
     },
     ref
   ) => {
+    const handleCloseAutoFocus = React.useCallback(
+      (event: Event) => {
+        if (preventAutoFocusOnClose) {
+          event.preventDefault();
+        }
+        onCloseAutoFocus?.(event);
+      },
+      [preventAutoFocusOnClose, onCloseAutoFocus]
+    );
+
     const content = (
       <DropdownMenuPrimitive.Content
         ref={ref}
@@ -273,6 +285,7 @@ const DropdownMenuContent = React.forwardRef<
           dropdownHeaders && "s-h-80 xs:s-h-96", // We use dropdownHeaders for putting search bar, so we can set the height for the container
           className
         )}
+        onCloseAutoFocus={handleCloseAutoFocus}
         {...props}
       >
         <div className="s-sticky s-top-0 s-bg-background dark:s-bg-background-night">

package/src/components/MultiPageDialog.tsx

@@ -85,6 +85,7 @@ interface MultiPageDialogProps {
   height?: React.ComponentProps<typeof DialogContent>["height"];
   trapFocusScope?: boolean;
   isAlertDialog?: boolean;
+  preventAutoFocusOnClose?: boolean;
   showNavigation?: boolean;
   showHeaderNavigation?: boolean;
   className?: string;
@@ -113,6 +114,7 @@ const MultiPageDialogContent = React.forwardRef<
       height,
       trapFocusScope,
       isAlertDialog,
+      preventAutoFocusOnClose,
       showNavigation = true,
       showHeaderNavigation = true,
       className,
@@ -179,6 +181,7 @@ const MultiPageDialogContent = React.forwardRef<
         height={height}
         trapFocusScope={trapFocusScope}
         isAlertDialog={isAlertDialog}
+        preventAutoFocusOnClose={preventAutoFocusOnClose}
         className={className}
         {...props}
       >

package/src/components/Popover.tsx

@@ -14,6 +14,7 @@ export interface PopoverContentProps
   fullWidth?: boolean;
   mountPortal?: boolean;
   mountPortalContainer?: HTMLElement;
+  preventAutoFocusOnClose?: boolean;
 }
 
 const PopoverContent = React.forwardRef<
@@ -28,10 +29,21 @@ const PopoverContent = React.forwardRef<
       mountPortal = true,
       mountPortalContainer,
       fullWidth = false,
+      preventAutoFocusOnClose = true,
+      onCloseAutoFocus,
       ...props
     },
     ref
   ) => {
+    const handleCloseAutoFocus = React.useCallback(
+      (event: Event) => {
+        if (preventAutoFocusOnClose) {
+          event.preventDefault();
+        }
+        onCloseAutoFocus?.(event);
+      },
+      [preventAutoFocusOnClose, onCloseAutoFocus]
+    );
     const content = (
       <PopoverPrimitive.Content
         ref={ref}
@@ -51,6 +63,7 @@ const PopoverContent = React.forwardRef<
           fullWidth ? "s-grow" : "s-w-72 s-p-4",
           className
         )}
+        onCloseAutoFocus={handleCloseAutoFocus}
         {...props}
       />
     );

package/src/components/SearchDropdownMenu.tsx

@@ -79,9 +79,6 @@ export function SearchDropdownMenu({
         />
       </DropdownMenuTrigger>
       <DropdownMenuContent
-        onOpenAutoFocus={(e) => {
-          e.preventDefault();
-        }}
         side="bottom"
         align="start"
         className="s-w-[--radix-popper-anchor-width]"

package/src/components/Sheet.tsx

@@ -87,29 +87,57 @@ interface SheetContentProps
   size?: SheetSizeType;
   trapFocusScope?: boolean;
   side?: SheetSideType;
+  preventAutoFocusOnClose?: boolean;
 }
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
->(({ className, children, size, side, trapFocusScope, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <FocusScope trapped={trapFocusScope} asChild>
-      <SheetPrimitive.Content
-        ref={ref}
-        className={cn(
-          sheetVariants({ size, side }),
-          className,
-          "s-sheet s-text-foreground dark:s-text-foreground-night"
-        )}
-        {...props}
-      >
-        {children}
-      </SheetPrimitive.Content>
-    </FocusScope>
-  </SheetPortal>
-));
+>(
+  (
+    {
+      className,
+      children,
+      size,
+      side,
+      trapFocusScope,
+      preventAutoFocusOnClose = true,
+      onCloseAutoFocus,
+      ...props
+    },
+    ref
+  ) => {
+    const handleCloseAutoFocus = React.useCallback(
+      (event: Event) => {
+        if (preventAutoFocusOnClose) {
+          event.preventDefault();
+        }
+        onCloseAutoFocus?.(event);
+      },
+      [preventAutoFocusOnClose, onCloseAutoFocus]
+    );
+
+    return (
+      <SheetPortal>
+        <SheetOverlay />
+        <FocusScope trapped={trapFocusScope} asChild>
+          <SheetPrimitive.Content
+            ref={ref}
+            className={cn(
+              sheetVariants({ size, side }),
+              className,
+              "s-sheet s-text-foreground dark:s-text-foreground-night"
+            )}
+            onCloseAutoFocus={handleCloseAutoFocus}
+            {...props}
+          >
+            {children}
+          </SheetPrimitive.Content>
+        </FocusScope>
+      </SheetPortal>
+    );
+  }
+);
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 interface SheetHeaderProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/stories/Dropdown.stories.tsx

@@ -309,7 +309,12 @@ function ModelsDropdownDemo() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button label={selectedModel} variant="outline" size="sm" />
+        <Button
+          label={selectedModel}
+          variant="outline"
+          size="sm"
+          tooltip="Test"
+        />
       </DropdownMenuTrigger>
       <DropdownMenuContent>
         <DropdownMenuLabel label="Best performing models" />