react-simplikit 0.0.2 → 0.0.4

package/dist/index.js

@@ -0,0 +1,761 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ImpressionArea: () => ImpressionArea,
+  Separated: () => Separated,
+  SwitchCase: () => SwitchCase,
+  buildContext: () => buildContext,
+  mergeRefs: () => mergeRefs,
+  useAsyncEffect: () => useAsyncEffect,
+  useBooleanState: () => useBooleanState,
+  useCallbackOncePerRender: () => useCallbackOncePerRender,
+  useDebounce: () => useDebounce,
+  useImpressionRef: () => useImpressionRef,
+  useInputState: () => useInputState,
+  useIntersectionObserver: () => useIntersectionObserver,
+  useInterval: () => useInterval,
+  useLoading: () => useLoading,
+  useOutsideClickEffect: () => useOutsideClickEffect,
+  usePreservedCallback: () => usePreservedCallback,
+  usePreservedReference: () => usePreservedReference,
+  usePrevious: () => usePrevious,
+  useRefEffect: () => useRefEffect,
+  useStorageState: () => useStorageState,
+  useThrottle: () => useThrottle,
+  useTimeout: () => useTimeout,
+  useToggle: () => useToggle,
+  useVisibilityEvent: () => useVisibilityEvent
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/hooks/useImpressionRef/useImpressionRef.ts
+var import_react6 = require("react");
+
+// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
+var import_react3 = require("react");
+
+// src/hooks/usePreservedCallback/usePreservedCallback.ts
+var import_react = require("react");
+function usePreservedCallback(callback) {
+  const callbackRef = (0, import_react.useRef)(callback);
+  (0, import_react.useEffect)(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  return (0, import_react.useCallback)((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+// src/hooks/useRefEffect/useRefEffect.ts
+var import_react2 = require("react");
+function useRefEffect(callback, deps) {
+  const preservedCallback = usePreservedCallback(callback);
+  const cleanupCallbackRef = (0, import_react2.useRef)(() => {
+  });
+  const effect = (0, import_react2.useCallback)(
+    (element) => {
+      cleanupCallbackRef.current();
+      cleanupCallbackRef.current = () => {
+      };
+      if (element == null) {
+        return;
+      }
+      const cleanup = preservedCallback(element);
+      if (typeof cleanup === "function") {
+        cleanupCallbackRef.current = cleanup;
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [preservedCallback, ...deps]
+  );
+  return effect;
+}
+
+// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
+function useIntersectionObserver(callback, options) {
+  const preservedCallback = usePreservedCallback(callback);
+  const observer = (0, import_react3.useMemo)(() => {
+    if (typeof IntersectionObserver === "undefined") {
+      return;
+    }
+    return new IntersectionObserver(([entry]) => {
+      preservedCallback(entry);
+    }, options);
+  }, [preservedCallback, options]);
+  return useRefEffect(
+    (element) => {
+      observer?.observe(element);
+      return () => {
+        observer?.unobserve(element);
+      };
+    },
+    [preservedCallback, options]
+  );
+}
+
+// src/hooks/useVisibilityEvent/useVisibilityEvent.ts
+var import_react4 = require("react");
+function useVisibilityEvent(callback, options = {}) {
+  const handleVisibilityChange = (0, import_react4.useCallback)(() => {
+    callback(document.visibilityState);
+  }, [callback]);
+  (0, import_react4.useEffect)(() => {
+    if (options?.immediate ?? false) {
+      handleVisibilityChange();
+    }
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [handleVisibilityChange, options?.immediate]);
+}
+
+// src/hooks/useImpressionRef/useDebouncedCallback.ts
+var import_react5 = require("react");
+
+// src/hooks/useDebounce/debounce.ts
+function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
+  let pendingThis = void 0;
+  let pendingArgs = null;
+  const leading = edges != null && edges.includes("leading");
+  const trailing = edges == null || edges.includes("trailing");
+  const invoke = () => {
+    if (pendingArgs !== null) {
+      func.apply(pendingThis, pendingArgs);
+      pendingThis = void 0;
+      pendingArgs = null;
+    }
+  };
+  const onTimerEnd = () => {
+    if (trailing) {
+      invoke();
+    }
+    cancel();
+  };
+  let timeoutId = null;
+  const schedule = () => {
+    if (timeoutId != null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+      onTimerEnd();
+    }, debounceMs);
+  };
+  const cancelTimer = () => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  };
+  const cancel = () => {
+    cancelTimer();
+    pendingThis = void 0;
+    pendingArgs = null;
+  };
+  const debounced = function(...args) {
+    pendingThis = this;
+    pendingArgs = args;
+    const isFirstCall = timeoutId == null;
+    schedule();
+    if (leading && isFirstCall) {
+      invoke();
+    }
+  };
+  debounced.cancel = cancel;
+  return debounced;
+}
+
+// src/hooks/useImpressionRef/useDebouncedCallback.ts
+function useDebouncedCallback({
+  onChange,
+  timeThreshold
+}) {
+  const handleChange = usePreservedCallback(onChange);
+  const ref = (0, import_react5.useRef)({ value: false, clearPreviousDebounce: () => {
+  } });
+  (0, import_react5.useEffect)(() => {
+    const current = ref.current;
+    return () => {
+      current.clearPreviousDebounce();
+    };
+  }, []);
+  return (0, import_react5.useCallback)(
+    (nextValue) => {
+      if (nextValue === ref.current.value) {
+        return;
+      }
+      const debounced = debounce(() => {
+        handleChange(nextValue);
+        ref.current.value = nextValue;
+      }, timeThreshold);
+      ref.current.clearPreviousDebounce();
+      debounced();
+      ref.current.clearPreviousDebounce = debounced.cancel;
+    },
+    [handleChange, timeThreshold]
+  );
+}
+
+// src/hooks/useImpressionRef/useImpressionRef.ts
+function useImpressionRef({
+  onImpressionStart = () => {
+  },
+  onImpressionEnd = () => {
+  },
+  rootMargin,
+  areaThreshold = 0,
+  timeThreshold = 0
+}) {
+  const impressionStartHandler = usePreservedCallback(onImpressionStart);
+  const impressionEndHandler = usePreservedCallback(onImpressionEnd);
+  const isIntersectingRef = (0, import_react6.useRef)(false);
+  const impressionEventHandler = useDebouncedCallback({
+    timeThreshold,
+    onChange: (impressed) => {
+      (impressed ? impressionStartHandler : impressionEndHandler)();
+    }
+  });
+  useVisibilityEvent((documentVisible) => {
+    if (!isIntersectingRef.current) {
+      return;
+    }
+    impressionEventHandler(documentVisible === "visible");
+  });
+  return useIntersectionObserver(
+    (entry) => {
+      if (document.visibilityState === "hidden") {
+        return;
+      }
+      const currentRatio = entry.intersectionRatio;
+      const isIntersecting = areaThreshold === 0 ? entry.isIntersecting : currentRatio >= areaThreshold;
+      isIntersectingRef.current = isIntersecting;
+      impressionEventHandler(isIntersecting);
+    },
+    { rootMargin, threshold: areaThreshold }
+  );
+}
+
+// src/utils/mergeRefs/mergeRefs.ts
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (ref == null) {
+        continue;
+      }
+      if (typeof ref === "function") {
+        ref(value);
+        continue;
+      }
+      ref.current = value;
+    }
+  };
+}
+
+// src/components/ImpressionArea/ImpressionArea.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ImpressionArea({
+  as,
+  rootMargin,
+  areaThreshold,
+  timeThreshold,
+  onImpressionStart,
+  onImpressionEnd,
+  ref,
+  ...props
+}) {
+  const Component = as ?? "div";
+  const impressionRef = useImpressionRef({
+    onImpressionStart,
+    onImpressionEnd,
+    areaThreshold,
+    timeThreshold,
+    rootMargin
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref: mergeRefs(ref, impressionRef), ...props });
+}
+
+// src/components/Separated/Separated.tsx
+var import_react7 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Separated({ children, with: separator }) {
+  const childrenArray = import_react7.Children.toArray(children).filter(import_react7.isValidElement);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: childrenArray.map((child, i, { length }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react7.Fragment, { children: [
+    child,
+    i + 1 !== length ? separator : null
+  ] }, i)) });
+}
+
+// src/components/SwitchCase/SwitchCase.tsx
+function SwitchCase({ value, caseBy, defaultComponent = () => null }) {
+  const stringifiedValue = String(value);
+  return (caseBy[stringifiedValue] ?? defaultComponent)();
+}
+
+// src/hooks/useAsyncEffect/useAsyncEffect.ts
+var import_react8 = require("react");
+function useAsyncEffect(effect, deps) {
+  (0, import_react8.useEffect)(() => {
+    let cleanup;
+    effect().then((result) => {
+      cleanup = result;
+    });
+    return () => {
+      cleanup?.();
+    };
+  }, deps);
+}
+
+// src/hooks/useBooleanState/useBooleanState.ts
+var import_react9 = require("react");
+var useBooleanState = (defaultValue = false) => {
+  const [bool, setBool] = (0, import_react9.useState)(defaultValue);
+  const setTrue = (0, import_react9.useCallback)(() => {
+    setBool(true);
+  }, []);
+  const setFalse = (0, import_react9.useCallback)(() => {
+    setBool(false);
+  }, []);
+  const toggle2 = (0, import_react9.useCallback)(() => {
+    setBool((b) => !b);
+  }, []);
+  return [bool, setTrue, setFalse, toggle2];
+};
+
+// src/hooks/useCallbackOncePerRender/useCallbackOncePerRender.ts
+var import_react10 = require("react");
+function useCallbackOncePerRender(callback, deps) {
+  const hasFired = (0, import_react10.useRef)(false);
+  (0, import_react10.useEffect)(() => {
+    hasFired.current = false;
+  }, deps);
+  return usePreservedCallback((...args) => {
+    if (hasFired.current) {
+      return;
+    }
+    callback(...args);
+    hasFired.current = true;
+  });
+}
+
+// src/hooks/useDebounce/useDebounce.ts
+var import_react11 = require("react");
+var import_react12 = require("react");
+function useDebounce(callback, wait, options = {}) {
+  const preservedCallback = usePreservedCallback(callback);
+  const { leading = false, trailing = true } = options;
+  const edges = (0, import_react12.useMemo)(() => {
+    const _edges = [];
+    if (leading) {
+      _edges.push("leading");
+    }
+    if (trailing) {
+      _edges.push("trailing");
+    }
+    return _edges;
+  }, [leading, trailing]);
+  const debounced = (0, import_react12.useMemo)(() => {
+    return debounce(preservedCallback, wait, { edges });
+  }, [preservedCallback, wait, edges]);
+  (0, import_react11.useEffect)(() => {
+    return () => {
+      debounced.cancel();
+    };
+  }, [debounced]);
+  return debounced;
+}
+
+// src/hooks/useInputState/useInputState.ts
+var import_react13 = require("react");
+function useInputState(initialValue = "", transformValue = echo) {
+  const [value, setValue] = (0, import_react13.useState)(initialValue);
+  const handleValueChange = (0, import_react13.useCallback)(
+    ({ target: { value: value2 } }) => {
+      setValue(transformValue(value2));
+    },
+    [transformValue]
+  );
+  return [value, handleValueChange];
+}
+function echo(v) {
+  return v;
+}
+
+// src/hooks/useInterval/useInterval.ts
+var import_react14 = require("react");
+function useInterval(callback, options) {
+  const delay = typeof options === "number" ? options : options.delay;
+  const immediate = typeof options === "number" ? false : options.immediate;
+  const enabled = typeof options === "number" ? true : options.enabled ?? true;
+  const preservedCallback = usePreservedCallback(callback);
+  (0, import_react14.useEffect)(() => {
+    if (immediate === true && enabled) {
+      preservedCallback();
+    }
+  }, [immediate, preservedCallback, enabled]);
+  (0, import_react14.useEffect)(() => {
+    if (!enabled) {
+      return;
+    }
+    const id = window.setInterval(preservedCallback, delay);
+    return () => window.clearInterval(id);
+  }, [delay, preservedCallback, enabled]);
+}
+
+// src/hooks/useLoading/useLoading.ts
+var import_react15 = require("react");
+function useLoading() {
+  const [loading, setLoading] = (0, import_react15.useState)(false);
+  const ref = useIsMountedRef();
+  const startTransition = (0, import_react15.useCallback)(
+    async (promise) => {
+      try {
+        setLoading(true);
+        const data = await promise;
+        return data;
+      } finally {
+        if (ref.isMounted) {
+          setLoading(false);
+        }
+      }
+    },
+    [ref.isMounted]
+  );
+  return (0, import_react15.useMemo)(() => [loading, startTransition], [loading, startTransition]);
+}
+function useIsMountedRef() {
+  const ref = (0, import_react15.useRef)({ isMounted: true }).current;
+  (0, import_react15.useEffect)(() => {
+    ref.isMounted = true;
+    return () => {
+      ref.isMounted = false;
+    };
+  }, [ref]);
+  return ref;
+}
+
+// src/hooks/useOutsideClickEffect/useOutsideClickEffect.ts
+var import_react16 = require("react");
+function useOutsideClickEffect(container, callback) {
+  const containers = (0, import_react16.useRef)([]);
+  const handleDocumentClick = usePreservedCallback(({ target }) => {
+    if (target === null) {
+      return;
+    }
+    if (containers.current.length === 0) {
+      return;
+    }
+    if (containers.current.some((x) => x.contains(target))) {
+      return;
+    }
+    callback();
+  });
+  (0, import_react16.useEffect)(() => {
+    containers.current = [container].flat(1).filter((item) => item != null);
+  }, [container]);
+  (0, import_react16.useEffect)(() => {
+    document.addEventListener("click", handleDocumentClick);
+    return () => {
+      document.removeEventListener("click", handleDocumentClick);
+    };
+  }, [handleDocumentClick]);
+}
+
+// src/hooks/usePreservedReference/usePreservedReference.ts
+var import_react17 = require("react");
+function usePreservedReference(value, areValuesEqual = areDeeplyEqual) {
+  const ref = (0, import_react17.useRef)(value);
+  return (0, import_react17.useMemo)(() => {
+    if (!areValuesEqual(ref.current, value)) {
+      ref.current = value;
+    }
+    return ref.current;
+  }, [areValuesEqual, value]);
+}
+function areDeeplyEqual(x, y) {
+  return JSON.stringify(x) === JSON.stringify(y);
+}
+
+// src/hooks/usePrevious/usePrevious.ts
+var import_react18 = require("react");
+var strictEquals = (prev, next) => prev === next;
+function usePrevious(state, compare = strictEquals) {
+  const prevRef = (0, import_react18.useRef)(state);
+  const currentRef = (0, import_react18.useRef)(state);
+  const isFirstRender = (0, import_react18.useRef)(true);
+  (0, import_react18.useEffect)(() => {
+    isFirstRender.current = false;
+  }, []);
+  if (isFirstRender.current || compare(currentRef.current, state)) {
+    return prevRef.current;
+  }
+  prevRef.current = currentRef.current;
+  currentRef.current = state;
+  return prevRef.current;
+}
+
+// src/hooks/useStorageState/useStorageState.ts
+var import_react19 = require("react");
+
+// src/hooks/useStorageState/storage.ts
+var MemoStorage = class {
+  storage = /* @__PURE__ */ new Map();
+  get(key) {
+    return this.storage.get(key) ?? null;
+  }
+  set(key, value) {
+    this.storage.set(key, value);
+  }
+  remove(key) {
+    this.storage.delete(key);
+  }
+  clear() {
+    this.storage.clear();
+  }
+};
+var LocalStorage = class {
+  static canUse() {
+    const TEST_KEY = generateTestKey();
+    try {
+      localStorage.setItem(TEST_KEY, "test");
+      localStorage.removeItem(TEST_KEY);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  get(key) {
+    return localStorage.getItem(key);
+  }
+  set(key, value) {
+    localStorage.setItem(key, value);
+  }
+  remove(key) {
+    localStorage.removeItem(key);
+  }
+  clear() {
+    localStorage.clear();
+  }
+};
+var SessionStorage = class {
+  static canUse() {
+    const TEST_KEY = generateTestKey();
+    try {
+      sessionStorage.setItem(TEST_KEY, "test");
+      sessionStorage.removeItem(TEST_KEY);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  get(key) {
+    return sessionStorage.getItem(key);
+  }
+  set(key, value) {
+    sessionStorage.setItem(key, value);
+  }
+  remove(key) {
+    sessionStorage.removeItem(key);
+  }
+  clear() {
+    sessionStorage.clear();
+  }
+};
+function generateTestKey() {
+  return new Array(4).fill(null).map(() => Math.random().toString(36).slice(2)).join("");
+}
+function generateStorage() {
+  if (LocalStorage.canUse()) {
+    return new LocalStorage();
+  }
+  return new MemoStorage();
+}
+function generateSessionStorage() {
+  if (SessionStorage.canUse()) {
+    return new SessionStorage();
+  }
+  return new MemoStorage();
+}
+var safeLocalStorage = generateStorage();
+var safeSessionStorage = generateSessionStorage();
+
+// src/hooks/useStorageState/useStorageState.ts
+var listeners = /* @__PURE__ */ new Set();
+var emitListeners = () => {
+  listeners.forEach((listener) => listener());
+};
+function useStorageState(key, { storage = safeLocalStorage, defaultValue } = {}) {
+  const cache = (0, import_react19.useRef)({
+    data: null,
+    parsed: defaultValue
+  });
+  const getSnapshot = (0, import_react19.useCallback)(() => {
+    const data = storage.get(key);
+    if (data !== cache.current.data) {
+      try {
+        cache.current.parsed = data != null ? JSON.parse(data) : defaultValue;
+      } catch {
+        cache.current.parsed = defaultValue;
+      }
+      cache.current.data = data;
+    }
+    return cache.current.parsed;
+  }, [defaultValue, key, storage]);
+  const storageState = (0, import_react19.useSyncExternalStore)(
+    (onStoreChange) => {
+      listeners.add(onStoreChange);
+      const handler = (event) => {
+        if (event.key === key) {
+          onStoreChange();
+        }
+      };
+      window.addEventListener("storage", handler);
+      return () => {
+        listeners.delete(onStoreChange);
+        window.removeEventListener("storage", handler);
+      };
+    },
+    () => getSnapshot(),
+    () => defaultValue
+  );
+  const setStorageState = (0, import_react19.useCallback)(
+    (value) => {
+      const nextValue = typeof value === "function" ? value(getSnapshot()) : value;
+      if (nextValue == null) {
+        storage.remove(key);
+      } else {
+        storage.set(key, JSON.stringify(nextValue));
+      }
+      emitListeners();
+    },
+    [getSnapshot, key, storage]
+  );
+  return [storageState, setStorageState];
+}
+
+// src/hooks/useThrottle/useThrottle.ts
+var import_react20 = require("react");
+
+// src/hooks/useThrottle/throttle.ts
+function throttle(func, throttleMs, { edges = ["leading", "trailing"] } = {}) {
+  let pendingAt = null;
+  const debounced = debounce(func, throttleMs, { edges });
+  const throttled = function(...args) {
+    if (pendingAt == null) {
+      pendingAt = Date.now();
+    } else {
+      if (Date.now() - pendingAt >= throttleMs) {
+        pendingAt = Date.now();
+        debounced.cancel();
+        debounced(...args);
+      }
+    }
+    debounced(...args);
+  };
+  throttled.cancel = debounced.cancel;
+  return throttled;
+}
+
+// src/hooks/useThrottle/useThrottle.ts
+function useThrottle(callback, wait, options) {
+  const preservedCallback = usePreservedCallback(callback);
+  const preservedOptions = usePreservedReference(options ?? {});
+  const throttledCallback = (0, import_react20.useMemo)(() => {
+    return throttle(preservedCallback, wait, preservedOptions);
+  }, [preservedOptions, preservedCallback, wait]);
+  (0, import_react20.useEffect)(() => {
+    return () => {
+      throttledCallback.cancel();
+    };
+  }, [throttledCallback]);
+  return throttledCallback;
+}
+
+// src/hooks/useTimeout/useTimeout.ts
+var import_react21 = require("react");
+function useTimeout(callback, delay = 0) {
+  const preservedCallback = usePreservedCallback(callback);
+  (0, import_react21.useEffect)(() => {
+    const timeoutId = window.setTimeout(preservedCallback, delay);
+    return () => window.clearTimeout(timeoutId);
+  }, [delay, preservedCallback]);
+}
+
+// src/hooks/useToggle/useToggle.ts
+var import_react22 = require("react");
+function useToggle(initialValue = false) {
+  return (0, import_react22.useReducer)(toggle, initialValue);
+}
+var toggle = (state) => !state;
+
+// src/utils/buildContext/buildContext.tsx
+var import_react23 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function buildContext(contextName, defaultContextValues) {
+  const Context = (0, import_react23.createContext)(defaultContextValues ?? void 0);
+  function Provider({ children, ...contextValues }) {
+    const value = (0, import_react23.useMemo)(
+      () => Object.keys(contextValues).length > 0 ? contextValues : null,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [...Object.values(contextValues)]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Context.Provider, { value, children });
+  }
+  function useInnerContext() {
+    const context = (0, import_react23.useContext)(Context);
+    if (context != null) {
+      return context;
+    }
+    if (defaultContextValues != null) {
+      return defaultContextValues;
+    }
+    throw new Error(`\`${contextName}Context\` must be used within \`${contextName}Provider\``);
+  }
+  return [Provider, useInnerContext];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ImpressionArea,
+  Separated,
+  SwitchCase,
+  buildContext,
+  mergeRefs,
+  useAsyncEffect,
+  useBooleanState,
+  useCallbackOncePerRender,
+  useDebounce,
+  useImpressionRef,
+  useInputState,
+  useIntersectionObserver,
+  useInterval,
+  useLoading,
+  useOutsideClickEffect,
+  usePreservedCallback,
+  usePreservedReference,
+  usePrevious,
+  useRefEffect,
+  useStorageState,
+  useThrottle,
+  useTimeout,
+  useToggle,
+  useVisibilityEvent
+});