@vitus-labs/attrs 2.7.1 → 2.7.2

package/README.md

@@ -1,3 +1,19 @@
+<!-- LOGO:BEGIN -->
+<div align="center">
+  <a href="https://github.com/vitus-labs/ui-system">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/vitus-labs/ui-system/main/.github/assets/vitus-labs-mark-dark.svg">
+      <img alt="vitus·labs" src="https://raw.githubusercontent.com/vitus-labs/ui-system/main/.github/assets/vitus-labs-mark-light.svg" height="64">
+    </picture>
+  </a>
+  &nbsp;&nbsp;&nbsp;&nbsp;
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/vitus-labs/ui-system/main/packages/attrs/assets/logo-dark.svg">
+    <img alt="@vitus-labs/attrs" src="https://raw.githubusercontent.com/vitus-labs/ui-system/main/packages/attrs/assets/logo-light.svg" height="64">
+  </picture>
+</div>
+<!-- LOGO:END -->
+
 # @vitus-labs/attrs
 
 Immutable, chainable default-props factory for React components.

package/lib/index.js

@@ -1,5 +1,5 @@
 import { compose, hoistNonReactStatics, isEmpty, omit, pick, useStableValue } from "@vitus-labs/core";
-import { memo, useImperativeHandle, useMemo, useRef } from "react";
+import { memo, useCallback, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/utils/attrs.ts
@@ -66,22 +66,33 @@ const createAttrsHOC = ({ attrs, priorityAttrs }) => {
 
 //#endregion
 //#region src/hooks/useRef.ts
+const assignRef = (target, node) => {
+	if (!target) return;
+	if (typeof target === "function") target(node);
+	else target.current = node;
+};
 /**
-* Unifies two ref sources into a single internal ref.
+* Unifies two ref sources into a single merged callback ref.
 *
 * The attrs HOC chain creates two refs that both need to reach the same DOM node:
 * - `$attrsRef`: the consumer's original ref, forwarded through attrsHoc
 * - `ref`: a ref from any intermediate HOC added via `.compose()`
 *
-* This hook creates one internal ref and wires both forwarded refs to it
-* via `useImperativeHandle`, so `consumer.ref.current === hoc.ref.current`.
+* A CALLBACK ref (not `useImperativeHandle`) is essential here: React
+* re-invokes it on every attach/detach, so both forwarded refs always track
+* the live node — including across host remounts (e.g. a `tag` change from
+* `div` to `button`). The previous `useImperativeHandle(ref, () =>
+* internalRef.current, [])` implementation snapshotted `.current` once at
+* mount, leaving consumers holding the detached old node after a remount.
+*
+* Deps on the forwarded refs: if a consumer passes a new ref identity,
+* React detaches the old callback (null) and attaches the new one (node),
+* keeping both ref generations correct.
 */
-const useAttrsStyleRef = ({ $attrsRef, ref }) => {
-	const internalRef = useRef(null);
-	useImperativeHandle($attrsRef, () => internalRef.current, []);
-	useImperativeHandle(ref, () => internalRef.current, []);
-	return internalRef;
-};
+const useAttrsStyleRef = ({ $attrsRef, ref }) => useCallback((node) => {
+	assignRef($attrsRef, node);
+	assignRef(ref, node);
+}, [$attrsRef, ref]);
 
 //#endregion
 //#region src/utils/chaining.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/attrs",
-  "version": "2.7.1",
+  "version": "2.7.2",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -59,7 +59,7 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@vitus-labs/core": "^2.7.1",
+    "@vitus-labs/core": "^2.7.2",
     "react": ">= 19"
   },
   "devDependencies": {
@@ -71,6 +71,6 @@
     "@vitus-labs/tools-storybook": "2.5.0",
     "@vitus-labs/tools-typescript": "2.5.0",
     "jsdom": "^29.1.1",
-    "tinybench": "^6.0.1"
+    "tinybench": "^6.0.2"
   }
 }