@antscorp/antsomi-ui 1.3.3-beta.86 → 1.3.3-beta.87

package/es/constants/queries.d.ts

@@ -0,0 +1,14 @@
+export declare const QUERY_KEYS: {
+    GET_LIST_EVENT_ATTR: string;
+    GET_LIST_EVENT_BY_SOURCE: string;
+    GET_LIST_SOURCE_BY_EVENT: string;
+    GET_LIST_ALL_EVENT: string;
+    GET_LIST_BO: string;
+    GET_EVENT_ATTRIBUTE_BO: string;
+    GET_LIST_PROMOTION_CODE_ATTR: string;
+    GET_EVENT_TRACKING_ATTRIBUTES: string;
+    GET_LIST_DYNAMIC_CONTENT_ATTR: string;
+    GET_LIST_PROMOTION_POOL: string;
+    GET_LIST_CUSTOM: string;
+    GET_SAVE_CUSTOM_FUNCTION: string;
+};

package/es/constants/queries.js

@@ -0,0 +1,21 @@
+export const QUERY_KEYS = {
+    // Event attr
+    GET_LIST_EVENT_ATTR: 'GET_LIST_EVENT_ATTR',
+    GET_LIST_EVENT_BY_SOURCE: 'GET_LIST_EVENT_BY_SOURCE',
+    GET_LIST_SOURCE_BY_EVENT: 'GET_SOURCE_BY_EVENT',
+    GET_LIST_ALL_EVENT: 'GET_LIST_ALL_EVENT',
+    // BUSINESS OBJECT
+    GET_LIST_BO: 'GET_LIST_BO',
+    GET_EVENT_ATTRIBUTE_BO: 'GET_EVENT_ATTRIBUTE_BO',
+    // Promotion Code Attr
+    GET_LIST_PROMOTION_CODE_ATTR: 'GET_LIST_PROMOTION_CODE_ATTR',
+    // Event tracking attributes
+    GET_EVENT_TRACKING_ATTRIBUTES: 'GET_EVENT_TRACKING_ATTRIBUTES',
+    // Dynamic content Attr
+    GET_LIST_DYNAMIC_CONTENT_ATTR: 'GET_LIST_DYNAMIC_CONTENT_ATTR',
+    // Event Pool
+    GET_LIST_PROMOTION_POOL: 'GET_LIST_PROMOTION_POOL',
+    // Custom Function
+    GET_LIST_CUSTOM: 'GET_LIST_CUSTOM',
+    GET_SAVE_CUSTOM_FUNCTION: 'GET_SAVE_CUSTOM_FUNCTION',
+};

package/es/constants/richMenu.d.ts

@@ -0,0 +1,19 @@
+export declare const AREA_LAYOUT_KEYS: {
+    readonly LAYOUT_1: "LAYOUT_1";
+    readonly LAYOUT_2: "LAYOUT_2";
+    readonly LAYOUT_3: "LAYOUT_3";
+    readonly LAYOUT_4: "LAYOUT_4";
+    readonly LAYOUT_5: "LAYOUT_5";
+    readonly LAYOUT_6: "LAYOUT_6";
+    readonly LAYOUT_7: "LAYOUT_7";
+    readonly LAYOUT_8: "LAYOUT_8";
+    readonly LAYOUT_9: "LAYOUT_9";
+    readonly LAYOUT_10: "LAYOUT_10";
+    readonly LAYOUT_11: "LAYOUT_11";
+    readonly LAYOUT_12: "LAYOUT_12";
+};
+export declare const BLOCK_KEYS: {
+    readonly RICH_MENU: "RICH_MENU";
+    readonly CELL_ACTION: "CELL_ACTION";
+    readonly CELL_IMAGE: "CELL_IMAGE";
+};

package/es/constants/richMenu.js

@@ -0,0 +1,19 @@
+export const AREA_LAYOUT_KEYS = {
+    LAYOUT_1: 'LAYOUT_1',
+    LAYOUT_2: 'LAYOUT_2',
+    LAYOUT_3: 'LAYOUT_3',
+    LAYOUT_4: 'LAYOUT_4',
+    LAYOUT_5: 'LAYOUT_5',
+    LAYOUT_6: 'LAYOUT_6',
+    LAYOUT_7: 'LAYOUT_7',
+    LAYOUT_8: 'LAYOUT_8',
+    LAYOUT_9: 'LAYOUT_9',
+    LAYOUT_10: 'LAYOUT_10',
+    LAYOUT_11: 'LAYOUT_11',
+    LAYOUT_12: 'LAYOUT_12',
+};
+export const BLOCK_KEYS = {
+    RICH_MENU: 'RICH_MENU',
+    CELL_ACTION: 'CELL_ACTION',
+    CELL_IMAGE: 'CELL_IMAGE',
+};

package/es/constants/storybook.d.ts

@@ -1,12 +1,17 @@
-import React from 'react';
-export declare const TABLE_API_COLUMNS: ({
-    title: string;
-    dataIndex: string;
-    key: string;
-    render?: undefined;
-} | {
-    title: string;
-    dataIndex: string;
-    key: string;
-    render: (text: any) => React.JSX.Element;
-})[];
+import React from 'react';
+export declare const TABLE_API_COLUMNS: ({
+    title: string;
+    dataIndex: string;
+    key: string;
+    render?: undefined;
+} | {
+    title: string;
+    dataIndex: string;
+    key: string;
+    render: (text: any) => React.JSX.Element;
+})[];
+export declare const TABLE_TYPE_COLUMNS: {
+    title: string;
+    dataIndex: string;
+    key: string;
+}[];

package/es/constants/storybook.js

@@ -1,24 +1,36 @@
-import React from 'react';
-export const TABLE_API_COLUMNS = [
-    {
-        title: 'Property',
-        dataIndex: 'property',
-        key: 'property',
-    },
-    {
-        title: 'Description',
-        dataIndex: 'description',
-        key: 'description',
-    },
-    {
-        title: 'Type',
-        dataIndex: 'type',
-        key: 'type',
-        render: text => React.createElement("a", { style: { color: 'magenta' } }, text),
-    },
-    {
-        title: 'Default',
-        dataIndex: 'default',
-        key: 'default',
-    },
-];
+import React from 'react';
+export const TABLE_API_COLUMNS = [
+    {
+        title: 'Property',
+        dataIndex: 'property',
+        key: 'property',
+    },
+    {
+        title: 'Description',
+        dataIndex: 'description',
+        key: 'description',
+    },
+    {
+        title: 'Type',
+        dataIndex: 'type',
+        key: 'type',
+        render: text => React.createElement("a", { style: { color: 'magenta' } }, text),
+    },
+    {
+        title: 'Default',
+        dataIndex: 'default',
+        key: 'default',
+    },
+];
+export const TABLE_TYPE_COLUMNS = [
+    {
+        title: 'Value',
+        dataIndex: 'value',
+        key: 'value',
+    },
+    {
+        title: 'Label',
+        dataIndex: 'label',
+        key: 'label',
+    },
+];

package/es/constants/theme.d.ts

@@ -1,12 +1,12 @@
-import { ThemeConfig } from 'antd';
-type TTheme = {
-    token?: ThemeConfig['token'] & {
-        [key: string]: any;
-    };
-    components?: ThemeConfig['components'];
-    algorithm?: ThemeConfig['algorithm'];
-    hashed?: ThemeConfig['hashed'];
-    inherit?: ThemeConfig['inherit'];
-};
-export declare const THEME: TTheme;
-export {};
+import { ThemeConfig } from 'antd';
+type TTheme = {
+    token?: ThemeConfig['token'] & {
+        [key: string]: any;
+    };
+    components?: ThemeConfig['components'];
+    algorithm?: ThemeConfig['algorithm'];
+    hashed?: ThemeConfig['hashed'];
+    inherit?: ThemeConfig['inherit'];
+};
+export declare const THEME: TTheme;
+export {};

package/es/constants/theme.js

@@ -1,146 +1,173 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-// Types
-import { theme } from 'antd';
-// Variables
-const { defaultAlgorithm, defaultSeed } = theme;
-const mapToken = defaultAlgorithm(defaultSeed);
-const { gold1, gold6 } = mapToken;
-export const THEME = {
-    token: {
-        colorText: '#000000',
-        colorTextBase: '#222222',
-        colorTextDark: '#333333',
-        colorTextPlaceholder: '#BEBEBE',
-        colorTextDisabled: '#999999',
-        colorError: '#CF1825',
-        colorWarning: '#faad14',
-        colorPrimary: '#005fb8',
-        colorTextHover: '#3a72b6',
-        colorLink: '#005fb8',
-        colorLinkHover: '#1B76CD',
-        colorTextActive: '#e0ebf7',
-        colorIcon: '#666666',
-        borderRadius: 3,
-        fontFamily: 'Roboto',
-        fontSize: 12,
-        fontSizeMd: 14,
-        fontSizeLg: 16,
-        controlHeight: 30,
-        bgLightTransparent: 'rgba(0, 0, 0, 0.3)',
-        blue: '#F2F9FF',
-        blue0: '#f5f9fc',
-        blue1_1: '#DEEFFE',
-        blue1: '#B8CFE6',
-        blue2: '#CAE5FE',
-        blue3: '#81BCF4',
-        blue4: '#5DA6EB',
-        blue5: '#3B8FDE',
-        blue6: '#1B76CD',
-        blue7: '#005EB8',
-        blue8: '#004F9B',
-        blue9: '#003F7B',
-        blue10: '#002E59',
-        red: '#FFF2F3',
-        red2: '#FFB8BE',
-        red3: '#FF989F',
-        red6: '#EF3340',
-        red7: '#CF1825',
-        red8: '#FF0000',
-        bw0: '#FFFFFF',
-        bw1_1: '#f8f8fc',
-        bw1: '#f0f6fa',
-        bw2: '#F0F0F0',
-        bw3: '#E5E5E5',
-        bw3_5: '#E6E6E6',
-        bw4: '#D4D4D4',
-        bw5: '#BEBEBE',
-        bw6: '#A2A2A2',
-        bw7: '#7F7F7F',
-        bw8: '#595959',
-        bw9: '#2D2D2D',
-        bw10: '#000000',
-        accent: '#f5f5f5',
-        accent1: '#e0e0e0',
-        accent2: '#dddddd',
-        accent3: '#d2d2d2',
-        accent5: '#999999',
-        gold1,
-        gold6,
-    },
-};
-THEME.components = {
-    Button: {
-        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,
-    },
-    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,
-        borderRadius: 0,
-        borderRadiusLG: 0,
-        borderRadiusSM: 0,
-        borderRadiusOuter: 0,
-        borderRadiusXS: 0,
-    },
-    Select: {
-        borderRadius: 0,
-        borderRadiusLG: 0,
-        borderRadiusSM: 0,
-        borderRadiusOuter: 0,
-        borderRadiusXS: 0,
-        colorBorder: (_k = THEME.token) === null || _k === void 0 ? void 0 : _k.blue1,
-        controlItemBgActive: '#E0EBF7',
-        colorBgContainerDisabled: (_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw2,
-        fontSizeIcon: 14,
-    },
-    Tag: {
-        colorBgContainer: 'red',
-    },
-    InputNumber: {
-        borderRadius: 0,
-        borderRadiusLG: 0,
-        borderRadiusSM: 0,
-        borderRadiusOuter: 0,
-        controlHeight: 30,
-        borderRadiusXS: 0,
-        colorBorder: (_m = THEME.token) === null || _m === void 0 ? void 0 : _m.blue1,
-        controlItemBgActive: '#E0EBF7',
-        colorBgContainerDisabled: (_o = THEME.token) === null || _o === void 0 ? void 0 : _o.bw2,
-        // fontSizeIcon: 14,
-    },
-    DatePicker: {
-        borderRadius: 0,
-        borderRadiusLG: 0,
-        borderRadiusSM: 0,
-        borderRadiusOuter: 0,
-        borderRadiusXS: 0,
-        colorBorder: (_p = THEME.token) === null || _p === void 0 ? void 0 : _p.blue1,
-        controlItemBgActive: '#E0EBF7',
-        colorBgContainerDisabled: (_q = THEME.token) === null || _q === void 0 ? void 0 : _q.bw2,
-        fontSizeIcon: 14,
-        controlHeight: 31,
-    },
-    Divider: {
-        marginLG: 10,
-    },
-    Checkbox: {
-        controlInteractiveSize: 18,
-    },
-    Modal: {
-        borderRadiusSM: 3,
-        paddingContentHorizontalLG: 0,
-        paddingLG: 0,
-        paddingMD: 0,
-    },
-    Tabs: {
-        colorPrimary: '#1F5FAC',
-        margin: 20,
-    },
-};
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+// Types
+import { theme } from 'antd';
+// Variables
+const { defaultAlgorithm, defaultSeed } = theme;
+const mapToken = defaultAlgorithm(defaultSeed);
+const { gold1, gold6 } = mapToken;
+export const THEME = {
+    token: {
+        colorText: '#000000',
+        colorTextBase: '#222222',
+        colorTextDark: '#333333',
+        colorTextPlaceholder: '#BEBEBE',
+        colorTextDisabled: '#999999',
+        colorError: '#CF1825',
+        colorWarning: '#faad14',
+        colorPrimary: '#005fb8',
+        colorTextHover: '#3a72b6',
+        colorLink: '#005fb8',
+        colorLinkHover: '#1B76CD',
+        colorTextActive: '#e0ebf7',
+        colorIcon: '#666666',
+        borderRadius: 3,
+        fontFamily: 'Roboto',
+        fontSize: 12,
+        fontSizeMd: 14,
+        fontSizeLg: 16,
+        controlHeight: 30,
+        bgLightTransparent: 'rgba(0, 0, 0, 0.3)',
+        blue: '#F2F9FF',
+        blue0: '#f5f9fc',
+        blue1_1: '#DEEFFE',
+        blue1: '#B8CFE6',
+        blue2: '#CAE5FE',
+        blue3: '#81BCF4',
+        blue4: '#5DA6EB',
+        blue5: '#3B8FDE',
+        blue6: '#1B76CD',
+        blue7: '#005EB8',
+        blue8: '#004F9B',
+        blue9: '#003F7B',
+        blue10: '#002E59',
+        red: '#FFF2F3',
+        red2: '#FFB8BE',
+        red3: '#FF989F',
+        red6: '#EF3340',
+        red7: '#CF1825',
+        red8: '#FF0000',
+        bw0: '#FFFFFF',
+        bw1_1: '#f8f8fc',
+        bw1: '#f0f6fa',
+        bw2: '#F0F0F0',
+        bw3: '#E5E5E5',
+        bw3_5: '#E6E6E6',
+        bw4: '#D4D4D4',
+        bw5: '#BEBEBE',
+        bw6: '#A2A2A2',
+        bw7: '#7F7F7F',
+        bw8: '#595959',
+        bw9: '#2D2D2D',
+        bw10: '#000000',
+        accent: '#f5f5f5',
+        accent1: '#e0e0e0',
+        accent2: '#dddddd',
+        accent3: '#d2d2d2',
+        accent5: '#999999',
+        accent6: '#f2f2f2',
+        accent7: '#cccccc',
+        gray5: '#d9d9d9',
+        gold1,
+        gold6,
+        scrollBarSize: '8px',
+    },
+};
+THEME.components = {
+    Button: {
+        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,
+    },
+    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,
+        borderRadius: 0,
+        borderRadiusLG: 0,
+        borderRadiusSM: 0,
+        borderRadiusOuter: 0,
+        borderRadiusXS: 0,
+    },
+    Select: {
+        borderRadius: 0,
+        borderRadiusLG: 0,
+        borderRadiusSM: 0,
+        borderRadiusOuter: 0,
+        borderRadiusXS: 0,
+        colorBorder: (_k = THEME.token) === null || _k === void 0 ? void 0 : _k.blue1,
+        controlItemBgActive: '#E0EBF7',
+        colorBgContainerDisabled: (_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw2,
+        fontSizeIcon: 14,
+    },
+    Tag: {
+        colorBgContainer: 'red',
+    },
+    InputNumber: {
+        borderRadius: 0,
+        borderRadiusLG: 0,
+        borderRadiusSM: 0,
+        borderRadiusOuter: 0,
+        controlHeight: 30,
+        borderRadiusXS: 0,
+        colorBorder: (_m = THEME.token) === null || _m === void 0 ? void 0 : _m.blue1,
+        controlItemBgActive: '#E0EBF7',
+        colorBgContainerDisabled: (_o = THEME.token) === null || _o === void 0 ? void 0 : _o.bw2,
+        // fontSizeIcon: 14,
+    },
+    DatePicker: {
+        borderRadius: 0,
+        borderRadiusLG: 0,
+        borderRadiusSM: 0,
+        borderRadiusOuter: 0,
+        borderRadiusXS: 0,
+        colorBorder: (_p = THEME.token) === null || _p === void 0 ? void 0 : _p.blue1,
+        controlItemBgActive: '#E0EBF7',
+        colorBgContainerDisabled: (_q = THEME.token) === null || _q === void 0 ? void 0 : _q.bw2,
+        fontSizeIcon: 14,
+        controlHeight: 31,
+    },
+    Divider: {
+        marginLG: 15,
+        marginXL: 15,
+        colorSplit: (_r = THEME.token) === null || _r === void 0 ? void 0 : _r.accent3,
+    },
+    Checkbox: {
+        controlInteractiveSize: 18,
+    },
+    Modal: {
+        titleFontSize: 16,
+        borderRadiusSM: 3,
+        fontSizeLG: 18,
+        paddingContentHorizontalLG: 0,
+        paddingLG: 0,
+        paddingMD: 0,
+    },
+    Tabs: {
+        colorPrimary: '#1F5FAC',
+        horizontalItemPadding: '10px 20px',
+        horizontalItemGutter: 0,
+        lineWidthBold: 3,
+        titleFontSize: 14,
+        titleFontSizeLG: 14,
+        titleFontSizeSM: 14,
+        horizontalMargin: '0px',
+    },
+    Collapse: {
+        headerBg: '#FFF',
+        borderRadiusLG: 0,
+        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,
+        handleSize: 12,
+        handleSizeSM: 7,
+        trackMinWidth: 30,
+        handleBg: (_u = THEME.token) === null || _u === void 0 ? void 0 : _u.colorPrimary,
+    },
+};

package/es/hooks/index.d.ts

@@ -1,2 +1,3 @@
-/// <reference types="react" />
-export declare function useDeepCompareEffect(callback: React.EffectCallback, dependencies: React.DependencyList | undefined): void;
+/// <reference types="react" />
+export declare function useDeepCompareEffect(callback: React.EffectCallback, dependencies: React.DependencyList | undefined): void;
+export { useDeepCompareMemo } from './useDeepCompareMemo';

package/es/hooks/index.js

@@ -1,21 +1,22 @@
-import { useEffect, useRef } from 'react';
-import isEqual from 'react-fast-compare';
-function deepCompareEquals(a, b) {
-    // TODO: implement deep comparison here
-    // something like lodash
-    // return _.isEqual(a, b);
-    return isEqual(a, b);
-}
-function useDeepCompareMemoize(value) {
-    const ref = useRef();
-    // it can be done by using useMemo as well
-    // but useRef is rather cleaner and easier
-    if (!deepCompareEquals(value, ref.current)) {
-        ref.current = value;
-    }
-    return ref.current;
-}
-export function useDeepCompareEffect(callback, dependencies) {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(callback, dependencies === null || dependencies === void 0 ? void 0 : dependencies.map(useDeepCompareMemoize));
-}
+import { useEffect, useRef } from 'react';
+import isEqual from 'react-fast-compare';
+function deepCompareEquals(a, b) {
+    // TODO: implement deep comparison here
+    // something like lodash
+    // return _.isEqual(a, b);
+    return isEqual(a, b);
+}
+function useDeepCompareMemoize(value) {
+    const ref = useRef();
+    // it can be done by using useMemo as well
+    // but useRef is rather cleaner and easier
+    if (!deepCompareEquals(value, ref.current)) {
+        ref.current = value;
+    }
+    return ref.current;
+}
+export function useDeepCompareEffect(callback, dependencies) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(callback, dependencies === null || dependencies === void 0 ? void 0 : dependencies.map(useDeepCompareMemoize));
+}
+export { useDeepCompareMemo } from './useDeepCompareMemo';

package/es/hooks/useDebounce.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare function useDebounce<T>(initialValue: T, time: number): [T, T, React.Dispatch<T>];
-export { useDebounce };
+/// <reference types="react" />
+declare function useDebounce<T>(initialValue: T, time: number): [T, T, React.Dispatch<T>];
+export { useDebounce };

package/es/hooks/useDebounce.js

@@ -1,15 +1,15 @@
-import { useState, useEffect } from 'react';
-function useDebounce(initialValue, time) {
-    const [value, setValue] = useState(initialValue);
-    const [debouncedValue, setDebouncedValue] = useState(initialValue);
-    useEffect(() => {
-        const debounce = setTimeout(() => {
-            setDebouncedValue(value);
-        }, time);
-        return () => {
-            clearTimeout(debounce);
-        };
-    }, [value, time]);
-    return [debouncedValue, value, setValue];
-}
-export { useDebounce };
+import { useState, useEffect } from 'react';
+function useDebounce(initialValue, time) {
+    const [value, setValue] = useState(initialValue);
+    const [debouncedValue, setDebouncedValue] = useState(initialValue);
+    useEffect(() => {
+        const debounce = setTimeout(() => {
+            setDebouncedValue(value);
+        }, time);
+        return () => {
+            clearTimeout(debounce);
+        };
+    }, [value, time]);
+    return [debouncedValue, value, setValue];
+}
+export { useDebounce };

package/es/hooks/useDebounceCallback.d.ts

@@ -0,0 +1 @@
+export declare function useDebounceCallback<T extends (...args: any[]) => any>(callback: T, delay?: number): T;

package/es/hooks/useDebounceCallback.js

@@ -0,0 +1,5 @@
+import { useDebounce } from './useDebounceV2';
+export function useDebounceCallback(callback, delay = 500) {
+    const debouncedCallback = useDebounce(callback, delay);
+    return debouncedCallback;
+}

package/es/hooks/useDebounceV2.d.ts

@@ -0,0 +1 @@
+export declare function useDebounce<T>(value: T, delay?: number): T;

package/es/hooks/useDebounceV2.js

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+export function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}

package/es/hooks/useDeepCompareEffect.d.ts

@@ -0,0 +1 @@
+export declare function useDeepCompareEffect(callback: any, dependencies: any): void;

package/es/hooks/useDeepCompareEffect.js

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from 'react';
+import isEqual from 'react-fast-compare';
+function deepCompareEquals(a, b) {
+    // TODO: implement deep comparison here
+    // something like lodash
+    // return _.isEqual(a, b);
+    return isEqual(a, b);
+}
+function useDeepCompareMemoize(value) {
+    const ref = useRef();
+    // it can be done by using useMemo as well
+    // but useRef is rather cleaner and easier
+    if (!deepCompareEquals(value, ref.current)) {
+        ref.current = value;
+    }
+    return ref.current;
+}
+export function useDeepCompareEffect(callback, dependencies) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(callback, dependencies.map(useDeepCompareMemoize));
+}