@ladder-ui/select 0.2.0 → 0.3.0

package/dist/index.js

@@ -5,6 +5,11 @@ var react = require('react');
 var reactDom = require('react-dom');
 var concatClassNames = require('@ladder-ui/core/concatClassNames');
 
+// useLayoutEffect runs synchronously after DOM mutations but before the browser
+// paints. This eliminates the double-paint flash that useEffect causes for
+// position-critical work like dropdown placement.
+// Falls back to useEffect in SSR environments (no DOM = no layout to measure).
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
 // ─── Inline SVG icons ────────────────────────────────────────────────────────
 function ChevronDownIcon({ className }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: className, children: jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" }) }));
@@ -150,8 +155,8 @@ function SelectContent({ ref, className, children, position = "item-aligned", })
     //   Pass 2 — compute correct position, set isPositioned=true → visibility:visible.
     const [isPositioned, setIsPositioned] = react.useState(false);
     const [coords, setCoords] = react.useState({ top: 0, left: 0, width: 0 });
-    // Pass 1→2: measure and position after first render
-    react.useEffect(() => {
+    // Pass 1→2: measure and position synchronously before browser paint
+    useIsomorphicLayoutEffect(() => {
         if (!ctx.open || !contentRef.current || !ctx.triggerRef.current)
             return;
         const triggerRect = ctx.triggerRef.current.getBoundingClientRect();

package/dist/index.mjs

@@ -1,8 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useState, useId, useRef, useCallback, use, useEffect, Children, isValidElement } from 'react';
+import { createContext, useState, useId, useRef, useCallback, use, useEffect, Children, isValidElement, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import concatClassNames from '@ladder-ui/core/concatClassNames';
 
+// useLayoutEffect runs synchronously after DOM mutations but before the browser
+// paints. This eliminates the double-paint flash that useEffect causes for
+// position-critical work like dropdown placement.
+// Falls back to useEffect in SSR environments (no DOM = no layout to measure).
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 // ─── Inline SVG icons ────────────────────────────────────────────────────────
 function ChevronDownIcon({ className }) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: className, children: jsx("path", { d: "m6 9 6 6 6-6" }) }));
@@ -148,8 +153,8 @@ function SelectContent({ ref, className, children, position = "item-aligned", })
     //   Pass 2 — compute correct position, set isPositioned=true → visibility:visible.
     const [isPositioned, setIsPositioned] = useState(false);
     const [coords, setCoords] = useState({ top: 0, left: 0, width: 0 });
-    // Pass 1→2: measure and position after first render
-    useEffect(() => {
+    // Pass 1→2: measure and position synchronously before browser paint
+    useIsomorphicLayoutEffect(() => {
         if (!ctx.open || !contentRef.current || !ctx.triggerRef.current)
             return;
         const triggerRect = ctx.triggerRef.current.getBoundingClientRect();

package/dist/select.css

@@ -91,6 +91,8 @@
     font-family: var(--lui-font-family);
   }
   .lui-select-item {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 36px;
     position: relative;
     display: flex;
     align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ladder-ui/select",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -49,7 +49,7 @@
     "sass": "^1.90.0",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "@ladder-ui/core": "0.2.0"
+    "@ladder-ui/core": "0.3.0"
   },
   "peerDependencies": {
     "@ladder-ui/core": ">=0.0.0",