@mediamonks/react-kit 1.0.2 → 2.0.4

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

@@ -1,3 +1,4 @@
+/// <reference types="gsap/types/split-text.js" />
 import SplitText from 'gsap/SplitText';
 import { type ComponentProps, type ReactElement, type RefAttributes } from 'react';
 /**

package/dist/gsap/hooks/useScrollAnimation/useScrollAnimation.js

@@ -1,4 +1,5 @@
 import gsap from 'gsap';
+// eslint-disable-next-line @typescript-eslint/naming-convention
 import ScrollTrigger from 'gsap/ScrollTrigger';
 import { useEffect, useRef } from 'react';
 import { animations } from '../../animations.js';

package/dist/gsap.d.ts

@@ -0,0 +1,8 @@
+export * from './gsap/components/SplitTextWrapper/SplitTextWrapper.js';
+export * from './gsap/hooks/useAnimation/useAnimation.js';
+export * from './gsap/hooks/useExposeAnimation/useExposeAnimation.js';
+export * from './gsap/hooks/useExposedAnimation/useExposedAnimation.js';
+export * from './gsap/hooks/useExposedAnimations/useExposedAnimations.js';
+export * from './gsap/hooks/useFlip/useFlip.js';
+export * from './gsap/hooks/useScrollAnimation/useScrollAnimation.js';
+export * from './gsap/utils/getAnimation/getAnimation.js';

package/dist/gsap.js

@@ -0,0 +1,8 @@
+export * from './gsap/components/SplitTextWrapper/SplitTextWrapper.js';
+export * from './gsap/hooks/useAnimation/useAnimation.js';
+export * from './gsap/hooks/useExposeAnimation/useExposeAnimation.js';
+export * from './gsap/hooks/useExposedAnimation/useExposedAnimation.js';
+export * from './gsap/hooks/useExposedAnimations/useExposedAnimations.js';
+export * from './gsap/hooks/useFlip/useFlip.js';
+export * from './gsap/hooks/useScrollAnimation/useScrollAnimation.js';
+export * from './gsap/utils/getAnimation/getAnimation.js';

package/dist/hooks/useContentRect/useContentRect.js

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useRef, useCallback } from 'react';
 import { useMount } from '../../lifecycle/hooks/useMount/useMount.js';
 import { unref } from '../../utils/unref/unref.js';
 import { useResizeObserver } from '../useResizeObserver/useResizeObserver.js';
@@ -8,9 +8,10 @@ import { useResizeObserver } from '../useResizeObserver/useResizeObserver.js';
  */
 export function useContentRect(target) {
     const contentRectRef = useRef(null);
-    useResizeObserver(target, (entries) => {
+    const onResize = useCallback((entries) => {
         contentRectRef.current = entries.at(0)?.contentRect ?? null;
-    });
+    }, []);
+    useResizeObserver(target, onResize);
     useMount(() => {
         contentRectRef.current = unref(target)?.getBoundingClientRect() ?? null;
     });

package/dist/hooks/useContentRectState/useContentRectState.js

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { useMount } from '../../index.js';
 import { unref } from '../../utils/unref/unref.js';
 import { useResizeObserver } from '../useResizeObserver/useResizeObserver.js';
@@ -9,12 +9,13 @@ import { useResizeObserver } from '../useResizeObserver/useResizeObserver.js';
 export function useContentRectState(target) {
     const [contentRect, setContentRect] = useState(null);
     const rafRef = useRef(0);
-    useResizeObserver(target, (entries) => {
+    const onResize = useCallback((entries) => {
         cancelAnimationFrame(rafRef.current);
         rafRef.current = requestAnimationFrame(() => {
             setContentRect(entries.at(0)?.contentRect ?? null);
         });
-    });
+    }, []);
+    useResizeObserver(target, onResize);
     useMount(() => {
         setContentRect(unref(target)?.getBoundingClientRect() ?? null);
     });

package/dist/hooks/useResizeObserver/useResizeObserver.js

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { unref } from '../../utils/unref/unref.js';
+import { useRefValue } from '../useRefValue/useRefValue.js';
 /**
  * This hook allows you to add a ResizeObserver for an element and remove it
  * when the component unmounts.
@@ -9,16 +10,19 @@ import { unref } from '../../utils/unref/unref.js';
  * @param options - The ResizeObserverOptions for the observed element
  */
 export function useResizeObserver(target, callback, options) {
+    const callbackRef = useRefValue(callback);
     useEffect(() => {
         const element = unref(target);
         if (element === null || callback === undefined) {
             return;
         }
-        const resizeObserver = new ResizeObserver(callback);
+        const resizeObserver = new ResizeObserver((..._arguments) => {
+            callbackRef.current?.(..._arguments);
+        });
         resizeObserver.observe(element, options);
         return () => {
             resizeObserver.disconnect();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [target, callback, ...Object.values(options ?? {})]);
+    }, [target, ...Object.values(options ?? {})]);
 }

package/dist/index.d.ts

@@ -1,13 +1,5 @@
 export * from './components/AutoAdjustFontSize/AutoAdjustFontSize.js';
 export * from './components/AutoFill/AutoFill.js';
-export * from './gsap/components/SplitTextWrapper/SplitTextWrapper.js';
-export * from './gsap/hooks/useAnimation/useAnimation.js';
-export * from './gsap/hooks/useExposeAnimation/useExposeAnimation.js';
-export * from './gsap/hooks/useExposedAnimation/useExposedAnimation.js';
-export * from './gsap/hooks/useExposedAnimations/useExposedAnimations.js';
-export * from './gsap/hooks/useFlip/useFlip.js';
-export * from './gsap/hooks/useScrollAnimation/useScrollAnimation.js';
-export * from './gsap/utils/getAnimation/getAnimation.js';
 export * from './hocs/ensuredForwardRef/ensuredForwardRef.js';
 export * from './hooks/useClientSideValue/useClientSideValue.js';
 export * from './hooks/useContentRect/useContentRect.js';
@@ -31,18 +23,18 @@ export * from './hooks/useRefs/utils/validateAndUnwrapRefs/validateAndUnwrapRefs
 export * from './hooks/useResizeObserver/useResizeObserver.js';
 export * from './hooks/useStaticValue/useStaticValue.js';
 export * from './hooks/useToggle/useToggle.js';
+export * from './lifecycle/components/CrossFlow/CrossFlow.js';
+export * from './lifecycle/components/TransitionPresence/TransitionPresence.context.js';
+export * from './lifecycle/components/TransitionPresence/TransitionPresence.js';
 export * from './lifecycle/hooks/useBeforeMount/useBeforeMount.js';
+export * from './lifecycle/hooks/useBeforeUnmount/useBeforeUnmount.js';
 export * from './lifecycle/hooks/useIsMounted/useIsMounted.js';
 export * from './lifecycle/hooks/useIsMountedState/useIsMountedState.js';
 export * from './lifecycle/hooks/useMount/useMount.js';
 export * from './lifecycle/hooks/useUnmount/useUnmount.js';
-export * from './nextjs/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
+export * from './types/PolymorphicComponentProps/PolymorphicComponentProps.js';
 export * from './utils/adjustFontSize/adjustFontSize.js';
 export * from './utils/arrayRef/arrayRef.js';
 export * from './utils/createTimeout/createTimeout.js';
 export * from './utils/isRefObject/isRefObject.js';
 export * from './utils/unref/unref.js';
-export { CrossFlow } from './lifecycle/components/CrossFlow/CrossFlow.js';
-export { TransitionPresenceContext } from './lifecycle/components/TransitionPresence/TransitionPresence.context.js';
-export { TransitionPresence } from './lifecycle/components/TransitionPresence/TransitionPresence.js';
-export { useBeforeUnmount, type BeforeUnmountCallback, } from './lifecycle/hooks/useBeforeUnmount/useBeforeUnmount.js';

package/dist/index.js

@@ -1,14 +1,6 @@
 /* PLOP_ADD_EXPORT */
 export * from './components/AutoAdjustFontSize/AutoAdjustFontSize.js';
 export * from './components/AutoFill/AutoFill.js';
-export * from './gsap/components/SplitTextWrapper/SplitTextWrapper.js';
-export * from './gsap/hooks/useAnimation/useAnimation.js';
-export * from './gsap/hooks/useExposeAnimation/useExposeAnimation.js';
-export * from './gsap/hooks/useExposedAnimation/useExposedAnimation.js';
-export * from './gsap/hooks/useExposedAnimations/useExposedAnimations.js';
-export * from './gsap/hooks/useFlip/useFlip.js';
-export * from './gsap/hooks/useScrollAnimation/useScrollAnimation.js';
-export * from './gsap/utils/getAnimation/getAnimation.js';
 export * from './hocs/ensuredForwardRef/ensuredForwardRef.js';
 export * from './hooks/useClientSideValue/useClientSideValue.js';
 export * from './hooks/useContentRect/useContentRect.js';
@@ -32,19 +24,18 @@ export * from './hooks/useRefs/utils/validateAndUnwrapRefs/validateAndUnwrapRefs
 export * from './hooks/useResizeObserver/useResizeObserver.js';
 export * from './hooks/useStaticValue/useStaticValue.js';
 export * from './hooks/useToggle/useToggle.js';
+export * from './lifecycle/components/CrossFlow/CrossFlow.js';
+export * from './lifecycle/components/TransitionPresence/TransitionPresence.context.js';
+export * from './lifecycle/components/TransitionPresence/TransitionPresence.js';
 export * from './lifecycle/hooks/useBeforeMount/useBeforeMount.js';
+export * from './lifecycle/hooks/useBeforeUnmount/useBeforeUnmount.js';
 export * from './lifecycle/hooks/useIsMounted/useIsMounted.js';
 export * from './lifecycle/hooks/useIsMountedState/useIsMountedState.js';
 export * from './lifecycle/hooks/useMount/useMount.js';
 export * from './lifecycle/hooks/useUnmount/useUnmount.js';
-export * from './nextjs/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
+export * from './types/PolymorphicComponentProps/PolymorphicComponentProps.js';
 export * from './utils/adjustFontSize/adjustFontSize.js';
 export * from './utils/arrayRef/arrayRef.js';
 export * from './utils/createTimeout/createTimeout.js';
 export * from './utils/isRefObject/isRefObject.js';
 export * from './utils/unref/unref.js';
-// Custom exports for external use only
-export { CrossFlow } from './lifecycle/components/CrossFlow/CrossFlow.js';
-export { TransitionPresenceContext } from './lifecycle/components/TransitionPresence/TransitionPresence.context.js';
-export { TransitionPresence } from './lifecycle/components/TransitionPresence/TransitionPresence.js';
-export { useBeforeUnmount, } from './lifecycle/hooks/useBeforeUnmount/useBeforeUnmount.js';

package/dist/nextjs.d.ts

@@ -0,0 +1 @@
+export * from './nextjs/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';

package/dist/nextjs.js

@@ -0,0 +1 @@
+export * from './nextjs/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';

package/dist/types/PolymorphicComponentProps/PolymorphicComponentProps.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, PropsWithChildren } from 'react';
+/**
+ * PropsFromAs is a type based on the supplied as prop.
+ */
+type PropsFromAs<Type extends ElementType> = {
+    as?: Type;
+};
+/**
+ * MergeAndOverride is a type that omits type keys from BaseTypes that are also present in OverrideProps.
+ */
+type MergeAndOverride<BaseType, OverrideProps> = Omit<BaseType, keyof OverrideProps> & OverrideProps;
+export type PolymorphicRef<Type extends ElementType> = ComponentPropsWithRef<Type>['ref'];
+export type PolymorphicComponentProps<BaseType extends ElementType, OwnProps = Record<string, never>> = PropsWithChildren<MergeAndOverride<ComponentPropsWithoutRef<BaseType>, PropsFromAs<BaseType> & OwnProps>>;
+export type PolymorphicComponentPropsWithRef<BaseType extends ElementType, OwnProps = Record<string, never>> = PolymorphicComponentProps<BaseType, OwnProps> & {
+    ref?: PolymorphicRef<BaseType>;
+};
+export {};

package/dist/types/PolymorphicComponentProps/PolymorphicComponentProps.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mediamonks/react-kit",
-  "version": "1.0.2",
+  "version": "2.0.4",
   "description": "A collection of React hooks, components, utilities that we use at Media.Monks",
   "keywords": [
     "react",
@@ -17,7 +17,9 @@
   "types": "./dist/index.d.ts",
   "module": "./dist/index.js",
   "exports": {
-    ".": "./dist/index.js"
+    ".": "./dist/index.js",
+    "./gsap": "./dist/gsap.js",
+    "./nextjs": "./dist/nextjs.js"
   },
   "type": "module",
   "files": [
@@ -25,8 +27,7 @@
     "README.md"
   ],
   "publishConfig": {
-    "access": "public",
-    "provenance": false
+    "access": "public"
   },
   "scripts": {
     "build": "npm-run-all -s clean build:*",
@@ -50,56 +51,25 @@
     "prepare": "husky install"
   },
   "prettier": "@mediamonks/prettier-config",
-  "eslintConfig": {
-    "overrides": [
-      {
-        "files": [
-          "*.ts",
-          "*.tsx"
-        ],
-        "extends": [
-          "@mediamonks/eslint-config",
-          "@mediamonks/eslint-config-react",
-          "@mediamonks/eslint-config-typescript",
-          "@mediamonks/eslint-config-typescript-react"
-        ],
-        "parserOptions": {
-          "project": "./tsconfig.json"
-        }
-      },
-      {
-        "files": [
-          "*.cjs",
-          "*.js",
-          "*.jsx",
-          "*.mjs"
-        ],
-        "extends": [
-          "@mediamonks/eslint-config"
-        ],
-        "parserOptions": {
-          "ecmaVersion": "latest"
-        }
-      }
-    ]
-  },
   "devDependencies": {
-    "@mediamonks/eslint-config": "^2.0.6",
-    "@mediamonks/eslint-config-react": "^2.1.11",
-    "@mediamonks/eslint-config-typescript": "^1.0.8",
-    "@mediamonks/eslint-config-typescript-react": "^1.0.10",
+    "@mediamonks/eslint-config": "^2.5.0",
+    "@mediamonks/eslint-config-react": "^2.6.0",
+    "@mediamonks/eslint-config-typescript": "^1.5.1",
+    "@mediamonks/eslint-config-typescript-react": "^1.4.1",
     "@mediamonks/prettier-config": "^1.0.1",
-    "@storybook/addon-essentials": "^7.5.2",
-    "@storybook/addon-interactions": "^7.5.2",
-    "@storybook/addon-links": "^7.5.2",
-    "@storybook/blocks": "^7.5.2",
-    "@storybook/cli": "^7.5.2",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/cli": "^7.6.17",
     "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^7.5.2",
-    "@storybook/react-vite": "^7.5.2",
-    "@storybook/test-runner": "^0.13.0",
+    "@storybook/manager-api": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
+    "@storybook/test-runner": "^0.16.0",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/types": "^7.5.2",
+    "@storybook/theming": "^7.6.17",
+    "@storybook/types": "^7.6.17",
     "@testing-library/react": "^14.0.0",
     "@types/lodash-es": "^4.17.11",
     "@types/react": "^18.0.25",
@@ -112,7 +82,7 @@
     "lint-staged": "^13.1.0",
     "npm-run-all": "^4.1.5",
     "plop": "^4.0.0",
-    "prettier": "^2.8.0",
+    "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "shx": "^0.3.4",