@antscorp/antsomi-ui 1.3.5-beta.62 → 1.3.5-beta.621

package/es/constants/index.js

@@ -1,8 +1,13 @@
+export * from './api';
 export * from './storybook';
 export * from './gradientSetting';
 export * from './richMenu';
 export * from './datetime';
 export * from './keyCode';
 export * from './templateListing';
-export * from './theme';
 export * from './variables';
+export * from './permissions';
+export * from './queries';
+export * from './theme';
+export * from './postMessage';
+export * from './condition';

package/es/constants/permissions.d.ts

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

package/es/constants/permissions.js

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

package/es/constants/postMessage.d.ts

@@ -0,0 +1,4 @@
+export declare const POST_MESSAGE_TYPES: {
+    REFETCH_DASHBOARD_LIST: string;
+    TOGGLE_DRAWER_DETAIL_FULLSCREEN: string;
+};

package/es/constants/postMessage.js

@@ -0,0 +1,4 @@
+export const POST_MESSAGE_TYPES = {
+    REFETCH_DASHBOARD_LIST: 'REFETCH_DASHBOARD_LIST',
+    TOGGLE_DRAWER_DETAIL_FULLSCREEN: 'TOGGLE_DRAWER_DETAIL_FULLSCREEN',
+};

package/es/constants/queries.d.ts

@@ -5,6 +5,8 @@ export declare const QUERY_KEYS: {
     GET_LIST_ALL_EVENT: string;
     GET_LIST_BO: string;
     GET_EVENT_ATTRIBUTE_BO: string;
+    GET_BO_DETAIL: string;
+    GET_DATA_TABLE_BO: string;
     GET_LIST_PROMOTION_CODE_ATTR: string;
     GET_EVENT_TRACKING_ATTRIBUTES: string;
     GET_LIST_DYNAMIC_CONTENT_ATTR: string;
@@ -15,4 +17,24 @@ export declare const QUERY_KEYS: {
     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_PERMISSION_ACCOUNT_LISTING: string;
+    GET_RECENT_ACCOUNT: string;
+    UPDATE_RECENT_ACCOUNT: string;
+    CHECK_ACCOUNT_PERMISSION: string;
+    GET_ABSTRACT_USERS: string;
+    GET_COLUMN_METRICS: string;
+    GET_DATA_TABLE_LISTING: string;
+    GET_MODIFY_COLUMN_LIST: string;
+    GET_SAVED_FILTER_LIST: string;
+    GET_FILTER_METRIC_LIST: string;
+    GET_SEARCH_LIST: string;
+    GET_MATCHES_ANY_LIST: string;
+    GET_INFINITE_MATCHES_ANY_LIST: string;
 };

package/es/constants/queries.js

@@ -7,6 +7,8 @@ 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',
+    GET_DATA_TABLE_BO: 'GET_DATA_TABLE_BO',
     // Promotion Code Attr
     GET_LIST_PROMOTION_CODE_ATTR: 'GET_LIST_PROMOTION_CODE_ATTR',
     // Event tracking attributes
@@ -23,4 +25,29 @@ export const QUERY_KEYS = {
     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_PERMISSION_ACCOUNT_LISTING: 'GET_PERMISSION_ACCOUNT_LISTING',
+    GET_RECENT_ACCOUNT: 'GET_RECENT_ACCOUNT',
+    UPDATE_RECENT_ACCOUNT: 'UPDATE_RECENT_ACCOUNT',
+    CHECK_ACCOUNT_PERMISSION: 'CHECK_ACCOUNT_PERMISSION',
+    // ABSTRACT
+    GET_ABSTRACT_USERS: 'GET_ABSTRACT_USERS',
+    // DATA TABLE
+    GET_COLUMN_METRICS: 'GET_COLUMN_METRICS',
+    GET_DATA_TABLE_LISTING: 'GET_DATA_TABLE_LISTING',
+    GET_MODIFY_COLUMN_LIST: 'GET_MODIFY_COLUMN_LIST',
+    GET_SAVED_FILTER_LIST: 'GET_SAVED_FILTER_LIST',
+    GET_FILTER_METRIC_LIST: 'GET_FILTER_METRIC_LIST',
+    GET_SEARCH_LIST: 'GET_SEARCH_LIST',
+    GET_MATCHES_ANY_LIST: 'GET_MATCHES_ANY_LIST',
+    GET_INFINITE_MATCHES_ANY_LIST: 'GET_INFINITE_MATCHES_ANY_LIST',
 };

package/es/constants/styles.d.ts

@@ -0,0 +1,12 @@
+export declare const BREAK_POINTS: {
+    PHONE: number;
+    PHABLET: number;
+    TABLET: number;
+    LAPTOP: number;
+    LAPTOP_13: number;
+    LAPTOP_14: number;
+    LAPTOP_15: number;
+    LAPTOP_16: number;
+    DESKTOP: number;
+    DESKTOP_L: number;
+};

package/es/constants/styles.js

@@ -0,0 +1,12 @@
+export const BREAK_POINTS = {
+    PHONE: 320,
+    PHABLET: 540,
+    TABLET: 768,
+    LAPTOP: 992,
+    LAPTOP_13: 1024,
+    LAPTOP_14: 1152,
+    LAPTOP_15: 1280,
+    LAPTOP_16: 1440,
+    DESKTOP: 1600,
+    DESKTOP_L: 1920,
+};

package/es/constants/theme.d.ts

@@ -7,6 +7,10 @@ type TTheme = {
     algorithm?: ThemeConfig['algorithm'];
     hashed?: ThemeConfig['hashed'];
     inherit?: ThemeConfig['inherit'];
+    cssVar?: ThemeConfig['cssVar'];
 };
 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, _0, _1, _2, _3, _4, _5;
 // Types
 import { theme } from 'antd';
 // Variables
@@ -7,12 +7,14 @@ 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',
+        colorSuccess: '#12B800',
         colorWarning: '#faad14',
         colorPrimary: '#005fb8',
         colorTextHover: '#3a72b6',
@@ -20,7 +22,13 @@ export const THEME = {
         colorLinkHover: '#1B76CD',
         colorTextActive: '#e0ebf7',
         colorIcon: '#666666',
-        borderRadius: 3,
+        /* Padding */
+        padding: 15,
+        /* Border radius */
+        borderRadius: 10,
+        borderRadiusLG: 10,
+        borderRadiusXL: 10,
+        /* Font */
         fontFamily: 'Roboto',
         fontSize: 12,
         fontSizeMd: 14,
@@ -30,6 +38,8 @@ export const THEME = {
         blue: '#F2F9FF',
         blue0: '#f5f9fc',
         blue1_1: '#DEEFFE',
+        blue1_2: '#EAF1FB',
+        blue1_3: '#F6F8FC',
         blue1: '#B8CFE6',
         blue2: '#CAE5FE',
         blue3: '#81BCF4',
@@ -46,6 +56,7 @@ export const THEME = {
         red6: '#EF3340',
         red7: '#CF1825',
         red8: '#FF0000',
+        orange6: '#F29100',
         bw0: '#FFFFFF',
         bw1_1: '#f8f8fc',
         bw1: '#f0f6fa',
@@ -69,24 +80,39 @@ export const THEME = {
         gray5: '#d9d9d9',
         gold1,
         gold6,
-        scrollBarSize: '8px',
+        scrollBarSize: '4px',
+        /** Skeleton */
+        colorBgSkeleton: '#FCFDFF',
     },
 };
 THEME.components = {
+    Spin: { dotSize: 40, contentHeight: 1000 },
     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,
+        colorBgContainerDisabled: (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw6,
+        borderColorDisabled: (_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',
+        marginXS: 0,
+        /* Text type */
+        colorBgTextHover: (_f = THEME.token) === null || _f === void 0 ? void 0 : _f.blue,
+        colorBgTextActive: (_g = THEME.token) === null || _g === void 0 ? void 0 : _g.blue1_1,
+    },
+    Typography: {
+        lineHeight: 1.2,
     },
     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,
+        controlHeight: 31,
+        colorBgContainerDisabled: (_h = THEME.token) === null || _h === void 0 ? void 0 : _h.bw2,
+        colorTextDisabled: (_j = THEME.token) === null || _j === void 0 ? void 0 : _j.bw10,
+        colorBorder: (_k = THEME.token) === null || _k === void 0 ? void 0 : _k.blue1,
+        colorTextPlaceholder: (_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw6,
+        controlItemBgHover: 'red',
+        paddingInline: 10,
         borderRadius: 0,
         borderRadiusLG: 0,
         borderRadiusSM: 0,
@@ -95,14 +121,18 @@ 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: (_m = THEME.token) === null || _m === void 0 ? void 0 : _m.blue1_1,
+        optionSelectedFontWeight: 400,
+        colorBorder: (_o = THEME.token) === null || _o === void 0 ? void 0 : _o.blue1,
         controlItemBgActive: '#E0EBF7',
-        colorBgContainerDisabled: (_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw2,
+        colorBgContainerDisabled: (_p = THEME.token) === null || _p === void 0 ? void 0 : _p.bw2,
         fontSizeIcon: 14,
+        paddingSM: 6,
     },
     Tag: {
         colorBgContainer: 'red',
@@ -114,9 +144,9 @@ THEME.components = {
         borderRadiusOuter: 0,
         controlHeight: 30,
         borderRadiusXS: 0,
-        colorBorder: (_m = THEME.token) === null || _m === void 0 ? void 0 : _m.blue1,
+        colorBorder: (_q = THEME.token) === null || _q === void 0 ? void 0 : _q.blue1,
         controlItemBgActive: '#E0EBF7',
-        colorBgContainerDisabled: (_o = THEME.token) === null || _o === void 0 ? void 0 : _o.bw2,
+        colorBgContainerDisabled: (_r = THEME.token) === null || _r === void 0 ? void 0 : _r.bw2,
         // fontSizeIcon: 14,
     },
     DatePicker: {
@@ -125,22 +155,37 @@ THEME.components = {
         borderRadiusSM: 0,
         borderRadiusOuter: 0,
         borderRadiusXS: 0,
-        colorBorder: (_p = THEME.token) === null || _p === void 0 ? void 0 : _p.blue1,
+        paddingInline: 5,
+        colorBorder: (_s = THEME.token) === null || _s === void 0 ? void 0 : _s.blue1,
         controlItemBgActive: '#E0EBF7',
-        colorBgContainerDisabled: (_q = THEME.token) === null || _q === void 0 ? void 0 : _q.bw2,
+        colorBgContainerDisabled: (_t = THEME.token) === null || _t === void 0 ? void 0 : _t.bw2,
         fontSizeIcon: 14,
         controlHeight: 31,
     },
     Divider: {
         marginLG: 15,
         marginXL: 15,
-        colorSplit: (_r = THEME.token) === null || _r === void 0 ? void 0 : _r.accent3,
+        colorSplit: (_u = THEME.token) === null || _u === void 0 ? void 0 : _u.bw3,
     },
     Checkbox: {
         controlInteractiveSize: 18,
+        colorBorder: (_v = THEME.token) === null || _v === void 0 ? void 0 : _v.colorPrimary,
+        lineWidth: 2,
+        borderRadiusSM: 5,
+    },
+    Tree: {
+        controlInteractiveSize: 18,
+        colorBorder: (_w = THEME.token) === null || _w === void 0 ? void 0 : _w.colorPrimary,
+        nodeHoverBg: 'transparent',
+        lineWidth: 2,
+        borderRadiusSM: 5,
+        // titleHeight: 12,
+        paddingXS: 20,
+        marginXXS: 0,
     },
     Modal: {
         titleFontSize: 16,
+        fontWeightStrong: 500,
         borderRadiusSM: 3,
         fontSizeLG: 18,
         paddingContentHorizontalLG: 0,
@@ -148,7 +193,7 @@ THEME.components = {
         paddingMD: 0,
     },
     Tabs: {
-        colorPrimary: '#1F5FAC',
+        itemColor: (_x = THEME.token) === null || _x === void 0 ? void 0 : _x.bw8,
         horizontalItemPadding: '17px 30px',
         horizontalItemGutter: 0,
         lineWidthBold: 3,
@@ -156,6 +201,11 @@ THEME.components = {
         titleFontSizeLG: 14,
         titleFontSizeSM: 14,
         horizontalMargin: '0px',
+        colorBorderSecondary: '#E5E5E5',
+        lineHeight: 1.143,
+        lineHeightLG: 1.143,
+        lineHeightSM: 1.143,
+        itemHoverColor: (_y = THEME.token) === null || _y === void 0 ? void 0 : _y.colorPrimary,
     },
     Collapse: {
         headerBg: '#FFF',
@@ -163,11 +213,61 @@ 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,
-        handleSize: 12,
+        colorTextQuaternary: (_z = THEME.token) === null || _z === void 0 ? void 0 : _z.bw0,
+        colorTextTertiary: (_0 = THEME.token) === null || _0 === void 0 ? void 0 : _0.bw0,
+        handleSize: 8,
         handleSizeSM: 7,
-        trackMinWidth: 30,
-        handleBg: (_u = THEME.token) === null || _u === void 0 ? void 0 : _u.colorPrimary,
+        trackMinWidth: 27,
+        trackHeight: 16,
+        handleBg: (_1 = THEME.token) === null || _1 === void 0 ? void 0 : _1.colorPrimary,
+    },
+    Popover: {
+        borderRadiusLG: 10,
+        // borderRadius: THEME.token?.borderRadiusLG,
+    },
+    Dropdown: {
+        borderRadiusSM: 0,
+        // borderRadius: THEME.token?.borderRadiusLG,
+        paddingXXS: 8,
+        controlItemBgHover: '#F2F9FF',
+        controlItemBgActive: '#DEEFFE',
+        colorPrimary: (_2 = THEME.token) === null || _2 === void 0 ? void 0 : _2.colorText,
+        controlItemBgActiveHover: '#DEEFFE',
+    },
+    Tooltip: {
+        colorBgSpotlight: (_3 = THEME.token) === null || _3 === void 0 ? void 0 : _3.bw8,
+        fontSize: 11,
+    },
+    Menu: {
+        itemHoverBg: '#F2F9FF',
+        activeBarBorderWidth: 0,
+        itemMarginInline: 0,
+        itemMarginBlock: 5,
+        itemBorderRadius: 5,
+        subMenuItemBg: 'transparent',
+        itemDisabledColor: (_4 = THEME.token) === null || _4 === void 0 ? void 0 : _4.colorTextDisabled,
+        itemActiveBg: (_5 = THEME.token) === null || _5 === void 0 ? void 0 : _5.blue1_1,
+    },
+    Form: {
+        itemMarginBottom: 15,
+    },
+    Table: {
+        headerBg: '#F9F9F9',
+        headerSortActiveBg: '#F9F9F9',
+        headerSortHoverBg: '#F9F9F9',
+        headerFilterHoverBg: '#F9F9F9',
+        fixedHeaderSortActiveBg: '#F9F9F9',
+        bodySortBg: '#ffffff',
+        fontWeightStrong: 700,
+        cellPaddingBlock: 10,
+        cellPaddingInline: 10,
+        borderColor: '#E5E5E5',
+        rowHoverBg: '#F2F9FF',
+        borderRadius: 0,
+        headerBorderRadius: 0,
+        rowSelectedBg: '#DEEFFE',
+        rowSelectedHoverBg: '#F2F9FF',
+        rowExpandedBg: '#F9F9F9',
     },
 };
+export const globalToken = theme.getDesignToken(THEME);

package/es/constants/variables.d.ts

@@ -17,3 +17,37 @@ export declare const GET_LIST_TYPE: {
     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;
+};
+export declare const METRIC_TYPE: {
+    NUMBER: string;
+    STRING: string;
+    SUGGESTION: string;
+    TEXT: string;
+    DATE_TIME: string;
+    DATE: string;
+    OBJECT_ID: string;
+    ARRAY: string;
+    ARRAY_NUMBER: string;
+    ARRAY_STRING: string;
+    ARRAY_DATE_TIME: string;
+    ARRAY_TEXT: string;
+    UNIQUE: string;
+    BOOLEAN: string;
+    OBJECT: string;
+};
+export declare const ENDPOINT: {
+    toolkitV2: string;
+};
+export declare const UOGS_PREFIX = "uogs_";

package/es/constants/variables.js

@@ -17,3 +17,40 @@ export const GET_LIST_TYPE = {
     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',
+};
+/* Filter */
+export const METRIC_TYPE = {
+    NUMBER: 'number',
+    STRING: 'string',
+    SUGGESTION: 'suggestion',
+    TEXT: 'text',
+    DATE_TIME: 'datetime',
+    DATE: 'date',
+    OBJECT_ID: 'object_id',
+    ARRAY: 'array',
+    ARRAY_NUMBER: 'array_number',
+    ARRAY_STRING: 'array_string',
+    ARRAY_DATE_TIME: 'array_datetime',
+    ARRAY_TEXT: 'array_text',
+    UNIQUE: 'unique',
+    BOOLEAN: 'boolean',
+    OBJECT: 'object',
+};
+const TOOLKIT_API_VERSION = '2.0';
+export const ENDPOINT = {
+    toolkitV2: `toolkit/v${TOOLKIT_API_VERSION}`,
+};
+export const UOGS_PREFIX = 'uogs_';

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,22 @@ export * from './useIntersectionObserver';
 export * from './useEffectOnlyOnce';
 export * from './useForceUpdate';
 export * from './useListingItemResize';
+export * from './useKeyEventCanvas';
+export * from './useDragEvent';
+export * from './useDropFile';
+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 './useEventListener';
+export * from './useDebounceCallback';
+export * from './useWindowSize';
+export * from './useCustomRouter';
+export * from './useUpdateEffect';

package/es/hooks/index.js

@@ -24,3 +24,22 @@ export * from './useIntersectionObserver';
 export * from './useEffectOnlyOnce';
 export * from './useForceUpdate';
 export * from './useListingItemResize';
+export * from './useKeyEventCanvas';
+export * from './useDragEvent';
+export * from './useDropFile';
+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 './useEventListener';
+export * from './useDebounceCallback';
+export * from './useWindowSize';
+export * from './useCustomRouter';
+export * from './useUpdateEffect';

package/es/hooks/useCustomRouter.d.ts

@@ -0,0 +1,33 @@
+import { To } from 'react-router-dom';
+/**
+ * Custom hook to handle navigation in React applications supporting both react-router v5 and v6.
+ *
+ * This hook tries to use `useNavigate` from `react-router-dom` for v6. If it fails, it falls back to
+ * `useHistory` for v5.
+ *
+ * @returns {Object} An object containing the `navigate` and `replace` functions.
+ *
+ * @returns {Function} return.navigate - Function to navigate to a specified route.
+ * @param {string | object} return.navigate.to - The target route path or location object.
+ * @param {Object} [return.navigate.options] - Optional navigation options.
+ *
+ * @returns {Function} return.replace - Function to replace the current route with a specified route.
+ * @param {string | object} return.replace.to - The target route path or location object.
+ * @param {Object} [return.replace.options] - Optional navigation options.
+ *
+ * @example
+ * const { navigate, replace } = useCustomRouter();
+ *
+ * // Navigate to a route
+ * navigate('/home');
+ *
+ * // Navigate with options
+ * navigate('/profile', { state: { userId: 1 } });
+ *
+ * // Replace current route
+ * replace('/login');
+ */
+export declare const useCustomRouter: () => {
+    navigate: (to: To, options?: any) => void;
+    replace: (to: To, options?: any) => void;
+};