@mediamonks/react-kit 2.0.5 → 2.1.0

package/dist/_utils/childrenAreEqual.d.ts

@@ -1,2 +1,2 @@
-import { type ReactElement, type ReactFragment } from 'react';
-export declare function childrenAreEqual(previousChildren: ReactElement | ReactFragment | null, nextChildren: ReactElement | ReactFragment | null): boolean;
+import { type ReactElement } from 'react';
+export declare function childrenAreEqual(previousChildren: ReactElement | null, nextChildren: ReactElement | null): boolean;

package/dist/gsap/components/SplitTextWrapper/SplitTextWrapper.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="gsap/types/split-text.js" />
 import SplitText from 'gsap/SplitText';
-import { type ComponentProps, type ReactElement, type RefAttributes } from 'react';
+import { type ComponentPropsWithoutRef, type JSX, type JSXElementConstructor, type ReactNode, type RefObject } from 'react';
 /**
  * Allowed as prop values
  */
-type KnownTarget = Exclude<keyof JSX.IntrinsicElements, symbol | object>;
+type KnownTarget = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
 type SplitTextWrapperProps<T extends KnownTarget> = {
+    ref: RefObject<SplitText>;
     /**
      * The SplitText variables
      * @link https://greensock.com/docs/v3/Plugins/SplitText
@@ -19,11 +20,6 @@ type SplitTextWrapperProps<T extends KnownTarget> = {
      * Split the first element child of the element passed
      */
     splitFirstElementChild?: boolean;
-};
-/**
- * Polymorphic component type, necessary to get all the attributes/props for the
- * as prop component
- */
-type SplitTextWrapperComponent = <T extends KnownTarget = 'div'>(props: SplitTextWrapperProps<T> & Omit<ComponentProps<T>, keyof SplitTextWrapperProps<T> | 'ref'> & RefAttributes<SplitText | null>) => ReactElement;
-export declare const SplitTextWrapper: SplitTextWrapperComponent;
+} & ComponentPropsWithoutRef<T>;
+export declare function SplitTextWrapper<T extends KnownTarget>({ variables, as, children, splitFirstElementChild, ref, ...props }: SplitTextWrapperProps<T>): ReactNode;
 export {};

package/dist/gsap/components/SplitTextWrapper/SplitTextWrapper.js

@@ -2,31 +2,31 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import gsap from 'gsap';
 import SplitText from 'gsap/SplitText';
 import { renderToString } from 'react-dom/server';
-import { ensuredForwardRef } from '../../../hocs/ensuredForwardRef/ensuredForwardRef.js';
+import { useObjectRef } from '../../../hooks/useObjectRef/useObjectRef.js';
 if (typeof window !== 'undefined') {
     gsap.registerPlugin(SplitText);
 }
-// @ts-expect-error polymorphic type is not compatible with ensuredForwardRef function factory
-export const SplitTextWrapper = ensuredForwardRef(({ variables = {}, as, children, splitFirstElementChild = false, ...props }, ref) => {
+export function SplitTextWrapper({ variables = {}, as, children, splitFirstElementChild = false, ref, ...props }) {
+    const objectRef = useObjectRef(ref);
     /**
      * Not using useCallback on purpose so that a new SplitText instance is
      * created whenever this component rerenders the children
      */
-    const onRef = async (element) => {
-        if (ref.current && 'isSplit' in ref.current && ref.current.isSplit) {
+    const onRef = (element) => {
+        if (objectRef.current && 'isSplit' in objectRef.current && objectRef.current.isSplit) {
             return;
         }
         if (splitFirstElementChild && element.childElementCount > 1) {
             // eslint-disable-next-line no-console
             console.warn("Split text wrapper should only contain 1 element when 'splitFirstElementChild' is set to true");
         }
-        ref.current = new SplitText(splitFirstElementChild ? element.firstElementChild : element, variables);
+        objectRef.current = new SplitText(splitFirstElementChild ? element.firstElementChild : element, variables);
     };
-    const Component = (as ?? 'div');
+    const Component = as ?? 'div';
     return (_jsx(Component, { ...props, dangerouslySetInnerHTML: props.dangerouslySetInnerHTML ?? {
             // eslint-disable-next-line @typescript-eslint/naming-convention, react/jsx-no-useless-fragment
             __html: renderToString(_jsx(_Fragment, { children: children })),
         }, 
         // eslint-disable-next-line react/jsx-no-bind
         ref: onRef }));
-});
+}

package/dist/gsap/hooks/useAnimation/useAnimation.js

@@ -4,7 +4,9 @@ import { useCallback, useEffect, useRef } from 'react';
  * unmounted or when a new callback function is provided.
  */
 export function useAnimation(callback, dependencies) {
-    const animation = useRef();
+    const animation = useRef(
+    // eslint-disable-next-line unicorn/no-useless-undefined
+    undefined);
     // eslint-disable-next-line react-hooks/exhaustive-deps, no-underscore-dangle
     const _callback = useCallback(callback, dependencies);
     useEffect(() => {

package/dist/gsap/hooks/useFlip/useFlip.d.ts

@@ -1,3 +1,3 @@
-import { type MutableRefObject } from 'react';
+import { type RefObject } from 'react';
 import { type Unreffable } from '../../../utils/unref/unref.js';
-export declare function useFlip(ref: Unreffable<HTMLElement | null>, flipStateVariables?: Flip.FromToVars): MutableRefObject<Flip.FlipState | undefined>;
+export declare function useFlip(ref: Unreffable<HTMLElement | null>, flipStateVariables?: Flip.FromToVars): RefObject<Flip.FlipState | undefined>;

package/dist/gsap/hooks/useFlip/useFlip.js

@@ -6,7 +6,9 @@ if (typeof window !== 'undefined') {
     gsap.registerPlugin(Flip);
 }
 export function useFlip(ref, flipStateVariables = {}) {
-    const flipStateRef = useRef();
+    const flipStateRef = useRef(
+    // eslint-disable-next-line unicorn/no-useless-undefined
+    undefined);
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (globalThis.window !== undefined) {
         flipStateRef.current = Flip.getState(unref(ref));

package/dist/hocs/ensuredForwardRef/ensuredForwardRef.d.ts

@@ -1,4 +1,7 @@
 import { type ForwardRefExoticComponent, type MutableRefObject, type PropsWithoutRef, type ReactElement, type RefAttributes } from 'react';
+/**
+ * @deprecated use `useObjectRef` instead
+ */
 export interface EnsuredForwardRefRenderFunction<T, P = Record<string | number | symbol, unknown>> {
     (props: P, ref: MutableRefObject<T | null>): ReactElement | null;
     displayName?: string | undefined;
@@ -8,4 +11,7 @@ export interface EnsuredForwardRefRenderFunction<T, P = Record<string | number |
     defaultProps?: never;
     propTypes?: never;
 }
+/**
+ * @deprecated use `useObjectRef` instead
+ */
 export declare function ensuredForwardRef<T, P = Record<string | number | symbol, unknown>>(Component: EnsuredForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

package/dist/hocs/ensuredForwardRef/ensuredForwardRef.js

@@ -1,4 +1,7 @@
 import { createRef, forwardRef, useMemo, } from 'react';
+/**
+ * @deprecated use `useObjectRef` instead
+ */
 export function ensuredForwardRef(
 // eslint-disable-next-line @typescript-eslint/naming-convention
 Component) {
@@ -26,6 +29,7 @@ Component) {
                 },
             });
         }, [ref]);
+        // @ts-expect-error - deprecated in React 19
         return Component(props, refObject);
     });
 }

package/dist/hooks/useIntersectionObserver/useIntersectionObserver.js

@@ -15,7 +15,9 @@ import { useRefValue } from '../useRefValue/useRefValue.js';
  */
 export function useIntersectionObserver(targetOrTargets, callback, options) {
     const callbackRef = useRefValue(callback);
-    const intersectionObserverInstance = useClientSideValue(() => new IntersectionObserver((entries, observer) => callbackRef.current?.(entries, observer), options));
+    const intersectionObserverInstance = useClientSideValue(() => new IntersectionObserver((entries, observer) => {
+        callbackRef.current?.(entries, observer);
+    }, options));
     useEffect(() => {
         const targets = Array.isArray(targetOrTargets.current)
             ? targetOrTargets.current

package/dist/hooks/useInterval/useInterval.js

@@ -9,7 +9,9 @@ import { useRefValue } from '../useRefValue/useRefValue.js';
  */
 export function useInterval(callback, ms, enabled = true) {
     const callbackRef = useRefValue(callback);
-    const intervalRef = useRef();
+    const intervalRef = useRef(
+    // eslint-disable-next-line unicorn/no-useless-undefined
+    undefined);
     useEffect(() => {
         if (!enabled) {
             clearInterval(intervalRef.current);

package/dist/hooks/useMediaDuration/useMediaDuration.d.ts

@@ -1,5 +1,5 @@
-import { type MutableRefObject } from 'react';
+import { type RefObject } from 'react';
 /**
  * Retrieves the duration of the audio / video file in seconds.
  */
-export declare function useMediaDuration(mediaElementRef: MutableRefObject<HTMLMediaElement | null>): number;
+export declare function useMediaDuration(mediaElementRef: RefObject<HTMLMediaElement | null>): number;

package/dist/hooks/useObjectRef/useObjectRef.d.ts

@@ -0,0 +1,18 @@
+import { type Ref, type RefObject } from 'react';
+/**
+ * A React hook that creates a memoized object reference which can handle both RefObject and function refs.
+ * This hook provides a unified way to work with different types of React refs.
+ *
+ * @example
+ * ```tsx
+ * // Using with RefObject
+ * const elementRef = useRef<HTMLDivElement>(null);
+ * const objRef = useObjectRef(elementRef);
+ *
+ * // Using with function ref
+ * const objRef = useObjectRef((element) => {
+ *   console.log('Element changed:', element);
+ * });
+ * ```
+ */
+export declare function useObjectRef<T>(ref?: Ref<T>): RefObject<T | null>;

package/dist/hooks/useObjectRef/useObjectRef.js

@@ -0,0 +1,35 @@
+import { createRef, useMemo } from 'react';
+/**
+ * A React hook that creates a memoized object reference which can handle both RefObject and function refs.
+ * This hook provides a unified way to work with different types of React refs.
+ *
+ * @example
+ * ```tsx
+ * // Using with RefObject
+ * const elementRef = useRef<HTMLDivElement>(null);
+ * const objRef = useObjectRef(elementRef);
+ *
+ * // Using with function ref
+ * const objRef = useObjectRef((element) => {
+ *   console.log('Element changed:', element);
+ * });
+ * ```
+ */
+export function useObjectRef(ref) {
+    return useMemo(() => {
+        if (ref !== null && ref !== undefined && 'current' in ref) {
+            return ref;
+        }
+        return new Proxy(createRef(), {
+            set(target, prop, newValue) {
+                if (prop !== 'current') {
+                    return false;
+                }
+                target.current = newValue;
+                // Call ref function when it exists
+                ref?.(newValue);
+                return true;
+            },
+        });
+    }, [ref]);
+}

package/dist/hooks/useRefs/useRefs.types.d.ts

@@ -8,6 +8,7 @@ export type Refs<T extends UnknownRecord = UnknownRecord> = {
 };
 /**
  * Type utility to create an object type where all values are MutableRefObjects
+ * @deprecated use `Refs` instead
  */
 export type MutableRefs<T extends UnknownRecord = UnknownRecord> = {
     [P in keyof T]: MutableRefObject<T[P] | null>;

package/dist/utils/arrayRef/arrayRef.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="lodash" resolution-mode="require"/>
-import type { MutableRefObject } from 'react';
+import type { RefObject } from 'react';
 /**
  * Helper to set element in RefObject<Array>
  */
-declare function arrayRefInternal<T extends MutableRefObject<Array<unknown> | null>>(ref: T, index: number): (element: NonNullable<T['current']>[number]) => void;
+declare function arrayRefInternal<T extends RefObject<Array<unknown> | null>>(ref: T, index: number): (element: NonNullable<T['current']>[number]) => void;
 export declare const arrayRef: typeof arrayRefInternal & import("lodash").MemoizedFunction;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mediamonks/react-kit",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "description": "A collection of React hooks, components, utilities that we use at Media.Monks",
   "keywords": [
     "react",
@@ -72,7 +72,6 @@
     "@storybook/types": "^8.5.2",
     "@testing-library/react": "^16.2.0",
     "@types/lodash-es": "^4.17.11",
-    "@types/react": "^18.0.25",
     "@vitejs/plugin-react": "^4.0.0",
     "concurrently": "^8.2.2",
     "eslint": "^8.28.0",
@@ -90,7 +89,7 @@
     "storybook": "^8.5.2",
     "ts-node": "^10.9.1",
     "typescript": "^5.0.2",
-    "vitest": "^0.34.3",
+    "vitest": "^3.0.5",
     "wait-on": "^7.1.0"
   },
   "dependencies": {