@mezzanine-ui/react 1.3.0 → 1.3.1

package/Dropdown/Dropdown.js

@@ -10,20 +10,10 @@ import Button from '../Button/Button.js';
 import { useDocumentEvents } from '../hooks/useDocumentEvents.js';
 import Translate from '../Transition/Translate.js';
 import { composeRefs } from '../utils/composeRefs.js';
+import { getElementRef } from '../utils/getElementRef.js';
 import DropdownItem from './DropdownItem.js';
 import Popper from '../Popper/Popper.js';
 
-/**
- * Extracts ref from a ReactElement, supporting both React 18 and 19.
- * In React 18, ref is on the element itself; in React 19, ref is in props.
- */
-function getElementRef(element) {
-    var _a;
-    // React 19: ref is in props
-    const propsRef = (_a = element.props) === null || _a === void 0 ? void 0 : _a.ref;
-    // React 18: ref is on the element itself
-    return propsRef !== null && propsRef !== void 0 ? propsRef : element.ref;
-}
 /**
  * 下拉選單元件，以 `Button` 或 `Input` 作為觸發元素，點擊後展開選項列表。
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {

package/utils/getElementRef.d.ts

@@ -0,0 +1,27 @@
+import { ReactElement, Ref } from 'react';
+/**
+ * Helper type to extract ref from a ReactElement.
+ * Models `ref` on the element itself, which is compatible with React 18 and 19.
+ */
+export type ReactElementWithRef<P, E extends Element = HTMLElement> = ReactElement<P> & {
+    ref?: Ref<E>;
+};
+/**
+ * Extracts ref from a ReactElement, supporting both React 18 and 19.
+ * In React 18, ref is on the element itself; in React 19, ref is in props.
+ *
+ * Reading the "wrong" location in dev mode triggers React warning getters:
+ *
+ * - React 18 installs a warning getter on `props.ref` when the element was
+ *   created with a ref — accessing it logs
+ *   "`ref` is not a prop. Trying to access it will result in `undefined` being returned."
+ * - React 19 installs a deprecation getter on `element.ref` when the element
+ *   was created with a ref — accessing it logs
+ *   "Accessing element.ref was removed in React 19."
+ *
+ * So instead of unconditionally reading `props.ref` first, detect the
+ * dev-mode warning getters (marked with `isReactWarning`) and read the ref
+ * from the location where it actually lives. Same approach as
+ * `getElementRef` in radix-ui/primitives.
+ */
+export declare function getElementRef<E extends Element = HTMLElement>(element: ReactElementWithRef<unknown, E>): Ref<E> | undefined;

package/utils/getElementRef.js

@@ -0,0 +1,52 @@
+/**
+ * Whether the given property getter is a React dev-mode warning getter.
+ * React marks them with `isReactWarning = true`
+ * (see `defineRefPropWarningGetter` in the React source).
+ */
+function isReactWarningGetter(getter) {
+    return (typeof getter === 'function' &&
+        Boolean(getter.isReactWarning));
+}
+/**
+ * Extracts ref from a ReactElement, supporting both React 18 and 19.
+ * In React 18, ref is on the element itself; in React 19, ref is in props.
+ *
+ * Reading the "wrong" location in dev mode triggers React warning getters:
+ *
+ * - React 18 installs a warning getter on `props.ref` when the element was
+ *   created with a ref — accessing it logs
+ *   "`ref` is not a prop. Trying to access it will result in `undefined` being returned."
+ * - React 19 installs a deprecation getter on `element.ref` when the element
+ *   was created with a ref — accessing it logs
+ *   "Accessing element.ref was removed in React 19."
+ *
+ * So instead of unconditionally reading `props.ref` first, detect the
+ * dev-mode warning getters (marked with `isReactWarning`) and read the ref
+ * from the location where it actually lives. Same approach as
+ * `getElementRef` in radix-ui/primitives.
+ */
+function getElementRef(element) {
+    var _a, _b, _c;
+    const props = element.props;
+    // React 18 dev mode: `props.ref` is a warning getter; the actual ref
+    // lives on the element itself.
+    const propsRefGetter = props
+        ? (_a = Object.getOwnPropertyDescriptor(props, 'ref')) === null || _a === void 0 ? void 0 : _a.get
+        : undefined;
+    if (isReactWarningGetter(propsRefGetter)) {
+        return element.ref;
+    }
+    // React 19 dev mode: `element.ref` may be a deprecation warning getter;
+    // the actual ref lives in props as a regular property.
+    const elementRefGetter = (_b = Object.getOwnPropertyDescriptor(element, 'ref')) === null || _b === void 0 ? void 0 : _b.get;
+    if (isReactWarningGetter(elementRefGetter)) {
+        return props === null || props === void 0 ? void 0 : props.ref;
+    }
+    // No warning getters (production builds, or no ref was given):
+    // prefer `props.ref` (React 19), fall back to `element.ref` (React 18).
+    // Safe on React 19 dev — its `element.ref` deprecation getter is only
+    // installed when a ref exists, in which case `props.ref` is returned here.
+    return (_c = props === null || props === void 0 ? void 0 : props.ref) !== null && _c !== void 0 ? _c : element.ref;
+}
+
+export { getElementRef };