@noya-app/noya-designsystem 0.1.77 → 0.1.78

package/src/components/Dialog.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import { Dialog as DialogPrimitive, VisuallyHidden } from "radix-ui";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 import React, {
-  ComponentProps,
   ForwardedRef,
   forwardRef,
   ReactNode,
@@ -12,24 +11,25 @@ import React, {
 import { cx } from "../utils/classNames";
 import { IconButton } from "./IconButton";
 import { Spacer } from "./Spacer";
+import { VisuallyHidden } from "./VisuallyHidden";
 
-const StyledOverlay = forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+const StyledBackdrop = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
+  <DialogPrimitive.Backdrop
     ref={ref}
     className={cx(`n-fixed n-inset-0 n-bg-[rgba(0,0,0,0.5)]`, className)}
     {...props}
   />
 ));
 
-const StyledContent = forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+const StyledPopup = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, children, ...props }, ref) => {
   return (
-    <DialogPrimitive.Content
+    <DialogPrimitive.Popup
       ref={ref}
       className={cx(
         `n-fixed n-top-1/2 n-left-1/2 -n-translate-x-1/2 -n-translate-y-1/2 n-w-[90vw] n-max-w-[550px] n-max-h-[85vh] n-p-dialog-padding n-rounded-[2px] n-font-sans n-text-heading5 n-font-normal n-leading-[19px] n-text-text-muted n-bg-popover-background n-pointer-events-all n-z-[1000] focus:n-outline-none n-shadow-dialog-shadow n-flex n-flex-col`,
@@ -38,13 +38,13 @@ const StyledContent = forwardRef<
       {...props}
     >
       {children}
-    </DialogPrimitive.Content>
+    </DialogPrimitive.Popup>
   );
 });
 
 const StyledTitle = forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
@@ -57,8 +57,8 @@ const StyledTitle = forwardRef<
 ));
 
 const StyledDescription = forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
@@ -78,12 +78,9 @@ interface Props {
   title?: ReactNode;
   description?: ReactNode;
   children?: ReactNode;
-  style?: ComponentProps<typeof StyledContent>["style"];
-  open: ComponentProps<typeof DialogPrimitive.Root>["open"];
-  onOpenChange?: ComponentProps<typeof DialogPrimitive.Root>["onOpenChange"];
-  onOpenAutoFocus?: ComponentProps<
-    typeof DialogPrimitive.Content
-  >["onOpenAutoFocus"];
+  style?: React.CSSProperties;
+  open: boolean;
+  onOpenChange?: (open: boolean) => void;
   closeOnInteractOutside?: boolean;
   showCloseButton?: boolean;
   className?: string;
@@ -97,8 +94,7 @@ export const Dialog = forwardRef(function Dialog(
     open,
     style,
     onOpenChange,
-    onOpenAutoFocus,
-    closeOnInteractOutside = true,
+    closeOnInteractOutside: _closeOnInteractOutside = true,
     className,
     showCloseButton = true,
   }: Props,
@@ -113,52 +109,59 @@ export const Dialog = forwardRef(function Dialog(
     },
   }));
 
+  const handleOpenChange = (newOpen: boolean) => {
+    onOpenChange?.(newOpen);
+  };
+
   return (
-    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
-      <StyledOverlay />
-      <StyledContent
-        ref={contentRef}
-        onOpenAutoFocus={onOpenAutoFocus}
-        style={style}
-        className={className}
-        aria-describedby={typeof description === "string" ? description : ""}
-        {...(closeOnInteractOutside === false && {
-          onPointerDownOutside: (event) => event.preventDefault(),
-          onInteractOutside: (event) => event.preventDefault(),
-        })}
-      >
-        {showCloseButton && (
-          <DialogPrimitive.Close asChild>
-            <IconButton
-              iconName="Cross1Icon"
-              className="n-z-[1]"
-              style={{
-                position: "absolute",
-                top: "var(--n-dialog-padding)",
-                right: "var(--n-dialog-padding)",
-              }}
+    <DialogPrimitive.Root
+      open={open}
+      onOpenChange={handleOpenChange}
+      modal={true}
+    >
+      <DialogPrimitive.Portal>
+        <StyledBackdrop />
+        <StyledPopup
+          ref={contentRef}
+          style={style}
+          className={className}
+          aria-describedby={typeof description === "string" ? description : ""}
+        >
+          {showCloseButton && (
+            <DialogPrimitive.Close
+              render={
+                <IconButton
+                  iconName="Cross1Icon"
+                  className="n-z-[1]"
+                  style={{
+                    position: "absolute",
+                    top: "var(--n-dialog-padding)",
+                    right: "var(--n-dialog-padding)",
+                  }}
+                />
+              }
             />
-          </DialogPrimitive.Close>
-        )}
-        {title && (
-          <>
-            <StyledTitle>{title}</StyledTitle>
-            <Spacer.Vertical size={description ? 10 : 20} />
-          </>
-        )}
-        {!title && (
-          <VisuallyHidden.Root>
-            <StyledTitle>Dialog</StyledTitle>
-          </VisuallyHidden.Root>
-        )}
-        {description && (
-          <>
-            <StyledDescription>{description}</StyledDescription>
-            <Spacer.Vertical size={20} />
-          </>
-        )}
-        {children}
-      </StyledContent>
+          )}
+          {title && (
+            <>
+              <StyledTitle>{title}</StyledTitle>
+              <Spacer.Vertical size={description ? 10 : 20} />
+            </>
+          )}
+          {!title && (
+            <VisuallyHidden>
+              <StyledTitle>Dialog</StyledTitle>
+            </VisuallyHidden>
+          )}
+          {description && (
+            <>
+              <StyledDescription>{description}</StyledDescription>
+              <Spacer.Vertical size={20} />
+            </>
+          )}
+          {children}
+        </StyledPopup>
+      </DialogPrimitive.Portal>
     </DialogPrimitive.Root>
   );
 });

package/src/components/Drawer.tsx

@@ -1,10 +1,12 @@
 "use client";
 
+import { Dialog } from "@base-ui/react/dialog";
 import { useControlledOrUncontrolled } from "@noya-app/react-utils";
-import { Dialog } from "radix-ui";
 import * as React from "react";
 import { useImperativeHandle } from "react";
+import { useTriggerToggle } from "../hooks/useTriggerToggle";
 import { cx } from "../utils/classNames";
+import { mergePropsWithEventComposition } from "../utils/mergeProps";
 import { SidebarRef } from "./workspace/types";
 
 export type DrawerProps = {
@@ -22,6 +24,7 @@ export type DrawerProps = {
   side?: "left" | "right";
   portalled?: boolean;
   portalContainer?: HTMLElement | null;
+  modal?: boolean;
 };
 
 export const Drawer = React.memo(
@@ -41,6 +44,7 @@ export const Drawer = React.memo(
       portalContainer,
       overlayClassName,
       overlayStyle,
+      modal = true,
     }: DrawerProps,
     forwardedRef: React.ForwardedRef<SidebarRef>
   ) {
@@ -50,21 +54,30 @@ export const Drawer = React.memo(
       onChange: onOpenChange,
     });
 
-    useImperativeHandle(forwardedRef, () => ({
-      expand: () => {
-        setInternalOpen(true);
-      },
-      collapse: () => {
-        setInternalOpen(false);
-      },
-      isExpanded: () => {
-        return internalOpen;
-      },
-    }));
+    const { setAnchorElement, popupRef, handleOpenChange } = useTriggerToggle(
+      internalOpen,
+      setInternalOpen
+    );
+
+    useImperativeHandle(
+      forwardedRef,
+      () => ({
+        expand: () => {
+          handleOpenChange(true);
+        },
+        collapse: () => {
+          handleOpenChange(false);
+        },
+        isExpanded: () => {
+          return internalOpen;
+        },
+      }),
+      [internalOpen, handleOpenChange]
+    );
 
     const inner = (
       <>
-        <Dialog.Overlay
+        <Dialog.Backdrop
           className={cx(
             "n-inset-0 n-bg-black/50",
             positioning === "absolute" ? "n-absolute" : "n-fixed",
@@ -72,7 +85,8 @@ export const Drawer = React.memo(
           )}
           style={overlayStyle}
         />
-        <Dialog.Content
+        <Dialog.Popup
+          ref={popupRef}
           id={id}
           style={style}
           className={cx(
@@ -84,7 +98,7 @@ export const Drawer = React.memo(
         >
           {title && <Dialog.Title>{title}</Dialog.Title>}
           {children}
-        </Dialog.Content>
+        </Dialog.Popup>
       </>
     );
 
@@ -92,9 +106,34 @@ export const Drawer = React.memo(
       <Dialog.Root
         key="dialog"
         open={internalOpen}
-        onOpenChange={setInternalOpen}
+        onOpenChange={handleOpenChange}
+        modal={modal}
       >
-        <Dialog.Trigger key="trigger">{trigger}</Dialog.Trigger>
+        <Dialog.Trigger
+          key="trigger"
+          render={(triggerProps) => {
+            const element = React.isValidElement(trigger) ? (
+              trigger
+            ) : (
+              <span>{trigger}</span>
+            );
+            const childProps = element.props as Record<string, unknown>;
+            const mergedProps = mergePropsWithEventComposition(
+              triggerProps as Record<string, unknown>,
+              childProps
+            );
+
+            // Track anchor element for click detection
+            mergedProps.ref = (node: Element | null) => {
+              if (node) setAnchorElement(node);
+            };
+
+            return React.cloneElement(
+              element as React.ReactElement<any>,
+              mergedProps
+            );
+          }}
+        />
         {portalled ? (
           <Dialog.Portal container={portalContainer}>{inner}</Dialog.Portal>
         ) : (