@antscorp/antsomi-ui 1.3.5-beta.2 → 1.3.5-beta.200

package/es/hooks/useIntersectionObserver.d.ts

@@ -0,0 +1,57 @@
+import type { RefObject } from 'react';
+type ObserverCallback = (isIntersecting: boolean, entry: IntersectionObserverEntry) => void;
+/**
+ * Represents the options for configuring the Intersection Observer.
+ * @interface IntersectionObserverOptions
+ * @property {number | number[]} [threshold=0] - A threshold indicating the percentage of the target's visibility needed to trigger the callback.
+ * @property {Element | Document | null} [root=null] - The element that is used as the viewport for checking visibility of the target.
+ * @property {string} [rootMargin='0%'] - A margin around the root.
+ * @property {boolean} [freezeOnceVisible=false] - If true, freezes the intersection state once the element becomes visible.
+ * @property {ObserverCallback} [onChange] - A callback function to be invoked when the intersection state changes.
+ * @property {boolean} [initialIsIntersecting=false] - The initial state of the intersection.
+ */
+interface IntersectionObserverOptions extends IntersectionObserverInit {
+    freezeOnceVisible?: boolean;
+    onChange?: ObserverCallback;
+    initialIsIntersecting?: boolean;
+}
+/** Supports both array and object destructing */
+type IntersectionResult = [
+    (node?: Element | null) => void,
+    boolean,
+    IntersectionObserverEntry | undefined
+] & {
+    ref: (node?: Element | null) => void;
+    isIntersecting: boolean;
+    entry?: IntersectionObserverEntry;
+};
+/**
+ * Custom hook for tracking the intersection of a DOM element with its containing element or the viewport.
+ * @param {IntersectionObserverOptions} options - The options for the Intersection Observer.
+ * @returns {IntersectionResult} The ref callback, a boolean indicating if the element is intersecting, and the intersection observer entry.
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-intersection-observer)
+ * @see [MDN Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+ * @example
+ * // Example 1
+ * const [ref, isIntersecting, entry] = useIntersectionObserver({ threshold: 0.5 });
+ *
+ * // Example 2
+ * const { ref, isIntersecting, entry } = useIntersectionObserver({ threshold: 0.5 });
+ */
+export declare function useIntersectionObserver(options: IntersectionObserverOptions): IntersectionResult;
+/**
+ * @deprecated Use the new signature with an unique option object instead.
+ * Custom hook for tracking the intersection of a DOM element with its containing element or the viewport.
+ * @param {RefObject<Element>} elementRef - The ref object for the DOM element to observe.
+ * @param {IntersectionObserverOptions} [options] - The options for the Intersection Observer (optional).
+ * @returns {IntersectionObserverEntry | undefined} The intersection observer entry representing the state of the intersection.
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-intersection-observer)
+ * @see [MDN Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+ * @example
+ * const targetRef = useRef<HTMLDivElement>(null);
+ * const options = { threshold: 0.5 };
+ * const entry = useIntersectionObserver(targetRef, options);
+ * // Access the intersection details from the entry variable.
+ */
+export declare function useIntersectionObserver(elementRef: RefObject<Element>, legacyOptions: IntersectionObserverOptions): IntersectionObserverEntry | undefined;
+export {};

package/es/hooks/useIntersectionObserver.js

@@ -0,0 +1,97 @@
+/* eslint-disable prefer-destructuring */
+// Libraries
+import { useEffect, useRef, useState } from 'react';
+/**
+ * Custom hook for tracking the intersection of a DOM element with its containing element or the viewport.
+ * @param {IntersectionObserverOptions | RefObject<Element>} optionsOrLegacyRef - The options for the Intersection Observer.
+ * @param {?IntersectionObserverOptions} [legacyOptions] - The options for the Intersection Observer (optional, legacy).
+ * @returns {NewIntersectionResult | IntersectionObserverEntry | undefined} The ref callback, a boolean indicating if the element is intersecting, and the intersection observer entry.
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-intersection-observer)
+ * @see [MDN Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+ * @example
+ * // Example 1
+ * const [ref, isIntersecting, entry] = useIntersectionObserver({ threshold: 0.5 });
+ *
+ * // Example 2
+ * const { ref, isIntersecting, entry } = useIntersectionObserver({ threshold: 0.5 });
+ */
+export function useIntersectionObserver(optionsOrLegacyRef, legacyOptions) {
+    var _a;
+    // TODO: Remove this mess when the old signature is removed.
+    const isLegacySignature = 'current' in optionsOrLegacyRef;
+    const options = isLegacySignature ? legacyOptions : optionsOrLegacyRef;
+    const { threshold = 0, root = null, rootMargin = '0%', freezeOnceVisible = false, initialIsIntersecting = false, } = options !== null && options !== void 0 ? options : {};
+    const [newRef, setNewRef] = useState(null);
+    const ref = isLegacySignature ? optionsOrLegacyRef.current : newRef;
+    const [state, setState] = useState(() => ({
+        isIntersecting: initialIsIntersecting,
+        entry: undefined,
+    }));
+    const callbackRef = useRef();
+    callbackRef.current = options === null || options === void 0 ? void 0 : options.onChange;
+    const frozen = ((_a = state.entry) === null || _a === void 0 ? void 0 : _a.isIntersecting) && freezeOnceVisible;
+    useEffect(() => {
+        // Ensure we have a ref to observe
+        if (!ref)
+            return;
+        // Ensure the browser supports the Intersection Observer API
+        if (!('IntersectionObserver' in window))
+            return;
+        // Skip if frozen
+        if (frozen)
+            return;
+        let unobserve;
+        const observer = new IntersectionObserver((entries) => {
+            const thresholds = Array.isArray(observer.thresholds)
+                ? observer.thresholds
+                : [observer.thresholds];
+            entries.forEach(entry => {
+                const isIntersecting = entry.isIntersecting &&
+                    thresholds.some(threshold => entry.intersectionRatio >= threshold);
+                setState({ isIntersecting, entry });
+                if (callbackRef.current) {
+                    callbackRef.current(isIntersecting, entry);
+                }
+                if (isIntersecting && freezeOnceVisible && unobserve) {
+                    unobserve();
+                    unobserve = undefined;
+                }
+            });
+        }, { threshold, root, rootMargin });
+        observer.observe(ref);
+        return () => {
+            observer.disconnect();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        ref,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        JSON.stringify(threshold),
+        root,
+        rootMargin,
+        frozen,
+        freezeOnceVisible,
+    ]);
+    // ensures that if the observed element changes, the intersection observer is reinitialized
+    const prevRef = useRef(null);
+    useEffect(() => {
+        var _a;
+        if (!ref &&
+            ((_a = state.entry) === null || _a === void 0 ? void 0 : _a.target) &&
+            !freezeOnceVisible &&
+            !frozen &&
+            prevRef.current !== state.entry.target) {
+            prevRef.current = state.entry.target;
+            setState({ isIntersecting: initialIsIntersecting, entry: undefined });
+        }
+    }, [ref, state.entry, freezeOnceVisible, frozen, initialIsIntersecting]);
+    if (isLegacySignature) {
+        return state.entry;
+    }
+    const result = [setNewRef, !!state.isIntersecting, state.entry];
+    // Support object destructuring, by adding the specific values.
+    result.ref = result[0];
+    result.isIntersecting = result[1];
+    result.entry = result[2];
+    return result;
+}

package/es/hooks/useIsFirstRender.d.ts

@@ -0,0 +1 @@
+export declare const useIsFirstRender: () => boolean;

package/es/hooks/useIsFirstRender.js

@@ -0,0 +1,9 @@
+import { useRef } from 'react';
+export const useIsFirstRender = () => {
+    const isFirstRender = useRef(true);
+    if (isFirstRender.current) {
+        isFirstRender.current = false;
+        return true;
+    }
+    return false;
+};

package/es/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/es/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,2 @@
+import { useEffect, useLayoutEffect } from 'react';
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/es/hooks/useLatest.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useLatest: <T>(value: T) => import("react").MutableRefObject<T>;

package/es/hooks/useLatest.js

@@ -0,0 +1,7 @@
+// Libraries
+import { useRef } from 'react';
+export const useLatest = (value) => {
+    const ref = useRef(value);
+    ref.current = value;
+    return ref;
+};

package/es/hooks/useListingItemResize.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface ComponentSizeProps {
+    initialWidth: number;
+    gap: number;
+}
+export declare const useListingItemResize: (props: ComponentSizeProps) => {
+    ref: import("react").MutableRefObject<any>;
+    itemPerRow: number | undefined;
+    ratio: number;
+    gap: number;
+};
+export {};

package/es/hooks/useListingItemResize.js

@@ -0,0 +1,58 @@
+// Libraries
+import { useMemo, useRef } from 'react';
+import { useForceUpdate } from '@antscorp/antsomi-ui/es/hooks';
+import { isNumber } from 'lodash';
+const DEFAULT_RATIO = 1;
+export const useListingItemResize = (props) => {
+    var _a;
+    const { initialWidth, gap } = props;
+    // Ref
+    const ref = useRef(null);
+    const timeoutAfterChange = useRef(null);
+    // Hooks
+    const forceUpdate = useForceUpdate();
+    /* Variables */
+    const containerWidth = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+    /* Memo */
+    /**
+     * The number of items per row to display in the container
+     */
+    const itemPerRow = useMemo(() => {
+        if (isNumber(containerWidth)) {
+            /**
+             * The temporary number of items per row that the container is able to contain
+             */
+            const tempItemPerRow = Math.floor(containerWidth / initialWidth);
+            const totalGapWidth = gap * (tempItemPerRow - 1);
+            /**
+             * Check if the container is able to contain the total items with @initialWidth including the total @gap size
+             */
+            const isPossibleContain = containerWidth >= tempItemPerRow * initialWidth + totalGapWidth;
+            /**
+             * If it doesn't, reduce the @itemPerRow by 1
+             */
+            return isPossibleContain ? tempItemPerRow : tempItemPerRow - 1;
+        }
+    }, [containerWidth, gap, initialWidth]);
+    /**
+     * The ratio of the new width and height to the initial length and height
+     */
+    const ratio = useMemo(() => {
+        if (isNumber(containerWidth) && isNumber(itemPerRow)) {
+            const totalGapWidth = gap * (itemPerRow - 1);
+            const newWidth = (containerWidth - totalGapWidth) / itemPerRow;
+            return newWidth / initialWidth;
+        }
+        return DEFAULT_RATIO;
+    }, [containerWidth, gap, initialWidth, itemPerRow]);
+    /* Events */
+    window.addEventListener('resize', () => {
+        if (timeoutAfterChange) {
+            clearTimeout(timeoutAfterChange.current);
+        }
+        timeoutAfterChange.current = setTimeout(() => {
+            forceUpdate();
+        }, 500);
+    });
+    return { ref, itemPerRow, ratio, gap };
+};

package/es/hooks/useMediaQuery.d.ts

@@ -0,0 +1,6 @@
+type UseMediaQueryOptions = {
+    defaultValue?: boolean;
+    initializeWithValue?: boolean;
+};
+export declare function useMediaQuery(query: string, { defaultValue, initializeWithValue }?: UseMediaQueryOptions): boolean;
+export {};

package/es/hooks/useMediaQuery.js

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+const IS_SERVER = typeof window === 'undefined';
+export function useMediaQuery(query, { defaultValue = false, initializeWithValue = true } = {}) {
+    const getMatches = (query) => {
+        if (IS_SERVER) {
+            return defaultValue;
+        }
+        return window.matchMedia(query).matches;
+    };
+    const [matches, setMatches] = useState(() => {
+        if (initializeWithValue) {
+            return getMatches(query);
+        }
+        return defaultValue;
+    });
+    // Handles the change event of the media query.
+    function handleChange() {
+        setMatches(getMatches(query));
+    }
+    useIsomorphicLayoutEffect(() => {
+        const matchMedia = window.matchMedia(query);
+        // Triggered at the first client-side load and if query changes
+        handleChange();
+        // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
+        if (matchMedia.addListener) {
+            matchMedia.addListener(handleChange);
+        }
+        else {
+            matchMedia.addEventListener('change', handleChange);
+        }
+        return () => {
+            if (matchMedia.removeListener) {
+                matchMedia.removeListener(handleChange);
+            }
+            else {
+                matchMedia.removeEventListener('change', handleChange);
+            }
+        };
+    }, [query]);
+    return matches;
+}

package/es/hooks/useMutationObserver.d.ts

@@ -0,0 +1,2 @@
+import { BasicTarget } from '../utils/domTarget';
+export declare const useMutationObserver: (callback: MutationCallback, target: BasicTarget, options?: MutationObserverInit) => void;

package/es/hooks/useMutationObserver.js

@@ -0,0 +1,19 @@
+// Utils
+import { getTargetElement } from '../utils/domTarget';
+// Hooks
+import { useDeepCompareEffectWithTarget } from './useDeepCompareEffectWithTarget';
+import { useLatest } from './useLatest';
+export const useMutationObserver = (callback, target, options = {}) => {
+    const callbackRef = useLatest(callback);
+    useDeepCompareEffectWithTarget(() => {
+        const element = getTargetElement(target);
+        if (!element) {
+            return;
+        }
+        const observer = new MutationObserver(callbackRef.current);
+        observer.observe(element, options);
+        return () => {
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+        };
+    }, [options], target);
+};

package/es/hooks/useScrollToEnd.d.ts

@@ -0,0 +1 @@
+export declare const useScrollToEnd: (containerRef: React.RefObject<HTMLDivElement>, callback: () => void) => boolean;

package/es/hooks/useScrollToEnd.js

@@ -0,0 +1,30 @@
+import { useState, useEffect, useCallback } from 'react';
+export const useScrollToEnd = (containerRef, callback) => {
+    const [isAtEnd, setIsAtEnd] = useState(false);
+    const handleScroll = useCallback(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        const { clientHeight, scrollHeight, scrollTop } = container;
+        console.log({ clientHeight, scrollHeight, scrollTop });
+        const isScrolledToEnd = scrollTop + clientHeight >= scrollHeight;
+        setIsAtEnd(isScrolledToEnd);
+    }, [containerRef]);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        container.addEventListener('scroll', handleScroll);
+        return () => {
+            container.removeEventListener('scroll', handleScroll);
+        };
+    }, [containerRef, handleScroll]);
+    useEffect(() => {
+        if (isAtEnd) {
+            callback();
+        }
+    }, [isAtEnd, callback]);
+    return isAtEnd;
+};

package/es/hooks/useToggle.d.ts

@@ -0,0 +1,2 @@
+import type { Dispatch, SetStateAction } from 'react';
+export declare function useToggle(defaultValue?: boolean): [boolean, (value?: boolean) => void, Dispatch<SetStateAction<boolean>>];

package/es/hooks/useToggle.js

@@ -0,0 +1,8 @@
+import { useCallback, useState } from 'react';
+export function useToggle(defaultValue) {
+    const [value, setValue] = useState(!!defaultValue);
+    const toggle = useCallback((value) => {
+        setValue(x => (typeof value === 'boolean' ? value : !x));
+    }, []);
+    return [value, toggle, setValue];
+}

package/es/hooks/useUnmount.d.ts

@@ -0,0 +1 @@
+export declare const useUnmount: (fn: () => void) => void;

package/es/hooks/useUnmount.js

@@ -0,0 +1,18 @@
+// Libraries
+import { useEffect } from 'react';
+import { isFunction } from 'lodash';
+// Hooks
+import { useLatest } from './useLatest';
+// Constants
+import { isDev } from '../config';
+export const useUnmount = (fn) => {
+    if (isDev) {
+        if (!isFunction(fn)) {
+            console.error(`useUnmount expected parameter is a function, got ${typeof fn}`);
+        }
+    }
+    const fnRef = useLatest(fn);
+    useEffect(() => () => {
+        fnRef.current();
+    }, [fnRef]);
+};

package/es/index.d.ts

@@ -1 +1,6 @@
 export * from './components';
+export * from './types';
+export * from './queries';
+export * from './providers';
+export { QUERY_KEYS } from './constants';
+export { snakeCaseToCamelCase, camelCaseToSnakeCase, getCategoriesFromObjectTemplate, } from './utils';

package/es/index.js

@@ -1 +1,6 @@
 export * from './components';
+export * from './types';
+export * from './queries';
+export * from './providers';
+export { QUERY_KEYS } from './constants';
+export { snakeCaseToCamelCase, camelCaseToSnakeCase, getCategoriesFromObjectTemplate, } from './utils';