@antscorp/antsomi-ui 1.3.5-beta.2 → 1.3.5-beta.200

package/es/constants/index.d.ts

@@ -1,4 +1,11 @@
-export { THEME } from './theme';
+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,4 +1,11 @@
-export { THEME } from './theme';
+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,10 +5,23 @@ 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;
     GET_LIST_PROMOTION_POOL: string;
     GET_LIST_CUSTOM: string;
     GET_SAVE_CUSTOM_FUNCTION: string;
+    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
@@ -18,4 +19,20 @@ export const QUERY_KEYS = {
     // Custom Function
     GET_LIST_CUSTOM: 'GET_LIST_CUSTOM',
     GET_SAVE_CUSTOM_FUNCTION: 'GET_SAVE_CUSTOM_FUNCTION',
+    // Template Listing
+    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

@@ -0,0 +1,50 @@
+export declare const PUBLIC_LEVEL: {
+    readonly RESTRICTED: 0;
+    readonly PUBLIC: 1;
+};
+export declare const TEMPLATE_STATUS: {
+    readonly ACTIVE: 1;
+    readonly REMOVED: 80;
+};
+export declare const LIMIT_LIST_PER_PAGE = 10;
+export declare const CATEGORY_SPLIT_KEY = "::";
+export declare const LAYOUT_TEMPLATE: {
+    POP_UP: {
+        id: number;
+        name: string;
+        label: string;
+    };
+    FLOATING_BAR: {
+        id: number;
+        name: string;
+        label: string;
+    };
+    FULL_SCREEN: {
+        id: number;
+        name: string;
+        label: string;
+    };
+    INLINE: {
+        id: number;
+        name: string;
+        label: string;
+    };
+    SLIDE_IN: {
+        id: number;
+        name: string;
+        label: string;
+    };
+    GAMIFIED: {
+        id: number;
+        name: string;
+        label: string;
+    };
+};
+export declare const TEMPLATE_CATEGORY_KEYS: {
+    readonly INDUSTRY: "industry";
+    readonly SEASONALITY: "seasonality";
+    readonly GOAL: "goal";
+    readonly OBJECTIVE: "objective";
+    readonly JOURNEY_TYPE: "journey_type";
+    readonly LIFECYCLE_STAGE: "lifecycle_stage";
+};

package/es/constants/templateListing.js

@@ -0,0 +1,52 @@
+export const PUBLIC_LEVEL = {
+    RESTRICTED: 0,
+    PUBLIC: 1,
+};
+export const TEMPLATE_STATUS = {
+    ACTIVE: 1,
+    REMOVED: 80,
+};
+export const LIMIT_LIST_PER_PAGE = 10;
+export const CATEGORY_SPLIT_KEY = '::';
+export const LAYOUT_TEMPLATE = {
+    POP_UP: {
+        id: 1,
+        name: 'pop_up',
+        label: 'Popup',
+    },
+    FLOATING_BAR: {
+        id: 2,
+        name: 'floating_bar',
+        label: 'Floating Bar',
+    },
+    FULL_SCREEN: {
+        id: 3,
+        name: 'full_screen',
+        label: 'Fullscreen',
+    },
+    INLINE: {
+        id: 4,
+        name: 'inline',
+        label: 'Inline',
+    },
+    SLIDE_IN: {
+        id: 5,
+        name: 'slide_in',
+        label: 'Slide-in',
+    },
+    GAMIFIED: {
+        id: 6,
+        name: 'gamified',
+        label: 'Gamified',
+    },
+};
+export const TEMPLATE_CATEGORY_KEYS = {
+    // DEVICE_TYPE: 'device_type',
+    // TEMPLATE_TYPE: 'template_type',
+    INDUSTRY: 'industry',
+    SEASONALITY: 'seasonality',
+    GOAL: 'goal',
+    OBJECTIVE: 'objective',
+    JOURNEY_TYPE: 'journey_type',
+    LIFECYCLE_STAGE: 'lifecycle_stage',
+};

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

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

@@ -20,3 +20,18 @@ export function useDeepCompareEffect(callback, dependencies) {
     useEffect(callback, dependencies === null || dependencies === void 0 ? void 0 : dependencies.map(useDeepCompareMemoize));
 }
 export { useDeepCompareMemo } from './useDeepCompareMemo';
+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;

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

@@ -0,0 +1,2 @@
+import { DependencyList } from 'react';
+export declare const useEffectOnlyOnce: (fn: Function, dependencies: DependencyList) => void;

package/es/hooks/useEffectOnlyOnce.js

@@ -0,0 +1,12 @@
+// Libraries
+import { useEffect, useState } from 'react';
+export const useEffectOnlyOnce = (fn, dependencies) => {
+    const [didLoad, setDidLoad] = useState(false);
+    useEffect(() => {
+        if (!didLoad) {
+            fn();
+            setDidLoad(true);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [...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/useForceUpdate.d.ts

@@ -0,0 +1 @@
+export declare const useForceUpdate: () => () => void;

package/es/hooks/useForceUpdate.js

@@ -0,0 +1,5 @@
+import { useCallback, useState } from 'react';
+export const useForceUpdate = () => {
+    const [, updateState] = useState();
+    return useCallback(() => updateState({}), []);
+};