[radix-ui] pass className in to the wrapper div

Change-Id: I5d69931be59a9305201f327d0f8f95da94cbb3ba GitOrigin-RevId: 82138486c9283ced62e208400ea43158b73edee0
theashishmaurya · Apr 30, 2024 · 6dddf17 · 6dddf17
1 parent 617380d
commit 6dddf17
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -55,8 +55,8 @@
     "lerna": "^7.4.2",
     "nx": "^16",
     "prettier": "2.8.8",
-    "tsconfig-paths": "^4.2.0",
     "ts-node": "^10.9.2",
+    "tsconfig-paths": "^4.2.0",
     "typescript": "5.2.2"
   },
   "workspaces": [

diff --git a/plasmicpkgs/radix-ui/package.json b/plasmicpkgs/radix-ui/package.json
@@ -45,12 +45,12 @@
   },
   "dependencies": {
     "@radix-ui/react-context-menu": "^2.1.4",
-    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
-    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-popper": "^1.1.3",
     "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-tooltip": "^1.0.6",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "lucide-react": "^0.279.0",

diff --git a/plasmicpkgs/radix-ui/src/dialog.tsx b/plasmicpkgs/radix-ui/src/dialog.tsx
@@ -168,6 +168,7 @@ export const Dialog = React.forwardRef<
 >(
   (
     {
+      className,
       open,
       onOpenChange,
       modal,
@@ -188,7 +189,7 @@ export const Dialog = React.forwardRef<
       defaultOpen={defaultOpen}
     >
       <DialogPrimitive.Trigger asChild>
-        {wrapFragmentInDiv(triggerSlot)}
+        {wrapFragmentInDiv(triggerSlot, className)}
       </DialogPrimitive.Trigger>
       {/*
       The main benefit of containing by default is that users can apply layout to position the dialog content easily, e.g. centered on the screen.

diff --git a/plasmicpkgs/radix-ui/src/popover.tsx b/plasmicpkgs/radix-ui/src/popover.tsx
@@ -55,11 +55,11 @@ export function Popover({
         >
           {trigger ? (
             <PopoverPrimitive.Trigger asChild>
-              {wrapFragmentInDiv(children)}
+              {wrapFragmentInDiv(children, className)}
             </PopoverPrimitive.Trigger>
           ) : (
             <PopoverPrimitive.Anchor asChild>
-              {wrapFragmentInDiv(children)}
+              {wrapFragmentInDiv(children, className)}
             </PopoverPrimitive.Anchor>
           )}
           <PopoverPrimitive.Portal>
@@ -74,7 +74,6 @@ export function Popover({
                     )
                   : "",
                 dynClass ? dynClass : "",
-                className,
                 themeResetClass
               )}
               sideOffset={sideOffset}

diff --git a/plasmicpkgs/radix-ui/src/tooltip.tsx b/plasmicpkgs/radix-ui/src/tooltip.tsx
@@ -61,7 +61,7 @@ export const Tooltip = React.forwardRef<
               }}
             >
               <TooltipPrimitive.Trigger asChild>
-                {wrapFragmentInDiv(children)}
+                {wrapFragmentInDiv(children, className)}
               </TooltipPrimitive.Trigger>
               <TooltipPrimitive.Content
                 ref={ref}
@@ -76,7 +76,6 @@ export const Tooltip = React.forwardRef<
                       )
                     : "",
                   dynClass ? dynClass : "",
-                  className,
                   themeResetClass
                 )}
                 {...rest}
@@ -113,7 +112,7 @@ export function registerTooltip(PLASMIC?: Registerable) {
         },
         delayDuration: {
           type: "number",
-          defaultValueHint: 700
+          defaultValueHint: 700,
         },
       },
       overlay: {

diff --git a/plasmicpkgs/radix-ui/src/util.tsx b/plasmicpkgs/radix-ui/src/util.tsx
@@ -477,9 +477,18 @@ export type PopoverExtraProps = AnimatedProps & {
   slideIn?: boolean;
 };
 
-export function wrapFragmentInDiv(node: React.ReactNode): React.ReactNode {
+export function wrapFragmentInDiv(
+  node: React.ReactNode,
+  className?: string
+): React.ReactNode {
   if (React.isValidElement(node) && node.type === React.Fragment) {
-    const props = { ...omit(node.props, ["children"]), key: node.key };
+    const props: { [key: string]: string | undefined | null } = {
+      ...omit(node.props, ["children"]),
+      key: node.key,
+    };
+    props["className"] = props["className"]
+      ? props["className"] + className
+      : className;
     return <div {...props}>{node.props.children}</div>;
   }
   return node;

diff --git a/yarn.lock b/yarn.lock
@@ -6727,7 +6727,7 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@radix-ui/react-dialog@^1.0.4":
+"@radix-ui/react-dialog@^1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz#71657b1b116de6c7a0b03242d7d43e01062c7300"
   integrity sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==
@@ -6853,7 +6853,7 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.5.5"
 
-"@radix-ui/react-popover@^1.0.6":
+"@radix-ui/react-popover@^1.0.7":
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.7.tgz#23eb7e3327330cb75ec7b4092d685398c1654e3c"
   integrity sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==
@@ -7040,7 +7040,7 @@
     "@radix-ui/react-separator" "1.0.3"
     "@radix-ui/react-toggle-group" "1.0.4"
 
-"@radix-ui/react-tooltip@^1.0.6":
+"@radix-ui/react-tooltip@^1.0.7":
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz#8f55070f852e7e7450cc1d9210b793d2e5a7686e"
   integrity sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==