@common-stack/components-pro 5.0.6-alpha.3 → 5.0.6-alpha.6

package/lib/slot-fill/bubbles-virtually/slot.js

@@ -1,4 +1,4 @@
-import React__default,{forwardRef,useContext,useRef,useLayoutEffect}from'react';import {useMergeRefs}from'@wordpress/compose';import SlotFillContext from'./slot-fill-context.js';function Slot({ name, fillProps = {}, as: Component = 'div', ...props }, forwardedRef) {
+import React__default,{forwardRef,useContext,useRef,useLayoutEffect}from'react';import useMergeRefs from'./use-merge-refs.js';import SlotFillContext from'./slot-fill-context.js';function Slot({ name, fillProps = {}, as: Component = 'div', ...props }, forwardedRef) {
     const { registerSlot, unregisterSlot, ...registry } = useContext(SlotFillContext);
     const ref = useRef();
     useLayoutEffect(() => {

package/lib/slot-fill/bubbles-virtually/use-merge-refs.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Merges refs into one ref callback.
+ *
+ * It also ensures that the merged ref callbacks are only called when they
+ * change (as a result of a `useCallback` dependency update) OR when the ref
+ * value changes, just as React does when passing a single ref callback to the
+ * component.
+ *
+ * As expected, if you pass a new function on every render, the ref callback
+ * will be called after every render.
+ *
+ * If you don't wish a ref callback to be called after every render, wrap it
+ * with `useCallback( callback, dependencies )`. When a dependency changes, the
+ * old ref callback will be called with `null` and the new ref callback will be
+ * called with the same value.
+ *
+ * To make ref callbacks easier to use, you can also pass the result of
+ * `useRefEffect`, which makes cleanup easier by allowing you to return a
+ * cleanup function instead of handling `null`.
+ *
+ * It's also possible to _disable_ a ref (and its behaviour) by simply not
+ * passing the ref.
+ *
+ * ```jsx
+ * const ref = useRefEffect( ( node ) => {
+ *   node.addEventListener( ... );
+ *   return () => {
+ *     node.removeEventListener( ... );
+ *   };
+ * }, [ ...dependencies ] );
+ * const otherRef = useRef();
+ * const mergedRefs useMergeRefs( [
+ *   enabled && ref,
+ *   otherRef,
+ * ] );
+ * return <div ref={ mergedRefs } />;
+ * ```
+ *
+ * @template {import('react').Ref<any>} TRef
+ * @param {Array<TRef>} refs The refs to be merged.
+ *
+ * @return {import('react').RefCallback<TypeFromRef<TRef>>} The merged ref callback.
+ */
+export default function useMergeRefs(refs: any): (value: any) => void;

package/lib/slot-fill/bubbles-virtually/use-merge-refs.js

@@ -0,0 +1,120 @@
+import {useRef,useLayoutEffect,useCallback}from'@wordpress/element';// THIS IS COPIED FROM https://github.com/WordPress/gutenberg/blob/7498ac2ed444e7737086e95d7da7ff2229fda3fe/packages/compose/src/hooks/use-merge-refs/index.js
+// DATE: August 20, 2024
+/**
+ * WordPress dependencies
+ */
+/* eslint-disable jsdoc/valid-types */
+/**
+ * @template T
+ * @typedef {T extends import('react').Ref<infer R> ? R : never} TypeFromRef
+ */
+/* eslint-enable jsdoc/valid-types */
+/**
+ * @template T
+ * @param {import('react').Ref<T>} ref
+ * @param {T}                      value
+ */
+function assignRef(ref, value) {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref && ref.hasOwnProperty('current')) {
+        /* eslint-disable jsdoc/no-undefined-types */
+        /** @type {import('react').MutableRefObject<T>} */ (ref).current =
+            value;
+        /* eslint-enable jsdoc/no-undefined-types */
+    }
+}
+/**
+ * Merges refs into one ref callback.
+ *
+ * It also ensures that the merged ref callbacks are only called when they
+ * change (as a result of a `useCallback` dependency update) OR when the ref
+ * value changes, just as React does when passing a single ref callback to the
+ * component.
+ *
+ * As expected, if you pass a new function on every render, the ref callback
+ * will be called after every render.
+ *
+ * If you don't wish a ref callback to be called after every render, wrap it
+ * with `useCallback( callback, dependencies )`. When a dependency changes, the
+ * old ref callback will be called with `null` and the new ref callback will be
+ * called with the same value.
+ *
+ * To make ref callbacks easier to use, you can also pass the result of
+ * `useRefEffect`, which makes cleanup easier by allowing you to return a
+ * cleanup function instead of handling `null`.
+ *
+ * It's also possible to _disable_ a ref (and its behaviour) by simply not
+ * passing the ref.
+ *
+ * ```jsx
+ * const ref = useRefEffect( ( node ) => {
+ *   node.addEventListener( ... );
+ *   return () => {
+ *     node.removeEventListener( ... );
+ *   };
+ * }, [ ...dependencies ] );
+ * const otherRef = useRef();
+ * const mergedRefs useMergeRefs( [
+ *   enabled && ref,
+ *   otherRef,
+ * ] );
+ * return <div ref={ mergedRefs } />;
+ * ```
+ *
+ * @template {import('react').Ref<any>} TRef
+ * @param {Array<TRef>} refs The refs to be merged.
+ *
+ * @return {import('react').RefCallback<TypeFromRef<TRef>>} The merged ref callback.
+ */
+function useMergeRefs(refs) {
+    const element = useRef();
+    const isAttached = useRef(false);
+    const didElementChange = useRef(false);
+    /* eslint-disable jsdoc/no-undefined-types */
+    /** @type {import('react').MutableRefObject<TRef[]>} */
+    /* eslint-enable jsdoc/no-undefined-types */
+    const previousRefs = useRef([]);
+    const currentRefs = useRef(refs);
+    // Update on render before the ref callback is called, so the ref callback
+    // always has access to the current refs.
+    currentRefs.current = refs;
+    // If any of the refs change, call the previous ref with `null` and the new
+    // ref with the node, except when the element changes in the same cycle, in
+    // which case the ref callbacks will already have been called.
+    useLayoutEffect(() => {
+        if (didElementChange.current === false &&
+            isAttached.current === true) {
+            refs.forEach((ref, index) => {
+                const previousRef = previousRefs.current[index];
+                if (ref !== previousRef) {
+                    assignRef(previousRef, null);
+                    assignRef(ref, element.current);
+                }
+            });
+        }
+        previousRefs.current = refs;
+    }, refs);
+    // No dependencies, must be reset after every render so ref callbacks are
+    // correctly called after a ref change.
+    useLayoutEffect(() => {
+        didElementChange.current = false;
+    });
+    // There should be no dependencies so that `callback` is only called when
+    // the node changes.
+    return useCallback((value) => {
+        // Update the element so it can be used when calling ref callbacks on a
+        // dependency change.
+        assignRef(element, value);
+        didElementChange.current = true;
+        isAttached.current = value !== null;
+        // When an element changes, the current ref callback should be called
+        // with the new element and the previous one with `null`.
+        const refsToAssign = value ? currentRefs.current : previousRefs.current;
+        // Update the latest refs.
+        for (const ref of refsToAssign) {
+            assignRef(ref, value);
+        }
+    }, []);
+}export{useMergeRefs as default};//# sourceMappingURL=use-merge-refs.js.map

package/lib/slot-fill/bubbles-virtually/use-merge-refs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-merge-refs.js","sources":["../../../src/slot-fill/bubbles-virtually/use-merge-refs.tsx"],"sourcesContent":[null],"names":[],"mappings":"oEAAA;AAEA;AAEA;;AAEG;AAGH;AACA;;;AAGG;AACH;AAEA;;;;AAIG;AACH,SAAS,SAAS,CAAE,GAAG,EAAE,KAAK,EAAA;AAC7B,IAAA,IAAK,OAAO,GAAG,KAAK,UAAU,EAAG;QAChC,GAAG,CAAE,KAAK,CAAE,CAAC;KACb;SAAM,IAAK,GAAG,IAAI,GAAG,CAAC,cAAc,CAAE,SAAS,CAAE,EAAG;;AAEpD,2DAAmD,CAAE,GAAG,EAAG,OAAO;AACjE,YAAA,KAAK,CAAC;;KAEP;AACF,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CG;AACqB,SAAA,YAAY,CAAE,IAAI,EAAA;AACzC,IAAA,MAAM,OAAO,GAAG,MAAM,EAAE,CAAC;AACzB,IAAA,MAAM,UAAU,GAAG,MAAM,CAAE,KAAK,CAAE,CAAC;AACnC,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAE,KAAK,CAAE,CAAC;;;;AAIzC,IAAA,MAAM,YAAY,GAAG,MAAM,CAAE,EAAE,CAAE,CAAC;AAClC,IAAA,MAAM,WAAW,GAAG,MAAM,CAAE,IAAI,CAAE,CAAC;;;AAInC,IAAA,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;;;;IAK3B,eAAe,CAAE,MAAK;AACrB,QAAA,IACC,gBAAgB,CAAC,OAAO,KAAK,KAAK;AAClC,YAAA,UAAU,CAAC,OAAO,KAAK,IAAI,EAC1B;YACD,IAAI,CAAC,OAAO,CAAE,CAAE,GAAG,EAAE,KAAK,KAAK;gBAC9B,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAE,KAAK,CAAE,CAAC;AAClD,gBAAA,IAAK,GAAG,KAAK,WAAW,EAAG;AAC1B,oBAAA,SAAS,CAAE,WAAW,EAAE,IAAI,CAAE,CAAC;AAC/B,oBAAA,SAAS,CAAE,GAAG,EAAE,OAAO,CAAC,OAAO,CAAE,CAAC;iBAClC;AACF,aAAC,CAAE,CAAC;SACJ;AAED,QAAA,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;KAC5B,EAAE,IAAI,CAAE,CAAC;;;IAIV,eAAe,CAAE,MAAK;AACrB,QAAA,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAAC;AAClC,KAAC,CAAE,CAAC;;;AAIJ,IAAA,OAAO,WAAW,CAAE,CAAE,KAAK,KAAK;;;AAG/B,QAAA,SAAS,CAAE,OAAO,EAAE,KAAK,CAAE,CAAC;AAE5B,QAAA,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC;AAChC,QAAA,UAAU,CAAC,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC;;;AAIpC,QAAA,MAAM,YAAY,GAAG,KAAK,GAAG,WAAW,CAAC,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC;;AAGxE,QAAA,KAAM,MAAM,GAAG,IAAI,YAAY,EAAG;AACjC,YAAA,SAAS,CAAE,GAAG,EAAE,KAAK,CAAE,CAAC;SACxB;KACD,EAAE,EAAE,CAAE,CAAC;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@common-stack/components-pro",
-    "version": "5.0.6-alpha.3",
+    "version": "5.0.6-alpha.6",
     "description": "browser plugin for git",
     "homepage": "https://github.com/cdmbase/fullstack-pro#readme",
     "bugs": {
@@ -30,7 +30,6 @@
         "watch": "npm run build:lib:watch"
     },
     "dependencies": {
-        "@wordpress/compose": "^6.30.0",
         "@wordpress/element": "^5.30.0",
         "@wordpress/hooks": "^3.53.0",
         "@wordpress/is-shallow-equal": "^4.53.0",
@@ -53,5 +52,5 @@
     "typescript": {
         "definition": "lib/index.d.ts"
     },
-    "gitHead": "6f2ee2fc446895ae8da7f8e6f923dc8f8e9975a5"
+    "gitHead": "8f24966492eeeb29f6435138d692afd3f18a093b"
 }