@antscorp/antsomi-ui 1.3.5-beta.26 → 1.3.5-beta.261

package/es/constants/theme.js

@@ -1,4 +1,4 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
 // Types
 import { theme } from 'antd';
 // Variables
@@ -7,12 +7,13 @@ const mapToken = defaultAlgorithm(defaultSeed);
 const { gold1, gold6 } = mapToken;
 export const THEME = {
     token: {
+        headerHeight: '57px',
         colorText: '#000000',
         colorTextBase: '#222222',
         colorTextDark: '#333333',
         colorTextPlaceholder: '#BEBEBE',
         colorTextDisabled: '#999999',
-        colorError: '#CF1825',
+        colorError: '#EF3340',
         colorWarning: '#faad14',
         colorPrimary: '#005fb8',
         colorTextHover: '#3a72b6',
@@ -20,7 +21,11 @@ export const THEME = {
         colorLinkHover: '#1B76CD',
         colorTextActive: '#e0ebf7',
         colorIcon: '#666666',
-        borderRadius: 3,
+        /* Border radius */
+        borderRadius: 10,
+        borderRadiusLG: 10,
+        borderRadiusXL: 10,
+        /* Font */
         fontFamily: 'Roboto',
         fontSize: 12,
         fontSizeMd: 14,
@@ -30,6 +35,8 @@ export const THEME = {
         blue: '#F2F9FF',
         blue0: '#f5f9fc',
         blue1_1: '#DEEFFE',
+        blue1_2: '#EAF1FB',
+        blue1_3: '#F6F8FC',
         blue1: '#B8CFE6',
         blue2: '#CAE5FE',
         blue3: '#81BCF4',
@@ -69,17 +76,22 @@ export const THEME = {
         gray5: '#d9d9d9',
         gold1,
         gold6,
-        scrollBarSize: '8px',
+        scrollBarSize: '4px',
+        /** Skeleton */
+        colorBgSkeleton: '#FCFDFF',
     },
 };
 THEME.components = {
     Button: {
+        borderRadius: 10,
+        // borderRadius: THEME.token?.borderRadiusLG,
         paddingContentHorizontal: 10,
         colorBorder: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue1,
         colorText: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary,
         colorBgTextHover: (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue,
         colorBgContainerDisabled: (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.bw6,
         colorTextDisabled: (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw0,
+        textHoverBg: '#F2F9FF',
     },
     Input: {
         controlHeight: 32,
@@ -95,13 +107,15 @@ THEME.components = {
     },
     Select: {
         borderRadius: 0,
-        borderRadiusLG: 0,
+        borderRadiusLG: 10,
         borderRadiusSM: 0,
         borderRadiusOuter: 0,
         borderRadiusXS: 0,
-        colorBorder: (_k = THEME.token) === null || _k === void 0 ? void 0 : _k.blue1,
+        optionActiveBg: '#F2F9FF',
+        optionSelectedBg: (_k = THEME.token) === null || _k === void 0 ? void 0 : _k.blue1_1,
+        colorBorder: (_l = THEME.token) === null || _l === void 0 ? void 0 : _l.blue1,
         controlItemBgActive: '#E0EBF7',
-        colorBgContainerDisabled: (_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw2,
+        colorBgContainerDisabled: (_m = THEME.token) === null || _m === void 0 ? void 0 : _m.bw2,
         fontSizeIcon: 14,
     },
     Tag: {
@@ -114,9 +128,9 @@ THEME.components = {
         borderRadiusOuter: 0,
         controlHeight: 30,
         borderRadiusXS: 0,
-        colorBorder: (_m = THEME.token) === null || _m === void 0 ? void 0 : _m.blue1,
+        colorBorder: (_o = THEME.token) === null || _o === void 0 ? void 0 : _o.blue1,
         controlItemBgActive: '#E0EBF7',
-        colorBgContainerDisabled: (_o = THEME.token) === null || _o === void 0 ? void 0 : _o.bw2,
+        colorBgContainerDisabled: (_p = THEME.token) === null || _p === void 0 ? void 0 : _p.bw2,
         // fontSizeIcon: 14,
     },
     DatePicker: {
@@ -125,19 +139,22 @@ THEME.components = {
         borderRadiusSM: 0,
         borderRadiusOuter: 0,
         borderRadiusXS: 0,
-        colorBorder: (_p = THEME.token) === null || _p === void 0 ? void 0 : _p.blue1,
+        colorBorder: (_q = THEME.token) === null || _q === void 0 ? void 0 : _q.blue1,
         controlItemBgActive: '#E0EBF7',
-        colorBgContainerDisabled: (_q = THEME.token) === null || _q === void 0 ? void 0 : _q.bw2,
+        colorBgContainerDisabled: (_r = THEME.token) === null || _r === void 0 ? void 0 : _r.bw2,
         fontSizeIcon: 14,
         controlHeight: 31,
     },
     Divider: {
         marginLG: 15,
         marginXL: 15,
-        colorSplit: (_r = THEME.token) === null || _r === void 0 ? void 0 : _r.accent3,
+        colorSplit: (_s = THEME.token) === null || _s === void 0 ? void 0 : _s.accent3,
     },
     Checkbox: {
         controlInteractiveSize: 18,
+        colorBorder: (_t = THEME.token) === null || _t === void 0 ? void 0 : _t.colorPrimary,
+        lineWidth: 2,
+        borderRadiusSM: 5,
     },
     Modal: {
         titleFontSize: 16,
@@ -148,7 +165,7 @@ THEME.components = {
         paddingMD: 0,
     },
     Tabs: {
-        colorPrimary: '#1F5FAC',
+        itemColor: (_u = THEME.token) === null || _u === void 0 ? void 0 : _u.bw8,
         horizontalItemPadding: '17px 30px',
         horizontalItemGutter: 0,
         lineWidthBold: 3,
@@ -156,6 +173,11 @@ THEME.components = {
         titleFontSizeLG: 14,
         titleFontSizeSM: 14,
         horizontalMargin: '0px',
+        colorBorderSecondary: '#E5E5E5',
+        lineHeight: 1.17,
+        lineHeightLG: 1.17,
+        lineHeightSM: 1.17,
+        itemHoverColor: (_v = THEME.token) === null || _v === void 0 ? void 0 : _v.colorPrimary,
     },
     Collapse: {
         headerBg: '#FFF',
@@ -163,11 +185,32 @@ THEME.components = {
         headerPadding: '15px 10px',
     },
     Switch: {
-        colorTextQuaternary: (_s = THEME.token) === null || _s === void 0 ? void 0 : _s.bw0,
-        colorTextTertiary: (_t = THEME.token) === null || _t === void 0 ? void 0 : _t.bw0,
+        colorTextQuaternary: (_w = THEME.token) === null || _w === void 0 ? void 0 : _w.bw0,
+        colorTextTertiary: (_x = THEME.token) === null || _x === void 0 ? void 0 : _x.bw0,
         handleSize: 12,
         handleSizeSM: 7,
         trackMinWidth: 30,
-        handleBg: (_u = THEME.token) === null || _u === void 0 ? void 0 : _u.colorPrimary,
+        handleBg: (_y = THEME.token) === null || _y === void 0 ? void 0 : _y.colorPrimary,
+    },
+    Popover: {
+        borderRadiusLG: 10,
+        // borderRadius: THEME.token?.borderRadiusLG,
+    },
+    Dropdown: {
+        borderRadiusLG: 10,
+        // borderRadius: THEME.token?.borderRadiusLG,
+        controlItemBgHover: '#F2F9FF',
+    },
+    Tooltip: {
+        colorBgSpotlight: (_z = THEME.token) === null || _z === void 0 ? void 0 : _z.bw8,
+    },
+    Menu: {
+        itemHoverBg: '#F2F9FF',
+        activeBarBorderWidth: 0,
+        itemMarginInline: 0,
+        itemMarginBlock: 0,
+        itemBorderRadius: 5,
     },
+    Form: {},
 };
+export const globalToken = theme.getDesignToken(THEME);

package/es/constants/variables.d.ts

@@ -0,0 +1,26 @@
+export declare const OBJECT_TYPES: {
+    readonly DASHBOARD: 1;
+    readonly JOURNEY_OVERVIEW: 2;
+    readonly SEGMENT: 3;
+    readonly BUSINESS_OBJECT: 4;
+    readonly VIEW: 5;
+    readonly DESTINATION: 6;
+    readonly EXPLORATION: 7;
+    readonly MEDIA_TEMPLATE: 8;
+    readonly EMAIL_TEMPLATE: 9;
+    readonly JOURNEY_TEMPLATE: 10;
+    readonly RICH_MENU_TEMPLATE: 11;
+};
+export declare const GET_LIST_TYPE: {
+    readonly OWNER: 1;
+    readonly SHARE_WITH_ME: 2;
+    readonly HAVE_ACCESS: 3;
+    readonly SELECTOR: 4;
+};
+export declare const APP_CODES: {
+    DATAFLOWS: string;
+};
+export declare const PORTALS_IDS: {
+    SANDBOX: number;
+    SANDBOX_76753: number;
+};

package/es/constants/variables.js

@@ -0,0 +1,27 @@
+export const OBJECT_TYPES = {
+    DASHBOARD: 1,
+    JOURNEY_OVERVIEW: 2,
+    SEGMENT: 3,
+    BUSINESS_OBJECT: 4,
+    VIEW: 5,
+    DESTINATION: 6,
+    EXPLORATION: 7,
+    MEDIA_TEMPLATE: 8,
+    EMAIL_TEMPLATE: 9,
+    JOURNEY_TEMPLATE: 10,
+    RICH_MENU_TEMPLATE: 11,
+};
+export const GET_LIST_TYPE = {
+    OWNER: 1,
+    SHARE_WITH_ME: 2,
+    HAVE_ACCESS: 3,
+    SELECTOR: 4,
+};
+/* APP_CODES */
+export const APP_CODES = {
+    DATAFLOWS: 'DATAFLOWS',
+};
+export const PORTALS_IDS = {
+    SANDBOX: 33167,
+    SANDBOX_76753: 76753,
+};

package/es/hooks/createEffectWithTarget .d.ts

@@ -0,0 +1,3 @@
+import type { DependencyList, EffectCallback, useEffect, useLayoutEffect } from 'react';
+import { BasicTarget } from '../utils/domTarget';
+export declare const createEffectWithTarget: (useEffectType: typeof useEffect | typeof useLayoutEffect) => (effect: EffectCallback, deps: DependencyList, target: BasicTarget<any> | BasicTarget<any>[]) => void;

package/es/hooks/createEffectWithTarget .js

@@ -0,0 +1,47 @@
+import { useRef } from 'react';
+// Hooks
+import { useUnmount } from './useUnmount';
+// Utils
+import { getTargetElement, depsAreSame } from '../utils/domTarget';
+export const createEffectWithTarget = (useEffectType) => {
+    /**
+     *
+     * @param effect
+     * @param deps
+     * @param target target should compare ref.current vs ref.current, dom vs dom, ()=>dom vs ()=>dom
+     */
+    const useEffectWithTarget = (effect, deps, target) => {
+        const hasInitRef = useRef(false);
+        const lastElementRef = useRef([]);
+        const lastDepsRef = useRef([]);
+        const unLoadRef = useRef();
+        useEffectType(() => {
+            var _a;
+            const targets = Array.isArray(target) ? target : [target];
+            const els = targets.map(item => getTargetElement(item));
+            // init run
+            if (!hasInitRef.current) {
+                hasInitRef.current = true;
+                lastElementRef.current = els;
+                lastDepsRef.current = deps;
+                unLoadRef.current = effect();
+                return;
+            }
+            if (els.length !== lastElementRef.current.length ||
+                !depsAreSame(lastElementRef.current, els) ||
+                !depsAreSame(lastDepsRef.current, deps)) {
+                (_a = unLoadRef.current) === null || _a === void 0 ? void 0 : _a.call(unLoadRef);
+                lastElementRef.current = els;
+                lastDepsRef.current = deps;
+                unLoadRef.current = effect();
+            }
+        });
+        useUnmount(() => {
+            var _a;
+            (_a = unLoadRef.current) === null || _a === void 0 ? void 0 : _a.call(unLoadRef);
+            // for react-refresh
+            hasInitRef.current = false;
+        });
+    };
+    return useEffectWithTarget;
+};

package/es/hooks/index.d.ts

@@ -5,3 +5,17 @@ export * from './useIntersectionObserver';
 export * from './useEffectOnlyOnce';
 export * from './useForceUpdate';
 export * from './useListingItemResize';
+export * from './useToggle';
+export * from './useIsFirstRender';
+export * from './useEffectDebugger';
+export * from './useIsomorphicLayoutEffect';
+export * from './useMediaQuery';
+export * from './useLatest';
+export * from './useDeepCompareEffectWithTarget';
+export * from './useUnmount';
+export * from './createEffectWithTarget ';
+export * from './useEffectWithTarget';
+export * from './useMutationObserver';
+export * from './useKeyEventCanvas';
+export * from './useDragEvent';
+export * from './useDropFile';

package/es/hooks/index.js

@@ -24,3 +24,17 @@ export * from './useIntersectionObserver';
 export * from './useEffectOnlyOnce';
 export * from './useForceUpdate';
 export * from './useListingItemResize';
+export * from './useToggle';
+export * from './useIsFirstRender';
+export * from './useEffectDebugger';
+export * from './useIsomorphicLayoutEffect';
+export * from './useMediaQuery';
+export * from './useLatest';
+export * from './useDeepCompareEffectWithTarget';
+export * from './useUnmount';
+export * from './createEffectWithTarget ';
+export * from './useEffectWithTarget';
+export * from './useMutationObserver';
+export * from './useKeyEventCanvas';
+export * from './useDragEvent';
+export * from './useDropFile';

package/es/hooks/useDeepCompareEffectWithTarget.d.ts

@@ -0,0 +1,3 @@
+import type { DependencyList, EffectCallback } from 'react';
+import { BasicTarget } from '../utils/domTarget';
+export declare const useDeepCompareEffectWithTarget: (effect: EffectCallback, deps: DependencyList, target: BasicTarget<any> | BasicTarget<any>[]) => void;

package/es/hooks/useDeepCompareEffectWithTarget.js

@@ -0,0 +1,14 @@
+// Libraries
+import { useRef } from 'react';
+import isEqual from 'react-fast-compare';
+// Hooks
+import { useEffectWithTarget } from './useEffectWithTarget';
+export const useDeepCompareEffectWithTarget = (effect, deps, target) => {
+    const ref = useRef();
+    const signalRef = useRef(0);
+    if (!isEqual(deps, ref.current)) {
+        ref.current = deps;
+        signalRef.current += 1;
+    }
+    useEffectWithTarget(effect, [signalRef.current], target);
+};

package/es/hooks/useDragEvent.d.ts

@@ -0,0 +1 @@
+export declare const useDragEvent: (keyEvent: 'dragenter' | 'dragexit' | 'dragover' | 'drop', selector: string, callback: (event: DragEvent) => void) => void;

package/es/hooks/useDragEvent.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+export const useDragEvent = (keyEvent, selector, callback) => {
+    useEffect(() => {
+        var _a;
+        const handleDragEvent = (event) => {
+            callback(event);
+        };
+        (_a = document.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.addEventListener(keyEvent, handleDragEvent);
+        return () => {
+            var _a;
+            (_a = document.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.removeEventListener(keyEvent, handleDragEvent);
+        };
+    }, [keyEvent, selector, callback]);
+};

package/es/hooks/useDropFile.d.ts

@@ -0,0 +1 @@
+export declare const useDropFile: (selector: string, callback: (event: DragEvent) => void) => void;

package/es/hooks/useDropFile.js

@@ -0,0 +1,20 @@
+import { useDragEvent } from './useDragEvent';
+export const useDropFile = (selector, callback) => {
+    useDragEvent('dragenter', selector, e => {
+        e.stopPropagation();
+        e.preventDefault();
+    });
+    useDragEvent('dragover', selector, e => {
+        e.stopPropagation();
+        e.preventDefault();
+    });
+    useDragEvent('dragexit', selector, e => {
+        e.stopPropagation();
+        e.preventDefault();
+    });
+    useDragEvent('drop', selector, e => {
+        e.stopPropagation();
+        e.preventDefault();
+        callback(e);
+    });
+};

package/es/hooks/useEffectDebugger.d.ts

@@ -0,0 +1,20 @@
+/**
+ *
+ * @param effectHook
+ * @param dependencies
+ * @param dependencyNames
+ *
+ * Example:
+    useEffectDebugger(() => {
+      // useEffect code here...
+    }, [dep1, dep2, dep3]);
+ *
+ * Output:
+    {
+      dep2: {
+        before: 'foo',
+        after: 'bar'
+      }
+    }
+ */
+export declare const useEffectDebugger: (effectHook: any, dependencies: any, dependencyNames?: never[]) => void;

package/es/hooks/useEffectDebugger.js

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import usePrevious from './usePrevious';
+/**
+ *
+ * @param effectHook
+ * @param dependencies
+ * @param dependencyNames
+ *
+ * Example:
+    useEffectDebugger(() => {
+      // useEffect code here...
+    }, [dep1, dep2, dep3]);
+ *
+ * Output:
+    {
+      dep2: {
+        before: 'foo',
+        after: 'bar'
+      }
+    }
+ */
+export const useEffectDebugger = (effectHook, dependencies, dependencyNames = []) => {
+    const previousDeps = usePrevious(dependencies);
+    const changedDeps = dependencies.reduce((accum, dependency, index) => {
+        if (dependency !== (previousDeps === null || previousDeps === void 0 ? void 0 : previousDeps[index])) {
+            const keyName = dependencyNames[index] || index;
+            return Object.assign(Object.assign({}, accum), { [keyName]: {
+                    before: previousDeps === null || previousDeps === void 0 ? void 0 : previousDeps[index],
+                    after: dependency,
+                } });
+        }
+        return accum;
+    }, {});
+    if (Object.keys(changedDeps).length) {
+        // eslint-disable-next-line no-console
+        console.log('[use-effect-debugger] ', changedDeps);
+    }
+    useEffect(effectHook, [effectHook, dependencies]);
+};

package/es/hooks/useEffectWithTarget.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useEffectWithTarget: (effect: import("react").EffectCallback, deps: import("react").DependencyList, target: any) => void;

package/es/hooks/useEffectWithTarget.js

@@ -0,0 +1,5 @@
+// Libraries
+import { useEffect } from 'react';
+// Hooks
+import { createEffectWithTarget } from './createEffectWithTarget ';
+export const useEffectWithTarget = createEffectWithTarget(useEffect);

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/useKeyEventCanvas.d.ts

@@ -0,0 +1 @@
+export declare const useKeyEventCanvas: (keyEvent: 'keydown' | 'keyup', callback: (event: KeyboardEvent) => void) => void;

package/es/hooks/useKeyEventCanvas.js

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from 'react';
+export const useKeyEventCanvas = (keyEvent, callback) => {
+    const lastDownTarget = useRef(null);
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (lastDownTarget.current.localName !== 'canvas')
+                return;
+            callback(event);
+        };
+        const setLastDownTarget = event => {
+            lastDownTarget.current = event.target;
+        };
+        document.addEventListener('mousedown', setLastDownTarget);
+        document.addEventListener(keyEvent, handleKeyDown);
+        return () => {
+            document.removeEventListener(keyEvent, handleKeyDown);
+            document.removeEventListener('mousedown', setLastDownTarget);
+        };
+    }, [keyEvent, callback]);
+};

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.js

@@ -45,6 +45,31 @@ export const useListingItemResize = (props) => {
         }
         return DEFAULT_RATIO;
     }, [containerWidth, gap, initialWidth, itemPerRow]);
+    // template-listing-wrapper
+    // Hooks
+    // useMutationObserver(
+    //   mutationsList => {
+    //     const templateListingElements = mutationsList?.filter(item =>
+    //       (item.target as Element)?.classList?.contains('template-listing-wrapper'),
+    //     );
+    //     // console.log({ templateListingElements, mutationsList });
+    //     // if (timeoutAfterChange) {
+    //     //   clearTimeout(timeoutAfterChange.current);
+    //     // }
+    //     // timeoutAfterChange.current = setTimeout(() => {
+    //     //   forceUpdate();
+    //     // }, 500);
+    //   },
+    //   ref,
+    //   {
+    //     attributes: true,
+    //     childList: true,
+    //     subtree: true,
+    //     characterData: true,
+    //     attributeOldValue: true,
+    //     characterDataOldValue: true,
+    //   },
+    // );
     /* Events */
     window.addEventListener('resize', () => {
         if (timeoutAfterChange) {
@@ -52,7 +77,7 @@ export const useListingItemResize = (props) => {
         }
         timeoutAfterChange.current = setTimeout(() => {
             forceUpdate();
-        }, 500);
+        }, 200);
     });
     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/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;