feat(injected-css): optionally export css for consumer to import

.gitignore

@@ -27,3 +27,7 @@ cypress/screenshots
 
 # So devs can maintain their own todo lists in the project
 TODO.md
+
+# For those using yalc to test publishes locally
+.yalc
+yalc.lock

.yarn/versions/d754df84.yml

@@ -0,0 +1,13 @@
+releases:
+  "@radix-ui/react-context-menu": patch
+  "@radix-ui/react-dropdown-menu": patch
+  "@radix-ui/react-hover-card": patch
+  "@radix-ui/react-menu": patch
+  "@radix-ui/react-menubar": patch
+  "@radix-ui/react-popover": patch
+  "@radix-ui/react-popper": minor
+  "@radix-ui/react-select": minor
+  "@radix-ui/react-tooltip": patch
+
+declined:
+  - primitives

build.mjs

@@ -1,6 +1,8 @@
 import { globSync } from 'glob';
 import * as esbuild from 'esbuild';
 import * as tsup from 'tsup';
+import { basename } from 'path';
+import { copyFileSync } from 'fs';
 
 async function build(path) {
   const file = `${path}/src/index.ts`;
@@ -43,6 +45,14 @@ async function build(path) {
     external: [/@radix-ui\/.+/],
   });
   console.log(`Built ${path}/dist/index.d.ts`);
+
+  const cssFiles = globSync(`${path}/src/**/*.css`);
+  cssFiles.forEach((cssFile) => {
+    const fileName = basename(cssFile);
+    const dest = `${dist}/${fileName}`;
+    copyFileSync(cssFile, dest);
+    console.log(`Copied ${cssFile} to ${dest}`);
+  });
 }
 
 globSync('packages/*/*').forEach(build);

packages/react/popper/package.json

@@ -12,6 +12,10 @@
         "types": "./dist/index.d.ts",
         "default": "./dist/index.js"
       }
+    },
+    "./styles": {
+      "import": "./dist/popperStyles.css",
+      "require": "./dist/popperStyles.css"
     }
   },
   "source": "./src/index.ts",

packages/react/popper/src/Popper.tsx

@@ -123,6 +123,7 @@ interface PopperContentProps extends PrimitiveDivProps {
   hideWhenDetached?: boolean;
   updatePositionStrategy?: 'optimized' | 'always';
   onPlaced?: () => void;
+  skipStyleInjection?: boolean;
 }
 
 const PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>(
@@ -141,6 +142,7 @@ const PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>
       hideWhenDetached = false,
       updatePositionStrategy = 'optimized',
       onPlaced,
+      skipStyleInjection,
       ...contentProps
     } = props;
 
@@ -225,32 +227,82 @@ const PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>
     const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
 
     const [contentZIndex, setContentZIndex] = React.useState<string>();
+    const updateStyleVariables = React.useCallback(() => {
+      if (refs.floating.current) {
+        if (content) {
+          if (skipStyleInjection) {
+            refs.floating.current.style.zIndex = window.getComputedStyle(content).zIndex;
+          } else {
+            setContentZIndex(window.getComputedStyle(content).zIndex);
+          }
+        }
+
+        /* if the PopperContent hasn't been placed yet (not all measurements done)
+         * we prevent animations so user's animation don't kick in too early referring wrong sides
+         */
+        refs.floating.current.style.setProperty(
+          '--popper-content-animation',
+          isPositioned ? 'none' : 'unset'
+        );
+        /* Keep off page when measuring */
+        refs.floating.current.style.transform = isPositioned
+          ? (floatingStyles.transform as string)
+          : 'translate(0, -200%)';
+
+        refs.floating.current.style.setProperty(
+          '--radix-popper-transform-origin',
+          `${middlewareData.transformOrigin?.x} ${middlewareData.transformOrigin?.y}`
+        );
+
+        /* hide the content if using the hid emiddleware and should be hidden
+         * set visibility to hidden and disable pointer events so the UI behaves
+         * as if the PopperContent isn't there at all
+         */
+        refs.floating.current.style.visibility = middlewareData.hide?.referenceHidden
+          ? 'hidden'
+          : 'unset';
+        refs.floating.current.style.pointerEvents = middlewareData.hide?.referenceHidden
+          ? 'none'
+          : 'unset';
+
+        refs.floating.current.style.position = floatingStyles.position as string;
+        refs.floating.current.style.left = floatingStyles.left as string;
+        refs.floating.current.style.top = floatingStyles.top as string;
+      }
+    }, [content, floatingStyles, isPositioned, middlewareData, refs.floating, skipStyleInjection]);
+
     useLayoutEffect(() => {
-      if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
-    }, [content]);
+      updateStyleVariables();
+    }, [updateStyleVariables]);
+
+    debugger;
 
     return (
       <div
         ref={refs.setFloating}
         data-radix-popper-content-wrapper=""
-        style={{
-          ...floatingStyles,
-          transform: isPositioned ? floatingStyles.transform : 'translate(0, -200%)', // keep off the page when measuring
-          minWidth: 'max-content',
-          zIndex: contentZIndex,
-          ['--radix-popper-transform-origin' as any]: [
-            middlewareData.transformOrigin?.x,
-            middlewareData.transformOrigin?.y,
-          ].join(' '),
-
-          // hide the content if using the hide middleware and should be hidden
-          // set visibility to hidden and disable pointer events so the UI behaves
-          // as if the PopperContent isn't there at all
-          ...(middlewareData.hide?.referenceHidden && {
-            visibility: 'hidden',
-            pointerEvents: 'none',
-          }),
-        }}
+        style={
+          skipStyleInjection
+            ? undefined
+            : {
+                ...floatingStyles,
+                transform: isPositioned ? floatingStyles.transform : 'translate(0, -200%)', // keep off the page when measuring
+                minWidth: 'max-content',
+                zIndex: contentZIndex,
+                ['--radix-popper-transform-origin' as any]: [
+                  middlewareData.transformOrigin?.x,
+                  middlewareData.transformOrigin?.y,
+                ].join(' '),
+
+                // hide the content if using the hide middleware and should be hidden
+                // set visibility to hidden and disable pointer events so the UI behaves
+                // as if the PopperContent isn't there at all
+                ...(middlewareData.hide?.referenceHidden && {
+                  visibility: 'hidden',
+                  pointerEvents: 'none',
+                }),
+              }
+        }
         // Floating UI interally calculates logical alignment based the `dir` attribute on
         // the reference/floating node, we must add this attribute here to ensure
         // this is calculated when portalled as well as inline.
@@ -265,16 +317,21 @@ const PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>
           shouldHideArrow={cannotCenterArrow}
         >
           <Primitive.div
+            data-radix-popper-content=""
             data-side={placedSide}
             data-align={placedAlign}
             {...contentProps}
             ref={composedRefs}
-            style={{
-              ...contentProps.style,
-              // if the PopperContent hasn't been placed yet (not all measurements done)
-              // we prevent animations so that users's animation don't kick in too early referring wrong sides
-              animation: !isPositioned ? 'none' : undefined,
-            }}
+            style={
+              skipStyleInjection
+                ? undefined
+                : {
+                    ...contentProps.style,
+                    // if the PopperContent hasn't been placed yet (not all measurements done)
+                    // we prevent animations so that users's animation don't kick in too early referring wrong sides
+                    animation: !isPositioned ? 'none' : undefined,
+                  }
+            }
           />
         </PopperContentProvider>
       </div>

packages/react/popper/src/popperStyles.css

@@ -0,0 +1,11 @@
+[data-radix-popper-content-wrapper] {
+  --popper-content-wrapper-z-index: 0;
+  --popper-content-animation: unset;
+
+  min-width: max-content;
+  z-index: var(--popper-content-wrapper-z-index);
+}
+
+[data-radix-popper-content] {
+  animation: var(--popper-content-animation);
+}

packages/react/select/package.json

@@ -12,6 +12,10 @@
         "types": "./dist/index.d.ts",
         "default": "./dist/index.js"
       }
+    },
+    "./styles": {
+      "import": "./dist/selectStyles.css",
+      "require": "./dist/selectStyles.css"
     }
   },
   "source": "./src/index.ts",