V0.2.1 (#3)

* replace default styles from css module with inline css styles (better to ship)

* replace default styles from css module with inline css styles (better to ship)

* bump

* v0.2.1

Author: Eliav2

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.2.1
+
+some polishing, and build changes:
+
+- ship default styles as css-in-js instead of css file (better for shipping)
+- package.json is now type:"module".
+
 ## 0.2.0
 
 - dropped `minVisibleItems` prop in favor of simplicity (same effect can achieved with reversed flex direction and reversing the items array)

demo/package.json

@@ -47,8 +47,6 @@
     "tslib": "^2.8.1",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.39.1",
-    "vite": "^7.1.2",
-    "vite-plugin-prerender": "^1.0.8",
-    "vite-prerender-plugin": "^0.5.12"
+    "vite": "^7.1.2"
   }
 }

demo/src/App.css

@@ -337,3 +337,22 @@ footer {
 .code-preview-content {
   background: white;
 }
+
+.demo-button {
+  background: none;
+  border: 1.5px solid #bfc9db;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  color: #495057;
+  transition: color 0.2s;
+  border-radius: 4px;
+  padding: 8px;
+  border: 1px solid #ccc;
+}
+
+.demo-button:hover {
+  color: #007bff;
+  border-color: #007bff;
+  box-shadow: 0 4px 16px 0 rgba(37, 99, 235, 0.08);
+}

demo/src/components/RadixVirtualizedOverflowList.tsx

@@ -116,25 +116,21 @@ const VirtualizedDropdown = React.forwardRef<
             setScrollElement(node?.querySelector(".rt-ScrollAreaViewport") as HTMLDivElement | null);
           }}
           style={{
-            minWidth: "200px",
-            maxWidth: "400px",
             maxHeight: "300px",
             ...dropdownStyle,
           }}
         >
           <>
             {enableSearch && (
-              <div style={{ marginBottom: "8px" }}>
+              <div style={{ marginBottom: "8px", position: "sticky", top: 0, backgroundColor: "white" }}>
                 <input
+                  autoFocus
                   type="text"
                   placeholder={searchPlaceholder}
                   value={searchTerm}
                   onChange={(e) => setSearchTerm(e.target.value)}
                   style={{
-                    width: "100%",
                     padding: "6px 8px",
-                    borderRadius: "4px",
-                    fontSize: "14px",
                   }}
                 />
               </div>
@@ -150,7 +146,6 @@ const VirtualizedDropdown = React.forwardRef<
                   gap: "8px",
                   alignItems: "flex-start",
                   position: "relative",
-                  border: "1px solid #ccc",
                   height: `${virtualizer.getTotalSize()}px`,
                   minWidth: `${containerWidth}px`,
                 }}

demo/vite.config.ts

@@ -1,11 +1,11 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import { fileURLToPath, URL } from "node:url";
 import vike from "vike/plugin";
 
 export default defineConfig(() => {
   const appMode = process.env.VITE_APP_MODE || ("spa" as "spa" | "ssr");
   console.log(`VITE_APP_MODE is "${appMode}"`);
+  const isProduction = process.env.NODE_ENV === "production";
 
   return {
     plugins: [react(), vike()],
@@ -15,12 +15,6 @@ export default defineConfig(() => {
       // Handle CommonJS modules
       // external: ["react-copy-to-clipboard"],
     },
-    base: "/react-responsive-overflow-list/",
-    resolve: {
-      // trick to avoid needing to build-watch the library when developing the demo
-      alias: {
-        "react-responsive-overflow-list": fileURLToPath(new URL("../src/index.ts", import.meta.url)),
-      },
-    },
+    base: isProduction ? "/react-responsive-overflow-list/" : "/",
   };
 });

package.json

@@ -1,15 +1,16 @@
 {
   "name": "react-responsive-overflow-list",
-  "version": "0.2.0",
+  "version": "0.2.1",
+  "type": "module",
   "description": "A responsive React component that shows as many items as can fit within constraints, hiding overflow items behind a configurable overflow renderer",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "module": "dist/index.js",
+  "main": "dist/index.cjs",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
   },
   "files": [