@antscorp/antsomi-ui 1.3.5-beta.21 → 1.3.5-beta.211

package/es/components/template/TemplateListing/types/CategoryListing.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 import { MenuProps } from 'antd';
+import { EmptyProps } from './Empty';
 export type TCheckedCategories = Record<string | number, (string | number)[]>;
 export type TCategoryItemId = string | number;
 export interface CategoryListingProps extends MenuProps {
@@ -8,6 +9,10 @@ export interface CategoryListingProps extends MenuProps {
     loading?: boolean;
     show?: boolean;
     checkedCategories?: TCheckedCategories;
+    debounceChangeMenu?: number;
+    emptyProps?: EmptyProps;
+    header?: ReactNode;
+    footer?: ReactNode;
     onMenuChange?: (value: TCheckedCategories) => void;
 }
 export type TMenuItem = Required<MenuProps>['items'][number];

package/es/components/template/TemplateListing/types/TemplateListing.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { ThumbnailCardProps } from '../../../molecules';
 import { TThumbnailCardId } from '../../../molecules/ThumbnailCard';
 import { PreviewTemplateModalProps } from '../../../organism/PreviewTemplateModal/types';
@@ -7,20 +8,25 @@ import { EmptyProps } from './Empty';
 export interface TemplateListingProps<T = {}> {
     templatesProps?: TemplatesProps<T>;
     templateItemProps?: Omit<ThumbnailCardProps, 'id' | 'thumbnail'>;
-    categoryListingProps?: CategoryListingProps;
+    categoryListingProps?: Omit<CategoryListingProps, 'emptyProps'>;
     blankTemplateProps?: Omit<BlankTemplateProps, 'width' | 'height'>;
     emptyProps?: EmptyProps;
     previewModalProps?: PreviewTemplateModalProps;
 }
 export type TemplatesProps<T = {}> = {
-    items?: (TTemplateItem & T)[];
+    header?: ReactNode;
+    footer?: ReactNode;
+    items?: ((TTemplateItem & T) | undefined)[];
     loading?: boolean;
     gap?: number;
+    wrapperClassName?: string;
+    wrapperStyle?: React.CSSProperties;
     onLoadMoreTemplates?: () => void;
 };
 export interface TTemplateItem {
     id: TThumbnailCardId;
     name?: ThumbnailCardProps['name'];
     thumbnail?: ThumbnailCardProps['thumbnail'];
+    [key: string]: any;
 }
-export type TSelectTemplateAction = 'edit' | 'preview';
+export type TSelectTemplateAction = 'edit' | 'preview' | 'use';

package/es/components/template/index.d.ts

@@ -1,3 +1,4 @@
 export { TemplateListing } from './TemplateListing/Loadable';
+export * from './Layout';
 export * from './TemplateListing/types';
 export * from './TemplateListing/hooks';

package/es/components/template/index.js

@@ -1,5 +1,6 @@
 // Components
 export { TemplateListing } from './TemplateListing/Loadable';
+export * from './Layout';
 // Types
 export * from './TemplateListing/types';
 // Hooks

package/es/config/index.d.ts

@@ -0,0 +1,10 @@
+export declare const ENV: {
+    readonly DEV: "development";
+    readonly PROD: "production";
+    readonly SANDBOX: "sandbox";
+};
+export declare const isDev: boolean;
+export declare const ENDPOINT: {
+    readonly DASHBOARD_V2: "dashboard/v2.0";
+    readonly TOOLKIT_V2: "toolkit/v2.0";
+};

package/es/config/index.js

@@ -0,0 +1,14 @@
+/* ENV */
+export const ENV = {
+    DEV: 'development',
+    PROD: 'production',
+    SANDBOX: 'sandbox',
+};
+export const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'sandbox';
+/* VERSION */
+const API_VERSION_V2 = '2.0';
+/* ENDPOINT */
+export const ENDPOINT = {
+    DASHBOARD_V2: `dashboard/v${API_VERSION_V2}`,
+    TOOLKIT_V2: `toolkit/v${API_VERSION_V2}`,
+};

package/es/constants/api.d.ts

@@ -0,0 +1,15 @@
+export declare const TINYMCE_API_KEY = "scyw71pj8619analvxs56ppc2w2fj2kpy5vnmflhhc300y35";
+export declare const CDP_API: {
+    development: string;
+    sandbox: string;
+    production: string;
+};
+export declare const ISSUE_API: {
+    development: string;
+    sandbox: string;
+    production: string;
+};
+export declare const PLATFORM_API = "https://platform.ants.tech";
+export declare const PERMISSION_API = "https://permission.antsomi.com";
+export declare const SOCKET_API = "https://ws.ants.tech";
+export declare const IAM_API = "https://iam.ants.tech";

package/es/constants/api.js

@@ -0,0 +1,17 @@
+// Constants
+import { ENV } from '../config';
+export const TINYMCE_API_KEY = 'scyw71pj8619analvxs56ppc2w2fj2kpy5vnmflhhc300y35';
+export const CDP_API = {
+    [ENV.DEV]: 'https://sandbox-app.cdp.asia',
+    [ENV.SANDBOX]: 'https://sandbox-app.cdp.asia',
+    [ENV.PROD]: 'https://cdp.antsomi.com',
+};
+export const ISSUE_API = {
+    [ENV.DEV]: 'https://sandbox-issue.antsomi.com',
+    [ENV.SANDBOX]: 'https://sandbox-issue.antsomi.com',
+    [ENV.PROD]: 'https://issue.antsomi.com',
+};
+export const PLATFORM_API = 'https://platform.ants.tech';
+export const PERMISSION_API = 'https://permission.antsomi.com';
+export const SOCKET_API = 'https://ws.ants.tech';
+export const IAM_API = 'https://iam.ants.tech';

package/es/constants/contentSource.d.ts

@@ -0,0 +1,29 @@
+import { TFilters, TRanking } from '../components/atoms/InputDynamic/types';
+export declare const FILTERS_DEFAULT: TFilters;
+export declare const PRODUCT_RANKING_DEFAULT: TRanking;
+export declare const FALLBACK_SELECTION: {
+    NONE: {
+        value: string;
+        label: string;
+    };
+    HIDDEN: {
+        value: string;
+        label: string;
+    };
+    MOST_SEEN: {
+        value: string;
+        label: string;
+    };
+    MOST_CART: {
+        value: string;
+        label: string;
+    };
+    MOST_BOUGHT: {
+        value: string;
+        label: string;
+    };
+};
+export declare const ITEM_TYPE_NAME: {
+    ARTICLE: string;
+};
+export declare const PRODUCT_ITEM_TYPE_ID = 1;

package/es/constants/contentSource.js

@@ -0,0 +1,46 @@
+import { translations } from '../locales/translations';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+const { t } = i18nInstance;
+export const FILTERS_DEFAULT = {
+    OR: [],
+};
+export const PRODUCT_RANKING_DEFAULT = {
+    type: 'algorithms',
+    algorithms: {
+        sort: 'mix',
+        value: [
+            {
+                value: 'seen_products',
+                quantity: 5,
+            },
+        ],
+        filters: [],
+    },
+    custom: '',
+};
+export const FALLBACK_SELECTION = {
+    NONE: {
+        value: 'none',
+        label: t(translations.fallback.options.none),
+    },
+    HIDDEN: {
+        value: 'hidden',
+        label: t(translations.fallback.options.hidden),
+    },
+    MOST_SEEN: {
+        value: 'product_viewed_most_often',
+        label: t(translations.fallback.options.mostSeen),
+    },
+    MOST_CART: {
+        value: 'product_carted_most_often',
+        label: t(translations.fallback.options.mostCart),
+    },
+    MOST_BOUGHT: {
+        value: 'product_bought_most_often',
+        label: t(translations.fallback.options.mostBought),
+    },
+};
+export const ITEM_TYPE_NAME = {
+    ARTICLE: 'article',
+};
+export const PRODUCT_ITEM_TYPE_ID = 1;

package/es/constants/index.d.ts

@@ -1,7 +1,11 @@
+export * from './api';
 export * from './storybook';
 export * from './gradientSetting';
 export * from './richMenu';
 export * from './datetime';
 export * from './keyCode';
 export * from './templateListing';
+export * from './variables';
+export * from './permissions';
+export * from './queries';
 export * from './theme';

package/es/constants/index.js

@@ -1,7 +1,11 @@
+export * from './api';
 export * from './storybook';
 export * from './gradientSetting';
 export * from './richMenu';
 export * from './datetime';
 export * from './keyCode';
 export * from './templateListing';
+export * from './variables';
+export * from './permissions';
+export * from './queries';
 export * from './theme';

package/es/constants/permissions.d.ts

@@ -0,0 +1,6 @@
+export declare const FEATURE_PERMISSIONS: {
+    NONE: number;
+    CREATED_BY_USER: number;
+    MANAGEMENT_BY_USER: number;
+    EVERYTHING: number;
+};

package/es/constants/permissions.js

@@ -0,0 +1,6 @@
+export const FEATURE_PERMISSIONS = {
+    NONE: 1,
+    CREATED_BY_USER: 2,
+    MANAGEMENT_BY_USER: 3,
+    EVERYTHING: 4,
+};

package/es/constants/queries.d.ts

@@ -5,6 +5,7 @@ export declare const QUERY_KEYS: {
     GET_LIST_ALL_EVENT: string;
     GET_LIST_BO: string;
     GET_EVENT_ATTRIBUTE_BO: string;
+    GET_BO_DETAIL: string;
     GET_LIST_PROMOTION_CODE_ATTR: string;
     GET_EVENT_TRACKING_ATTRIBUTES: string;
     GET_LIST_DYNAMIC_CONTENT_ATTR: string;
@@ -14,4 +15,13 @@ export declare const QUERY_KEYS: {
     GET_TEMPLATE_CATEGORY_LIST: string;
     GET_OBJECT_TEMPLATE_LIST: string;
     GET_OBJECT_TEMPLATE_DETAIL: string;
+    GET_SAVE_AS_GALLERY_PERMISSION_EMAILS: string;
+    GET_LISTING_SAVED_MEDIA: string;
+    GET_LIST_FALLBACK_BO: string;
+    GET_DASHBOARD: string;
+    GET_LIST_MENU: string;
+    GET_LIST_MENU_PERMISSION: string;
+    GET_DESTINATION_CHANNEL: string;
+    GET_ACCOUNT_LISTING: string;
+    GET_RECENT_ACCOUNT: string;
 };

package/es/constants/queries.js

@@ -7,6 +7,7 @@ export const QUERY_KEYS = {
     // BUSINESS OBJECT
     GET_LIST_BO: 'GET_LIST_BO',
     GET_EVENT_ATTRIBUTE_BO: 'GET_EVENT_ATTRIBUTE_BO',
+    GET_BO_DETAIL: 'GET_BO_DETAIL',
     // Promotion Code Attr
     GET_LIST_PROMOTION_CODE_ATTR: 'GET_LIST_PROMOTION_CODE_ATTR',
     // Event tracking attributes
@@ -22,4 +23,16 @@ export const QUERY_KEYS = {
     GET_TEMPLATE_CATEGORY_LIST: 'GET_TEMPLATE_CATEGORY_LIST',
     GET_OBJECT_TEMPLATE_LIST: 'GET_OBJECT_TEMPLATE_LIST',
     GET_OBJECT_TEMPLATE_DETAIL: 'GET_OBJECT_TEMPLATE_DETAIL',
+    GET_SAVE_AS_GALLERY_PERMISSION_EMAILS: 'GET_SAVE_AS_GALLERY_PERMISSION_EMAILS',
+    GET_LISTING_SAVED_MEDIA: 'GET_LISTING_SAVED_MEDIA',
+    // THIRD PARTY
+    GET_LIST_FALLBACK_BO: 'GET_LIST_FALLBACK_BO',
+    // Left menu
+    GET_DASHBOARD: 'GET_DASHBOARD',
+    GET_LIST_MENU: 'GET_LIST_MENU',
+    GET_LIST_MENU_PERMISSION: 'GET_LIST_MENU_PERMISSION',
+    GET_DESTINATION_CHANNEL: 'GET_DESTINATION_CHANNEL',
+    // Account Listing
+    GET_ACCOUNT_LISTING: 'GET_ACCOUNT_LISTING',
+    GET_RECENT_ACCOUNT: 'GET_RECENT_ACCOUNT',
 };

package/es/constants/templateListing.d.ts

@@ -1,9 +1,3 @@
-export declare const OBJECT_TYPES: {
-    readonly MEDIA_TEMPLATE: 1;
-    readonly EMAIL_TEMPLATE: 2;
-    readonly JOURNEY_TEMPLATE: 3;
-    readonly RICH_MENU_TEMPLATE: 4;
-};
 export declare const PUBLIC_LEVEL: {
     readonly RESTRICTED: 0;
     readonly PUBLIC: 1;
@@ -47,8 +41,6 @@ export declare const LAYOUT_TEMPLATE: {
     };
 };
 export declare const TEMPLATE_CATEGORY_KEYS: {
-    readonly DEVICE_TYPE: "device_type";
-    readonly TEMPLATE_TYPE: "template_type";
     readonly INDUSTRY: "industry";
     readonly SEASONALITY: "seasonality";
     readonly GOAL: "goal";

package/es/constants/templateListing.js

@@ -1,9 +1,3 @@
-export const OBJECT_TYPES = {
-    MEDIA_TEMPLATE: 1,
-    EMAIL_TEMPLATE: 2,
-    JOURNEY_TEMPLATE: 3,
-    RICH_MENU_TEMPLATE: 4,
-};
 export const PUBLIC_LEVEL = {
     RESTRICTED: 0,
     PUBLIC: 1,
@@ -47,8 +41,8 @@ export const LAYOUT_TEMPLATE = {
     },
 };
 export const TEMPLATE_CATEGORY_KEYS = {
-    DEVICE_TYPE: 'device_type',
-    TEMPLATE_TYPE: 'template_type',
+    // DEVICE_TYPE: 'device_type',
+    // TEMPLATE_TYPE: 'template_type',
     INDUSTRY: 'industry',
     SEASONALITY: 'seasonality',
     GOAL: 'goal',

package/es/constants/theme.d.ts

@@ -9,4 +9,7 @@ type TTheme = {
     inherit?: ThemeConfig['inherit'];
 };
 export declare const THEME: TTheme;
+export declare const globalToken: (Partial<import("antd/es/theme/internal").AliasToken> & {
+    [key: string]: any;
+}) | undefined;
 export {};

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,6 +7,7 @@ const mapToken = defaultAlgorithm(defaultSeed);
 const { gold1, gold6 } = mapToken;
 export const THEME = {
     token: {
+        headerHeight: '57px',
         colorText: '#000000',
         colorTextBase: '#222222',
         colorTextDark: '#333333',
@@ -20,7 +21,10 @@ export const THEME = {
         colorLinkHover: '#1B76CD',
         colorTextActive: '#e0ebf7',
         colorIcon: '#666666',
+        /* Border radius */
         borderRadius: 3,
+        borderRadiusXL: 10,
+        /* Font */
         fontFamily: 'Roboto',
         fontSize: 12,
         fontSizeMd: 14,
@@ -30,6 +34,8 @@ export const THEME = {
         blue: '#F2F9FF',
         blue0: '#f5f9fc',
         blue1_1: '#DEEFFE',
+        blue1_2: '#EAF1FB',
+        blue1_3: '#F6F8FC',
         blue1: '#B8CFE6',
         blue2: '#CAE5FE',
         blue3: '#81BCF4',
@@ -69,11 +75,13 @@ export const THEME = {
         gray5: '#d9d9d9',
         gold1,
         gold6,
-        scrollBarSize: '8px',
+        scrollBarSize: '4px',
     },
 };
 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,
@@ -99,9 +107,11 @@ THEME.components = {
         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 +124,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 +135,21 @@ 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,
     },
     Modal: {
         titleFontSize: 16,
@@ -148,14 +160,19 @@ THEME.components = {
         paddingMD: 0,
     },
     Tabs: {
-        colorPrimary: '#1F5FAC',
-        horizontalItemPadding: '10px 20px',
+        itemColor: (_u = THEME.token) === null || _u === void 0 ? void 0 : _u.bw8,
+        horizontalItemPadding: '17px 30px',
         horizontalItemGutter: 0,
         lineWidthBold: 3,
         titleFontSize: 14,
         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 +180,28 @@ 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,
     },
 };
+export const globalToken = theme.getDesignToken(THEME);

package/es/constants/variables.d.ts

@@ -0,0 +1,19 @@
+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;
+};

package/es/constants/variables.js

@@ -0,0 +1,19 @@
+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,
+};

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,14 @@ 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';

package/es/hooks/index.js

@@ -24,3 +24,14 @@ 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';

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/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;