@mezzanine-ui/react 1.2.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/Table/components/TableResizeHandle.js

@@ -53,10 +53,19 @@ const TableResizeHandle = memo(function TableResizeHandle({ column, columnIndex,
             // If there's no next column, we can't do adjacent resize
             return;
         }
+        const lastColumnIndex = columns.length - 1;
+        const lastColumn = columns[lastColumnIndex];
+        // When resizing the second-to-last column, nextColumn === lastColumn.
+        // We collapse to the legacy adjacent-compensation path to avoid
+        // double-writing the same key.
+        const isAdjacentToLast = columnIndex + 1 === lastColumnIndex;
         // Get the actual rendered widths from the DOM
         const currentWidth = getColumnActualWidth(columnIndex);
         const nextWidth = getColumnActualWidth(columnIndex + 1);
-        if (currentWidth === 0 || nextWidth === 0) {
+        const lastWidth = isAdjacentToLast
+            ? nextWidth
+            : getColumnActualWidth(lastColumnIndex);
+        if (currentWidth === 0 || nextWidth === 0 || lastWidth === 0) {
             return;
         }
         startXRef.current = event.clientX;
@@ -66,32 +75,59 @@ const TableResizeHandle = memo(function TableResizeHandle({ column, columnIndex,
         const maxWidth = column.maxWidth;
         const nextMinWidth = nextColumn.minWidth;
         const nextMaxWidth = nextColumn.maxWidth;
+        const lastMinWidth = lastColumn.minWidth;
+        const lastMaxWidth = lastColumn.maxWidth;
+        // Slack the last column can absorb (signed against `diff`):
+        // - positive `diff` shrinks last → capped by lastShrinkBudget
+        // - negative `diff` grows last → capped by lastGrowBudget
+        const lastShrinkBudget = lastWidth - (lastMinWidth !== null && lastMinWidth !== void 0 ? lastMinWidth : 0);
+        const lastGrowBudget = lastMaxWidth !== undefined ? lastMaxWidth - lastWidth : Infinity;
         const handleMouseMove = (moveEvent) => {
             const diff = moveEvent.clientX - startXRef.current;
             const newWidth = startWidthRef.current + diff;
-            const newNextWidth = nextStartWidthRef.current - diff;
-            let isConstrained = false;
-            // Check current column constraints
-            if (minWidth !== undefined && newWidth < minWidth) {
-                isConstrained = true;
-            }
-            if (maxWidth !== undefined && newWidth > maxWidth) {
-                isConstrained = true;
+            // Current column constraint checks
+            if (minWidth !== undefined && newWidth < minWidth)
+                return;
+            if (maxWidth !== undefined && newWidth > maxWidth)
+                return;
+            if (newWidth < 0)
+                return;
+            if (isAdjacentToLast) {
+                // Legacy adjacent compensation: donor === N+1 === last
+                const newNextWidth = nextStartWidthRef.current - diff;
+                if (nextMinWidth !== undefined && newNextWidth < nextMinWidth)
+                    return;
+                if (nextMaxWidth !== undefined && newNextWidth > nextMaxWidth)
+                    return;
+                if (newNextWidth < 0)
+                    return;
+                setResizedColumnWidth === null || setResizedColumnWidth === void 0 ? void 0 : setResizedColumnWidth(column.key, newWidth);
+                setResizedColumnWidth === null || setResizedColumnWidth === void 0 ? void 0 : setResizedColumnWidth(nextColumn.key, newNextWidth);
+                return;
             }
-            // Check next column constraints
-            if (nextMinWidth !== undefined && newNextWidth < nextMinWidth) {
-                isConstrained = true;
+            // Last-column donor strategy:
+            // Project `diff` onto the last column first (clamped to its budget).
+            // Any overflow falls back to the adjacent column (N+1).
+            let toLast;
+            if (diff >= 0) {
+                toLast = Math.min(diff, lastShrinkBudget);
             }
-            if (nextMaxWidth !== undefined && newNextWidth > nextMaxWidth) {
-                isConstrained = true;
+            else {
+                toLast = Math.max(diff, -lastGrowBudget);
             }
-            if (isConstrained) {
+            const overflow = diff - toLast;
+            const newLastWidth = lastWidth - toLast;
+            // Always write N+1 too — when overflow returns to 0 on the return
+            // drag, this restores N+1 to its start width (LIFO donor restoration).
+            const newNextWidth = nextStartWidthRef.current - overflow;
+            if (nextMinWidth !== undefined && newNextWidth < nextMinWidth)
                 return;
-            }
-            if (newWidth < 0 || newNextWidth < 0) {
+            if (nextMaxWidth !== undefined && newNextWidth > nextMaxWidth)
+                return;
+            if (newNextWidth < 0)
                 return;
-            }
             setResizedColumnWidth === null || setResizedColumnWidth === void 0 ? void 0 : setResizedColumnWidth(column.key, newWidth);
+            setResizedColumnWidth === null || setResizedColumnWidth === void 0 ? void 0 : setResizedColumnWidth(lastColumn.key, newLastWidth);
             setResizedColumnWidth === null || setResizedColumnWidth === void 0 ? void 0 : setResizedColumnWidth(nextColumn.key, newNextWidth);
         };
         const handleMouseUp = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -57,6 +57,5 @@
     "moment": "^2.30.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
-  },
-  "gitHead": "f5fa136dac936a0debafff9ea5a3815ff0b5c040"
+  }
 }

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 };