Add the useParent hook

Author: MatiasWorker

package.json

@@ -1,15 +1,16 @@
 {
   "name": "@atomico/kit",
   "description": "Series of utilities in hooks format to extend the operation of Atomico",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "type": "module",
   "exports": {
     "./use-child-nodes": "./src/use-child-nodes/use-child-nodes.js",
     "./use-css-light-dom": "./src/use-css-light-dom/use-css-light-dom.js",
     "./use-force-render": "./src/use-force-render/use-force-render.js",
     "./use-render": "./src/use-render/use-render.js",
     "./use-router": "./src/use-router/use-router.js",
-    "./use-slot": "./src/use-slot/use-slot.js"
+    "./use-slot": "./src/use-slot/use-slot.js",
+    "./use-parent": "./src/use-parent/use-parent.js"
   },
   "typings": "*.d.ts",
   "editable": "https://github.com/atomicojs/atomico-kit/tree/master",

src/use-parent/use-parent.js

@@ -0,0 +1,17 @@
+import { useHost, useMemo } from "atomico";
+/**
+ * @param {string} matches
+ * @returns {import("atomico").Ref<HTMLElement>}
+ */
+export function useParent(matches) {
+  const host = useHost();
+  return useMemo(() => {
+    let { current } = host;
+    while ((current = current.parentNode || current.host)) {
+      if (current.matches && current.matches(matches)) {
+        return { current };
+      }
+    }
+    return {};
+  }, [matches]);
+}

src/use-parent/use-parent.test.js

@@ -0,0 +1,29 @@
+import { expect } from "@esm-bundle/chai";
+import { createHooks } from "atomico/test-hooks";
+import { useParent } from "./use-parent.js";
+
+it("useParent", () => {
+  const host = document.createElement("div");
+  const hooks = createHooks(null, host);
+
+  document.body.appendChild(host);
+
+  hooks.load(() => {
+    const ref = useParent("body");
+    expect(ref.current).to.equal(document.body);
+  });
+});
+
+it("useParent shadowRoot", () => {
+  const host = document.createElement("div");
+  const child = new Image();
+  host.attachShadow({ mode: "open" }).appendChild(child);
+  const hooks = createHooks(null, child);
+
+  document.body.appendChild(host);
+
+  hooks.load(() => {
+    const ref = useParent("body");
+    expect(ref.current).to.equal(document.body);
+  });
+});

use-parent.d.ts

@@ -0,0 +1 @@
+export { useParent } from "./src/use-parent/use-parent.js";