@antscorp/antsomi-ui 1.3.5-beta.31 → 1.3.5-beta.310

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, _0;
 // 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,24 +76,31 @@ 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,
+        colorBgContainerDisabled: (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw6,
+        colorTextDisabled: (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.bw0,
+        textHoverBg: '#F2F9FF',
+        /* Text type */
+        colorBgTextHover: (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue,
+        colorBgTextActive: (_f = THEME.token) === null || _f === void 0 ? void 0 : _f.blue1_1,
     },
     Input: {
         controlHeight: 32,
-        colorBgContainerDisabled: (_f = THEME.token) === null || _f === void 0 ? void 0 : _f.bw2,
-        colorTextDisabled: (_g = THEME.token) === null || _g === void 0 ? void 0 : _g.bw10,
-        colorBorder: (_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue1,
-        colorTextPlaceholder: (_j = THEME.token) === null || _j === void 0 ? void 0 : _j.bw6,
+        colorBgContainerDisabled: (_g = THEME.token) === null || _g === void 0 ? void 0 : _g.bw2,
+        colorTextDisabled: (_h = THEME.token) === null || _h === void 0 ? void 0 : _h.bw10,
+        colorBorder: (_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue1,
+        colorTextPlaceholder: (_k = THEME.token) === null || _k === void 0 ? void 0 : _k.bw6,
         borderRadius: 0,
         borderRadiusLG: 0,
         borderRadiusSM: 0,
@@ -95,14 +109,17 @@ 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: (_l = THEME.token) === null || _l === void 0 ? void 0 : _l.blue1_1,
+        colorBorder: (_m = THEME.token) === null || _m === void 0 ? void 0 : _m.blue1,
         controlItemBgActive: '#E0EBF7',
-        colorBgContainerDisabled: (_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw2,
+        colorBgContainerDisabled: (_o = THEME.token) === null || _o === void 0 ? void 0 : _o.bw2,
         fontSizeIcon: 14,
+        paddingSM: 6,
     },
     Tag: {
         colorBgContainer: 'red',
@@ -114,9 +131,9 @@ THEME.components = {
         borderRadiusOuter: 0,
         controlHeight: 30,
         borderRadiusXS: 0,
-        colorBorder: (_m = THEME.token) === null || _m === void 0 ? void 0 : _m.blue1,
+        colorBorder: (_p = THEME.token) === null || _p === void 0 ? void 0 : _p.blue1,
         controlItemBgActive: '#E0EBF7',
-        colorBgContainerDisabled: (_o = THEME.token) === null || _o === void 0 ? void 0 : _o.bw2,
+        colorBgContainerDisabled: (_q = THEME.token) === null || _q === void 0 ? void 0 : _q.bw2,
         // fontSizeIcon: 14,
     },
     DatePicker: {
@@ -125,19 +142,22 @@ THEME.components = {
         borderRadiusSM: 0,
         borderRadiusOuter: 0,
         borderRadiusXS: 0,
-        colorBorder: (_p = THEME.token) === null || _p === void 0 ? void 0 : _p.blue1,
+        colorBorder: (_r = THEME.token) === null || _r === void 0 ? void 0 : _r.blue1,
         controlItemBgActive: '#E0EBF7',
-        colorBgContainerDisabled: (_q = THEME.token) === null || _q === void 0 ? void 0 : _q.bw2,
+        colorBgContainerDisabled: (_s = THEME.token) === null || _s === void 0 ? void 0 : _s.bw2,
         fontSizeIcon: 14,
         controlHeight: 31,
     },
     Divider: {
         marginLG: 15,
         marginXL: 15,
-        colorSplit: (_r = THEME.token) === null || _r === void 0 ? void 0 : _r.accent3,
+        colorSplit: (_t = THEME.token) === null || _t === void 0 ? void 0 : _t.accent3,
     },
     Checkbox: {
         controlInteractiveSize: 18,
+        colorBorder: (_u = THEME.token) === null || _u === void 0 ? void 0 : _u.colorPrimary,
+        lineWidth: 2,
+        borderRadiusSM: 5,
     },
     Modal: {
         titleFontSize: 16,
@@ -148,7 +168,7 @@ THEME.components = {
         paddingMD: 0,
     },
     Tabs: {
-        colorPrimary: '#1F5FAC',
+        itemColor: (_v = THEME.token) === null || _v === void 0 ? void 0 : _v.bw8,
         horizontalItemPadding: '17px 30px',
         horizontalItemGutter: 0,
         lineWidthBold: 3,
@@ -156,6 +176,11 @@ THEME.components = {
         titleFontSizeLG: 14,
         titleFontSizeSM: 14,
         horizontalMargin: '0px',
+        colorBorderSecondary: '#E5E5E5',
+        lineHeight: 1.17,
+        lineHeightLG: 1.17,
+        lineHeightSM: 1.17,
+        itemHoverColor: (_w = THEME.token) === null || _w === void 0 ? void 0 : _w.colorPrimary,
     },
     Collapse: {
         headerBg: '#FFF',
@@ -163,11 +188,33 @@ 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: (_x = THEME.token) === null || _x === void 0 ? void 0 : _x.bw0,
+        colorTextTertiary: (_y = THEME.token) === null || _y === void 0 ? void 0 : _y.bw0,
         handleSize: 12,
         handleSizeSM: 7,
         trackMinWidth: 30,
-        handleBg: (_u = THEME.token) === null || _u === void 0 ? void 0 : _u.colorPrimary,
+        handleBg: (_z = THEME.token) === null || _z === void 0 ? void 0 : _z.colorPrimary,
+    },
+    Popover: {
+        borderRadiusLG: 10,
+        // borderRadius: THEME.token?.borderRadiusLG,
+    },
+    Dropdown: {
+        borderRadiusLG: 10,
+        // borderRadius: THEME.token?.borderRadiusLG,
+        controlItemBgHover: '#F2F9FF',
+    },
+    Tooltip: {
+        colorBgSpotlight: (_0 = THEME.token) === null || _0 === void 0 ? void 0 : _0.bw8,
+    },
+    Menu: {
+        itemHoverBg: '#F2F9FF',
+        activeBarBorderWidth: 0,
+        itemMarginInline: 0,
+        itemMarginBlock: 5,
+        itemBorderRadius: 5,
+        subMenuItemBg: 'transparent',
     },
+    Form: {},
 };
+export const globalToken = theme.getDesignToken(THEME);

package/es/constants/variables.d.ts

@@ -11,3 +11,22 @@ export declare const OBJECT_TYPES: {
     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;
+    APP_ANTALYSER: string;
+};
+export declare const PORTALS_IDS: {
+    SANDBOX: number;
+    SANDBOX_76753: number;
+};
+export declare const UI_SIZE: {
+    SMALL: string;
+    MEDIUM: string;
+    LARGE: string;
+};

package/es/constants/variables.js

@@ -11,3 +11,23 @@ export const OBJECT_TYPES = {
     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',
+    APP_ANTALYSER: 'APP_ANTALYSER',
+};
+export const PORTALS_IDS = {
+    SANDBOX: 33167,
+    SANDBOX_76753: 76753,
+};
+export const UI_SIZE = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large',
+};

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,20 @@ 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';
+export * from './useEventListener';
+export * from './useDebounceCallback';
+export * from './useWindowSize';

package/es/hooks/index.js

@@ -24,3 +24,20 @@ 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';
+export * from './useEventListener';
+export * from './useDebounceCallback';
+export * from './useWindowSize';

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

@@ -0,0 +1,6 @@
+import type { RefObject } from 'react';
+declare function useEventListener<K extends keyof MediaQueryListEventMap>(eventName: K, handler: (event: MediaQueryListEventMap[K]) => void, element: RefObject<MediaQueryList>, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: undefined, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListener<K extends keyof HTMLElementEventMap & keyof SVGElementEventMap, T extends Element = K extends keyof HTMLElementEventMap ? HTMLDivElement : SVGElement>(eventName: K, handler: ((event: HTMLElementEventMap[K]) => void) | ((event: SVGElementEventMap[K]) => void), element: RefObject<T>, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K, handler: (event: DocumentEventMap[K]) => void, element: RefObject<Document>, options?: boolean | AddEventListenerOptions): void;
+export { useEventListener };

package/es/hooks/useEventListener.js

@@ -0,0 +1,28 @@
+// Libraries
+import { useEffect, useRef } from 'react';
+// Hooks
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+function useEventListener(eventName, handler, element, options) {
+    // Create a ref that stores handler
+    const savedHandler = useRef(handler);
+    useIsomorphicLayoutEffect(() => {
+        savedHandler.current = handler;
+    }, [handler]);
+    useEffect(() => {
+        var _a;
+        // Define the listening target
+        const targetElement = (_a = element === null || element === void 0 ? void 0 : element.current) !== null && _a !== void 0 ? _a : window;
+        if (!(targetElement && targetElement.addEventListener))
+            return;
+        // Create event listener that calls handler function stored in ref
+        const listener = event => {
+            savedHandler.current(event);
+        };
+        targetElement.addEventListener(eventName, listener, options);
+        // Remove event listener on cleanup
+        return () => {
+            targetElement.removeEventListener(eventName, listener, options);
+        };
+    }, [eventName, element, options]);
+}
+export { useEventListener };

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

@@ -1,19 +1,14 @@
 // Libraries
-import { useMemo, useRef } from 'react';
+import { useEffect, 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
      */
@@ -45,14 +40,26 @@ export const useListingItemResize = (props) => {
         }
         return DEFAULT_RATIO;
     }, [containerWidth, gap, initialWidth, itemPerRow]);
-    /* Events */
-    window.addEventListener('resize', () => {
-        if (timeoutAfterChange) {
-            clearTimeout(timeoutAfterChange.current);
-        }
-        timeoutAfterChange.current = setTimeout(() => {
-            forceUpdate();
-        }, 500);
-    });
+    useEffect(() => {
+        var _a;
+        const element = (_a = document.getElementsByClassName('template-listing-container')) === null || _a === void 0 ? void 0 : _a[0];
+        let timeoutAfterChange = null;
+        const handleResize = () => {
+            if (timeoutAfterChange) {
+                clearTimeout(timeoutAfterChange);
+            }
+            timeoutAfterChange = setTimeout(() => {
+                forceUpdate();
+            }, 0);
+        };
+        const resizeObserver = new ResizeObserver(handleResize);
+        if (element)
+            resizeObserver.observe(element);
+        return () => {
+            if (timeoutAfterChange) {
+                clearTimeout(timeoutAfterChange);
+            }
+        };
+    }, [forceUpdate]);
     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 {};