@hanzogui/react-native-web-internals 2.0.0-rc.41-hanzoai.5

package/dist/cjs/modules/useHover/__tests__/index-test.cjs

@@ -0,0 +1,382 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var import_dom_event_testing_library = require("dom-event-testing-library");
+var React = __toESM(require("react"), 1);
+var ReactDOM = __toESM(require("react-dom"), 1);
+var import_test_utils = require("react-dom/test-utils");
+var import_modality = require("../../modality/index.cjs");
+var import__ = __toESM(require("../index.cjs"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+function createRoot(rootNode) {
+  return {
+    render(element) {
+      ReactDOM.render(element, rootNode);
+    }
+  };
+}
+(0, import_dom_event_testing_library.describeWithPointerEvent)("useHover", hasPointerEvents => {
+  let root;
+  let rootNode;
+  beforeEach(() => {
+    (0, import_dom_event_testing_library.setPointerEvent)(hasPointerEvents);
+    rootNode = document.createElement("div");
+    document.body.appendChild(rootNode);
+    root = createRoot(rootNode);
+  });
+  afterEach(() => {
+    root.render(null);
+    document.body.removeChild(rootNode);
+    rootNode = null;
+    root = null;
+    (0, import_modality.testOnly_resetActiveModality)();
+    (0, import_dom_event_testing_library.clearPointers)();
+  });
+  describe("contain", () => {
+    let onHoverChange, onHoverStart, onHoverUpdate, onHoverEnd, ref, childRef;
+    const componentInit = () => {
+      onHoverChange = jest.fn();
+      onHoverStart = jest.fn();
+      onHoverUpdate = jest.fn();
+      onHoverEnd = jest.fn();
+      ref = React.createRef();
+      childRef = React.createRef();
+      const Component = () => {
+        (0, import__.default)(ref, {
+          onHoverChange,
+          onHoverStart,
+          onHoverUpdate,
+          onHoverEnd
+        });
+        (0, import__.default)(childRef, {
+          contain: true
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          ref,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+            ref: childRef
+          })
+        });
+      };
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {}));
+      });
+    };
+    test("contains the hover gesture", () => {
+      componentInit();
+      const target = (0, import_dom_event_testing_library.createEventTarget)(ref.current);
+      const child = (0, import_dom_event_testing_library.createEventTarget)(childRef.current);
+      (0, import_test_utils.act)(() => {
+        target.pointerover();
+        target.pointerout();
+        child.pointerover();
+      });
+      expect(onHoverEnd).toBeCalled();
+      (0, import_test_utils.act)(() => {
+        child.pointerout();
+      });
+      expect(onHoverStart).toBeCalled();
+    });
+  });
+  describe("disabled", () => {
+    let onHoverChange, onHoverStart, onHoverUpdate, onHoverEnd, ref;
+    const componentInit = () => {
+      onHoverChange = jest.fn();
+      onHoverStart = jest.fn();
+      onHoverUpdate = jest.fn();
+      onHoverEnd = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        (0, import__.default)(ref, {
+          disabled: true,
+          onHoverChange,
+          onHoverStart,
+          onHoverUpdate,
+          onHoverEnd
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          ref
+        });
+      };
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {}));
+      });
+    };
+    test("does not call callbacks", () => {
+      componentInit();
+      const target = (0, import_dom_event_testing_library.createEventTarget)(ref.current);
+      (0, import_test_utils.act)(() => {
+        target.pointerover();
+        target.pointerout();
+      });
+      expect(onHoverChange).not.toBeCalled();
+      expect(onHoverStart).not.toBeCalled();
+      expect(onHoverUpdate).not.toBeCalled();
+      expect(onHoverEnd).not.toBeCalled();
+    });
+  });
+  describe("onHoverStart", () => {
+    let onHoverStart, ref;
+    const componentInit = () => {
+      onHoverStart = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        (0, import__.default)(ref, {
+          onHoverStart
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          ref
+        });
+      };
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {}));
+      });
+    };
+    test("is called for mouse pointers", () => {
+      componentInit();
+      const target = (0, import_dom_event_testing_library.createEventTarget)(ref.current);
+      (0, import_test_utils.act)(() => {
+        target.pointerover({
+          pointerType: "mouse"
+        });
+      });
+      expect(onHoverStart).toBeCalledTimes(1);
+    });
+    test("is not called for touch pointers", () => {
+      componentInit();
+      const target = (0, import_dom_event_testing_library.createEventTarget)(ref.current);
+      (0, import_test_utils.act)(() => {
+        target.pointerdown({
+          pointerType: "touch"
+        });
+        target.pointerup({
+          pointerType: "touch"
+        });
+      });
+      expect(onHoverStart).not.toBeCalled();
+    });
+    test("is called if a mouse pointer is used after a touch pointer", () => {
+      componentInit();
+      const target = (0, import_dom_event_testing_library.createEventTarget)(ref.current);
+      (0, import_test_utils.act)(() => {
+        target.pointerdown({
+          pointerType: "touch"
+        });
+        target.pointerup({
+          pointerType: "touch"
+        });
+        target.pointerover({
+          pointerType: "mouse"
+        });
+      });
+      expect(onHoverStart).toBeCalledTimes(1);
+    });
+  });
+  describe("onHoverChange", () => {
+    let onHoverChange, ref;
+    const componentInit = () => {
+      onHoverChange = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        (0, import__.default)(ref, {
+          onHoverChange
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          ref
+        });
+      };
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {}));
+      });
+    };
+    test("is called for mouse pointers", () => {
+      componentInit();
+      const target = (0, import_dom_event_testing_library.createEventTarget)(ref.current);
+      (0, import_test_utils.act)(() => {
+        target.pointerover();
+      });
+      expect(onHoverChange).toBeCalledTimes(1);
+      expect(onHoverChange).toBeCalledWith(true);
+      (0, import_test_utils.act)(() => {
+        target.pointerout();
+      });
+      expect(onHoverChange).toBeCalledTimes(2);
+      expect(onHoverChange).toBeCalledWith(false);
+    });
+    test("is not called for touch pointers", () => {
+      componentInit();
+      const target = (0, import_dom_event_testing_library.createEventTarget)(ref.current);
+      (0, import_test_utils.act)(() => {
+        target.pointerdown({
+          pointerType: "touch"
+        });
+        target.pointerup({
+          pointerType: "touch"
+        });
+      });
+      expect(onHoverChange).not.toBeCalled();
+    });
+  });
+  describe("onHoverEnd", () => {
+    let onHoverEnd, ref, childRef;
+    const componentInit = () => {
+      onHoverEnd = jest.fn();
+      ref = React.createRef();
+      childRef = React.createRef();
+      const Component = () => {
+        (0, import__.default)(ref, {
+          onHoverEnd
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          ref,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+            ref: childRef
+          })
+        });
+      };
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {}));
+      });
+    };
+    test("is called for mouse pointers", () => {
+      componentInit();
+      const target = (0, import_dom_event_testing_library.createEventTarget)(ref.current);
+      (0, import_test_utils.act)(() => {
+        target.pointerover();
+        target.pointerout();
+      });
+      expect(onHoverEnd).toBeCalledTimes(1);
+    });
+    test("is not called for touch pointers", () => {
+      componentInit();
+      const target = (0, import_dom_event_testing_library.createEventTarget)(ref.current);
+      (0, import_test_utils.act)(() => {
+        target.pointerdown({
+          pointerType: "touch"
+        });
+        target.pointerup({
+          pointerType: "touch"
+        });
+      });
+      expect(onHoverEnd).not.toBeCalled();
+    });
+    test("is not called when entering children of the target", () => {
+      componentInit();
+      const target = (0, import_dom_event_testing_library.createEventTarget)(ref.current);
+      const child = (0, import_dom_event_testing_library.createEventTarget)(childRef.current);
+      (0, import_test_utils.act)(() => {
+        target.pointerover();
+        target.pointerout({
+          relatedTarget: childRef.current
+        });
+        child.pointerover({
+          relatedTarget: target.node
+        });
+      });
+      expect(onHoverEnd).not.toBeCalled();
+    });
+  });
+  describe("onHoverUpdate", () => {
+    test('is called after the active pointer moves"', () => {
+      const onHoverUpdate = jest.fn();
+      const ref = React.createRef();
+      const Component = () => {
+        (0, import__.default)(ref, {
+          onHoverUpdate
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          ref
+        });
+      };
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {}));
+      });
+      const target = (0, import_dom_event_testing_library.createEventTarget)(ref.current);
+      (0, import_test_utils.act)(() => {
+        target.pointerover();
+        target.pointerhover({
+          x: 0,
+          y: 0
+        });
+        target.pointerhover({
+          x: 1,
+          y: 1
+        });
+      });
+      expect(onHoverUpdate).toBeCalledTimes(2);
+    });
+  });
+  describe("repeat use", () => {
+    let onHoverChange, onHoverStart, onHoverUpdate, onHoverEnd, ref;
+    const componentInit = () => {
+      onHoverChange = jest.fn();
+      onHoverStart = jest.fn();
+      onHoverUpdate = jest.fn();
+      onHoverEnd = jest.fn();
+      ref = React.createRef();
+      const Component = () => {
+        (0, import__.default)(ref, {
+          onHoverChange,
+          onHoverStart,
+          onHoverUpdate,
+          onHoverEnd
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          ref
+        });
+      };
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {}));
+      });
+    };
+    test("callbacks are called each time", () => {
+      componentInit();
+      const target = (0, import_dom_event_testing_library.createEventTarget)(ref.current);
+      (0, import_test_utils.act)(() => {
+        target.pointerover();
+        target.pointerhover({
+          x: 1,
+          y: 1
+        });
+        target.pointerout();
+      });
+      expect(onHoverStart).toBeCalledTimes(1);
+      expect(onHoverUpdate).toBeCalledTimes(1);
+      expect(onHoverEnd).toBeCalledTimes(1);
+      expect(onHoverChange).toBeCalledTimes(2);
+      (0, import_test_utils.act)(() => {
+        target.pointerover();
+        target.pointerhover({
+          x: 1,
+          y: 1
+        });
+        target.pointerout();
+      });
+      expect(onHoverStart).toBeCalledTimes(2);
+      expect(onHoverUpdate).toBeCalledTimes(2);
+      expect(onHoverEnd).toBeCalledTimes(2);
+      expect(onHoverChange).toBeCalledTimes(4);
+    });
+  });
+});

package/dist/cjs/modules/useHover/index.cjs

@@ -0,0 +1,140 @@
+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);
+var useHover_exports = {};
+__export(useHover_exports, {
+  useHover: () => useHover
+});
+module.exports = __toCommonJS(useHover_exports);
+var import_modality = require("../modality/index.cjs");
+var import_useEvent = require("../useEvent/index.cjs");
+var import_useLayoutEffect = require("../useLayoutEffect/index.cjs");
+const emptyObject = {};
+const opts = {
+  passive: true
+};
+const lockEventType = "react-gui:hover:lock";
+const unlockEventType = "react-gui:hover:unlock";
+const supportsPointerEvent = () => !!(typeof window !== "undefined" && window.PointerEvent != null);
+function dispatchCustomEvent(target, type, payload) {
+  const event = document.createEvent("CustomEvent");
+  const {
+    bubbles = true,
+    cancelable = true,
+    detail
+  } = payload || emptyObject;
+  event.initCustomEvent(type, bubbles, cancelable, detail);
+  target.dispatchEvent(event);
+}
+function getPointerType(event) {
+  const {
+    pointerType
+  } = event;
+  return pointerType != null ? pointerType : (0, import_modality.getModality)();
+}
+function useHover(targetRef, config) {
+  const {
+    contain,
+    disabled,
+    onHoverStart,
+    onHoverChange,
+    onHoverUpdate,
+    onHoverEnd
+  } = config;
+  const canUsePE = supportsPointerEvent();
+  const addMoveListener = (0, import_useEvent.useEvent)(canUsePE ? "pointermove" : "mousemove", opts);
+  const addEnterListener = (0, import_useEvent.useEvent)(canUsePE ? "pointerenter" : "mouseenter", opts);
+  const addLeaveListener = (0, import_useEvent.useEvent)(canUsePE ? "pointerleave" : "mouseleave", opts);
+  const addLockListener = (0, import_useEvent.useEvent)(lockEventType, opts);
+  const addUnlockListener = (0, import_useEvent.useEvent)(unlockEventType, opts);
+  (0, import_useLayoutEffect.useLayoutEffectImpl)(() => {
+    const target = targetRef.current;
+    if (target !== null) {
+      const hoverEnd = function (e) {
+        if (onHoverEnd != null) {
+          onHoverEnd(e);
+        }
+        if (onHoverChange != null) {
+          onHoverChange(false);
+        }
+        addMoveListener(target, null);
+        addLeaveListener(target, null);
+      };
+      const leaveListener = function (e) {
+        const target2 = targetRef.current;
+        if (target2 != null && getPointerType(e) !== "touch") {
+          if (contain) {
+            dispatchCustomEvent(target2, unlockEventType);
+          }
+          hoverEnd(e);
+        }
+      };
+      const moveListener = function (e) {
+        if (getPointerType(e) !== "touch") {
+          if (onHoverUpdate != null) {
+            if (e.x == null) {
+              e.x = e.clientX;
+            }
+            if (e.y == null) {
+              e.y = e.clientY;
+            }
+            onHoverUpdate(e);
+          }
+        }
+      };
+      const hoverStart = function (e) {
+        if (onHoverStart != null) {
+          onHoverStart(e);
+        }
+        if (onHoverChange != null) {
+          onHoverChange(true);
+        }
+        if (onHoverUpdate != null) {
+          addMoveListener(target, !disabled ? moveListener : null);
+        }
+        addLeaveListener(target, !disabled ? leaveListener : null);
+      };
+      const enterListener = function (e) {
+        const target2 = targetRef.current;
+        if (target2 != null && getPointerType(e) !== "touch") {
+          if (contain) {
+            dispatchCustomEvent(target2, lockEventType);
+          }
+          hoverStart(e);
+          const lockListener = function (lockEvent) {
+            if (lockEvent.target !== target2) {
+              hoverEnd(e);
+            }
+          };
+          const unlockListener = function (lockEvent) {
+            if (lockEvent.target !== target2) {
+              hoverStart(e);
+            }
+          };
+          addLockListener(target2, !disabled ? lockListener : null);
+          addUnlockListener(target2, !disabled ? unlockListener : null);
+        }
+      };
+      addEnterListener(target, !disabled ? enterListener : null);
+    }
+  }, [addEnterListener, addMoveListener, addLeaveListener, addLockListener, addUnlockListener, contain, disabled, onHoverStart, onHoverChange, onHoverUpdate, onHoverEnd, targetRef]);
+}

package/dist/cjs/modules/useLayoutEffect/index.cjs

@@ -0,0 +1,41 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var useLayoutEffect_exports = {};
+__export(useLayoutEffect_exports, {
+  useLayoutEffectImpl: () => useLayoutEffectImpl
+});
+module.exports = __toCommonJS(useLayoutEffect_exports);
+var import_react = __toESM(require("react"), 1);
+var import_canUseDOM = require("../canUseDOM.cjs");
+const useLayoutEffectImpl = import_canUseDOM.canUseDOM ? import_react.default.useLayoutEffect : import_react.default.useEffect;

package/dist/cjs/modules/useLocale/index.cjs

@@ -0,0 +1,69 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var useLocale_exports = {};
+__export(useLocale_exports, {
+  LocaleProvider: () => LocaleProvider,
+  getLocaleDirection: () => getLocaleDirection,
+  useLocaleContext: () => useLocaleContext
+});
+module.exports = __toCommonJS(useLocale_exports);
+var import_react = __toESM(require("react"), 1);
+var import_isLocaleRTL = require("./isLocaleRTL.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const defaultLocale = {
+  direction: "ltr",
+  locale: "en-US"
+};
+const LocaleContext = import_react.default.createContext(defaultLocale);
+function getLocaleDirection(locale) {
+  return (0, import_isLocaleRTL.isLocaleRTL)(locale) ? "rtl" : "ltr";
+}
+function LocaleProvider(props) {
+  const {
+    direction,
+    locale,
+    children
+  } = props;
+  const needsContext = direction || locale;
+  return needsContext ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(LocaleContext.Provider, {
+    value: {
+      direction: locale ? getLocaleDirection(locale) : direction,
+      locale
+    },
+    children
+  }) : children;
+}
+function useLocaleContext() {
+  return import_react.default.useContext(LocaleContext);
+}