@mediamonks/react-kit 1.0.0 → 1.0.2

package/dist/components/AutoAdjustFontSize/AutoAdjustFontSize.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentProps, type ReactNode } from 'react';
+type AutoAdjustFontSizeProps = ComponentProps<'div'> & {
+    children: ReactNode;
+    minFontSize?: number;
+    maxFontSize?: number;
+    axis?: 'x' | 'y';
+};
+export declare const AutoAdjustFontSize: import("react").ForwardRefExoticComponent<Omit<AutoAdjustFontSizeProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/AutoAdjustFontSize/AutoAdjustFontSize.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { ensuredForwardRef } from '../../hocs/ensuredForwardRef/ensuredForwardRef.js';
+import { useResizeObserver } from '../../hooks/useResizeObserver/useResizeObserver.js';
+import { adjustFontSize } from '../../utils/adjustFontSize/adjustFontSize.js';
+export const AutoAdjustFontSize = ensuredForwardRef(({ children, minFontSize, maxFontSize, axis, style }, ref) => {
+    const [parentElement, setParentElement] = useState(null);
+    const updateFontSize = useCallback(() => {
+        if (!ref.current) {
+            return;
+        }
+        adjustFontSize(ref.current, minFontSize, maxFontSize, axis);
+    }, [axis, maxFontSize, minFontSize, ref]);
+    useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        setParentElement(ref.current.parentElement);
+        updateFontSize();
+        ref.current.style.visibility = 'visible';
+    }, [ref, updateFontSize]);
+    useResizeObserver(parentElement, updateFontSize);
+    return (_jsx("div", { ref: ref, style: {
+            whiteSpace: 'nowrap',
+            inlineSize: 'max-content',
+            blockSize: 'max-content',
+            visibility: 'hidden',
+            ...style,
+        }, children: children }));
+});

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

@@ -2,7 +2,9 @@ import gsap from 'gsap';
 import Flip from 'gsap/Flip';
 import { useEffect, useRef } from 'react';
 import { unref } from '../../../utils/unref/unref.js';
-gsap.registerPlugin(Flip);
+if (typeof window !== 'undefined') {
+    gsap.registerPlugin(Flip);
+}
 export function useFlip(ref, flipStateVariables = {}) {
     const flipStateRef = useRef();
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition

package/dist/hooks/useContentRect/useContentRect.d.ts

@@ -0,0 +1,7 @@
+import { type RefObject } from 'react';
+import { type Unreffable } from '../../utils/unref/unref.js';
+/**
+ * A hook that returns a ref object containing the content rectangle of the target
+ * element. The content rectangle is updated whenever the target element is resized.
+ */
+export declare function useContentRect(target: Unreffable<Element | null>): RefObject<DOMRectReadOnly | null>;

package/dist/hooks/useContentRect/useContentRect.js

@@ -0,0 +1,18 @@
+import { useRef } from 'react';
+import { useMount } from '../../lifecycle/hooks/useMount/useMount.js';
+import { unref } from '../../utils/unref/unref.js';
+import { useResizeObserver } from '../useResizeObserver/useResizeObserver.js';
+/**
+ * A hook that returns a ref object containing the content rectangle of the target
+ * element. The content rectangle is updated whenever the target element is resized.
+ */
+export function useContentRect(target) {
+    const contentRectRef = useRef(null);
+    useResizeObserver(target, (entries) => {
+        contentRectRef.current = entries.at(0)?.contentRect ?? null;
+    });
+    useMount(() => {
+        contentRectRef.current = unref(target)?.getBoundingClientRect() ?? null;
+    });
+    return contentRectRef;
+}

package/dist/hooks/useContentRectState/useContentRectState.d.ts

@@ -0,0 +1,6 @@
+import { type Unreffable } from '../../utils/unref/unref.js';
+/**
+ * A hook that returns the content rectangle of the target element.
+ * The content rectangle is updated whenever the target element is resized.
+ */
+export declare function useContentRectState(target: Unreffable<Element | null>): DOMRectReadOnly | null;

package/dist/hooks/useContentRectState/useContentRectState.js

@@ -0,0 +1,22 @@
+import { useRef, useState } from 'react';
+import { useMount } from '../../index.js';
+import { unref } from '../../utils/unref/unref.js';
+import { useResizeObserver } from '../useResizeObserver/useResizeObserver.js';
+/**
+ * A hook that returns the content rectangle of the target element.
+ * The content rectangle is updated whenever the target element is resized.
+ */
+export function useContentRectState(target) {
+    const [contentRect, setContentRect] = useState(null);
+    const rafRef = useRef(0);
+    useResizeObserver(target, (entries) => {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = requestAnimationFrame(() => {
+            setContentRect(entries.at(0)?.contentRect ?? null);
+        });
+    });
+    useMount(() => {
+        setContentRect(unref(target)?.getBoundingClientRect() ?? null);
+    });
+    return contentRect;
+}

package/dist/hooks/useResizeObserver/useResizeObserver.d.ts

@@ -5,5 +5,6 @@ import { type Unreffable } from '../../utils/unref/unref.js';
  *
  * @param target - The target to observe
  * @param callback - The callback to fire when the element resizes
+ * @param options - The ResizeObserverOptions for the observed element
  */
-export declare function useResizeObserver(target: Unreffable<Element | null>, callback: ResizeObserverCallback): void;
+export declare function useResizeObserver(target: Unreffable<Element | null>, callback?: ResizeObserverCallback | undefined, options?: ResizeObserverOptions): void;

package/dist/hooks/useResizeObserver/useResizeObserver.js

@@ -6,17 +6,19 @@ import { unref } from '../../utils/unref/unref.js';
  *
  * @param target - The target to observe
  * @param callback - The callback to fire when the element resizes
+ * @param options - The ResizeObserverOptions for the observed element
  */
-export function useResizeObserver(target, callback) {
+export function useResizeObserver(target, callback, options) {
     useEffect(() => {
         const element = unref(target);
-        if (element === null) {
+        if (element === null || callback === undefined) {
             return;
         }
-        const resizeObserverInstance = new ResizeObserver(callback);
-        resizeObserverInstance.observe(element);
+        const resizeObserver = new ResizeObserver(callback);
+        resizeObserver.observe(element, options);
         return () => {
-            resizeObserverInstance.disconnect();
+            resizeObserver.disconnect();
         };
-    }, [target, callback]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [target, callback, ...Object.values(options ?? {})]);
 }

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+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';
@@ -9,6 +10,8 @@ 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';
+export * from './hooks/useContentRectState/useContentRectState.js';
 export * from './hooks/useEventListener/useEventListener.js';
 export * from './hooks/useForceRerender/useForceRerender.js';
 export * from './hooks/useHasFocus/useHasFocus.js';
@@ -34,6 +37,7 @@ 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 './utils/adjustFontSize/adjustFontSize.js';
 export * from './utils/arrayRef/arrayRef.js';
 export * from './utils/createTimeout/createTimeout.js';
 export * from './utils/isRefObject/isRefObject.js';

package/dist/index.js

@@ -1,4 +1,5 @@
 /* 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';
@@ -10,6 +11,8 @@ 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';
+export * from './hooks/useContentRectState/useContentRectState.js';
 export * from './hooks/useEventListener/useEventListener.js';
 export * from './hooks/useForceRerender/useForceRerender.js';
 export * from './hooks/useHasFocus/useHasFocus.js';
@@ -35,6 +38,7 @@ 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 './utils/adjustFontSize/adjustFontSize.js';
 export * from './utils/arrayRef/arrayRef.js';
 export * from './utils/createTimeout/createTimeout.js';
 export * from './utils/isRefObject/isRefObject.js';

package/dist/lifecycle/hooks/useMount/useMount.d.ts

@@ -3,10 +3,12 @@
  * @param callbackFunction function to be called when the component is mounted
  *
  * @example
- * ```
  * useMount(() => {
  *   console.log('component is mounted');
  * })
- * ```
+ *
+ * useMount(async () => {
+ *   console.log('component is mounted');
+ * })
  */
-export declare function useMount(callbackFunction: () => void): void;
+export declare function useMount(callbackFunction: () => void | PromiseLike<void>): void;

package/dist/lifecycle/hooks/useMount/useMount.js

@@ -4,13 +4,18 @@ import { useEffect } from 'react';
  * @param callbackFunction function to be called when the component is mounted
  *
  * @example
- * ```
  * useMount(() => {
  *   console.log('component is mounted');
  * })
- * ```
+ *
+ * useMount(async () => {
+ *   console.log('component is mounted');
+ * })
  */
 export function useMount(callbackFunction) {
+    useEffect(() => {
+        callbackFunction();
+    }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(callbackFunction, []);
+    []);
 }

package/dist/utils/adjustFontSize/adjustFontSize.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Adjusts the font size of an HTML element to fit within its parent container.
+ *
+ * @param element - The HTML element whose font size needs to be adjusted.
+ * @param minFontSize - The minimum font size in pixels. Default is 13 (minimal accessible font size).
+ * @param maxFontSize - The maximum font size in pixels.
+ * @param axis - The axis along which the font size should be adjusted. Can be 'x' or 'y'. Default is undefined (both axes).
+ *
+ * @throws {TypeError} If the parent element is null or if minFontSize is greater than maxFontSize.
+ */
+export declare function adjustFontSize(element: HTMLElement, minFontSize?: number, maxFontSize?: number, axis?: 'x' | 'y'): void;

package/dist/utils/adjustFontSize/adjustFontSize.js

@@ -0,0 +1,45 @@
+/**
+ * Adjusts the font size of an HTML element to fit within its parent container.
+ *
+ * @param element - The HTML element whose font size needs to be adjusted.
+ * @param minFontSize - The minimum font size in pixels. Default is 13 (minimal accessible font size).
+ * @param maxFontSize - The maximum font size in pixels.
+ * @param axis - The axis along which the font size should be adjusted. Can be 'x' or 'y'. Default is undefined (both axes).
+ *
+ * @throws {TypeError} If the parent element is null or if minFontSize is greater than maxFontSize.
+ */
+export function adjustFontSize(element, 
+// eslint-disable-next-line default-param-last
+minFontSize = 13, 
+// eslint-disable-next-line default-param-last
+maxFontSize, axis) {
+    if (maxFontSize && minFontSize > maxFontSize) {
+        throw new TypeError('minFontSize is greater than maxFontSize');
+    }
+    if (element.parentElement === null) {
+        throw new TypeError('Parent element is null');
+    }
+    // minimum font size in pixels
+    let min = minFontSize;
+    // maximum font size in pixels
+    let max = maxFontSize ?? Math.max(element.parentElement.clientWidth, element.parentElement.clientHeight);
+    let lastGoodFontSize;
+    while (min <= max) {
+        const mid = Math.floor((min + max) / 2);
+        element.style.fontSize = `${mid}px`;
+        const { width: elementWidthAfterLayout, height: elementHeightAfterLayout } = element.getBoundingClientRect();
+        const { width: parentElementWidthAfterLayout, height: parentElementHeightAfterLayout } = element.parentElement.getBoundingClientRect();
+        const exceedsWidth = axis !== 'y' && elementWidthAfterLayout > parentElementWidthAfterLayout;
+        const exceedsHeight = axis !== 'x' && elementHeightAfterLayout > parentElementHeightAfterLayout;
+        if (exceedsWidth || exceedsHeight) {
+            // If the text is too wide/tall, decrease the font size
+            max = mid - 1;
+        }
+        else {
+            // If the text fits, increase the font size
+            lastGoodFontSize = mid;
+            min = mid + 1;
+        }
+    }
+    element.style.fontSize = `${lastGoodFontSize}px`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mediamonks/react-kit",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A collection of React hooks, components, utilities that we use at Media.Monks",
   "keywords": [
     "react",
@@ -8,7 +8,10 @@
     "typescript",
     "hooks"
   ],
-  "repository": "git@github.com:mediamonks/react-kit.git",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/mediamonks/react-kit.git"
+  },
   "author": "frontend.monks",
   "license": "MIT",
   "types": "./dist/index.d.ts",