@woylie/doggo 0.15.1 → 0.16.1

package/README.md

@@ -21,7 +21,7 @@ The package can be installed by adding `doggo` to your list of dependencies in
 ```elixir
 def deps do
   [
-    {:doggo, "~> 0.15.1"}
+    {:doggo, "~> 0.16.1"}
   ]
 end
 ```
@@ -419,3 +419,10 @@ If you encounter any issues with a component, have suggestions for improvements,
 or need a component for a specific use case that isn't currently available,
 please don't hesitate to open a
 [Github issue](https://github.com/woylie/doggo/issues).
+
+## Related libraries
+
+- [ex_icon](https://github.com/woylie/ex_icon) - Generic icon library for
+  Phoenix LiveView.
+- [flop_phoenix](https://github.com/woylie/flop_phoenix) - Pagination, sortable
+  table and filter components for Flop.

package/assets/js/hooks/carousel.js

@@ -112,6 +112,8 @@ export function initCarousel(carousel) {
 
   // Auto rotation
   let isPaused = false;
+  let isHovered = false;
+  let isFocused = false;
 
   // Stop auto rotation if the last items does not wrap.
   const hasShowEnded = () =>
@@ -123,8 +125,11 @@ export function initCarousel(carousel) {
     syncPauseControl();
   };
 
+  const canRotate = () =>
+    isAutoRotationEnabled() && !isPaused && !isHovered && !isFocused;
+
   const startAutoRotation = () => {
-    if (!isAutoRotationEnabled() || isPaused) return;
+    if (!canRotate()) return;
     if (autoRotationTimer != null) return;
 
     if (hasShowEnded()) {
@@ -260,12 +265,8 @@ export function initCarousel(carousel) {
   // Pause when hovering or focusing, resume when leaving, unless
   // rotation is paused with the pause button.
 
-  let isHovered = false;
-  let isFocused = false;
-
-  const resume = () => {
-    if (!isHovered && !isFocused) startAutoRotation();
-  };
+  const isPauseControl = (el) =>
+    el != null && el.closest?.(`.${baseClass}-pause`) != null;
 
   carousel.addEventListener("pointerenter", () => {
     isHovered = true;
@@ -274,12 +275,17 @@ export function initCarousel(carousel) {
 
   carousel.addEventListener("pointerleave", () => {
     isHovered = false;
-    resume();
+    startAutoRotation();
   });
 
-  carousel.addEventListener("focusin", () => {
-    isFocused = true;
-    stopAutoRotation();
+  carousel.addEventListener("focusin", (e) => {
+    isFocused = !isPauseControl(e.target);
+
+    if (isFocused) {
+      stopAutoRotation();
+    } else {
+      startAutoRotation();
+    }
   });
 
   carousel.addEventListener("focusout", (e) => {
@@ -288,7 +294,7 @@ export function initCarousel(carousel) {
     if (carousel.contains(e.relatedTarget)) return;
 
     isFocused = false;
-    resume();
+    startAutoRotation();
   });
 
   // Initialize
@@ -303,7 +309,7 @@ export function initCarousel(carousel) {
     // A patch can add or remove the pause button, and with it the
     // rotation. Starting is a no-op while it runs or is paused.
     if (isAutoRotationEnabled()) {
-      resume();
+      startAutoRotation();
     } else {
       stopAutoRotation();
     }

package/assets/js/hooks/menu.js

@@ -64,20 +64,52 @@ export function initMenu(menu) {
   // through the `aria-controls` pointing at it. Compared rather than put in a
   // selector, because the id is the caller's and may hold characters that
   // would change what the selector matches.
-  const close = () => {
-    const button = Array.from(
-      document.querySelectorAll("[aria-controls]"),
-    ).find((el) => el.getAttribute("aria-controls") === menu.id);
+  const getButton = () =>
+    Array.from(document.querySelectorAll("[aria-controls]")).find(
+      (el) => el.getAttribute("aria-controls") === menu.id,
+    );
+
+  const close = ({ focusButton } = { focusButton: true }) => {
+    const button = getButton();
 
     if (!button) return false;
 
     menu.setAttribute("hidden", "");
     button.setAttribute("aria-expanded", "false");
-    button.focus();
+
+    if (focusButton) button.focus();
 
     return true;
   };
 
+  const closeOnClickOutside = (e) => {
+    if (menu.hidden) return;
+
+    const button = getButton();
+
+    if (!button) return;
+    if (menu.contains(e.target) || button.contains(e.target)) return;
+
+    close({ focusButton: false });
+  };
+
+  document.addEventListener("click", closeOnClickOutside);
+
+  const closeOnButtonEscape = (e) => {
+    if (e.key !== "Escape" || menu.hidden) return;
+
+    const button = getButton();
+
+    if (!button || !button.contains(e.target)) return;
+
+    if (close()) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+
+  document.addEventListener("keydown", closeOnButtonEscape, true);
+
   menu.addEventListener("keydown", (e) => {
     const items = getItems();
     const currentIdx = items.indexOf(e.target.closest(ITEMS));
@@ -124,7 +156,12 @@ export function initMenu(menu) {
 
   restoreTabStop();
 
-  return { update: restoreTabStop };
+  const destroy = () => {
+    document.removeEventListener("click", closeOnClickOutside);
+    document.removeEventListener("keydown", closeOnButtonEscape, true);
+  };
+
+  return { update: restoreTabStop, destroy };
 }
 
 export default {
@@ -135,4 +172,8 @@ export default {
   updated() {
     this.instance.update();
   },
+
+  destroyed() {
+    this.instance.destroy();
+  },
 };

package/assets/js/hooks/tree.js

@@ -10,7 +10,26 @@ const labelOf = (item) =>
 const parentOf = (item) =>
   item.parentElement.closest('[role="treeitem"]') || null;
 
-export function initTree(tree) {
+const labelText = (item) => {
+  const label = labelOf(item);
+
+  if (!label) return "";
+
+  const copy = label.cloneNode(true);
+
+  for (const node of copy.querySelectorAll('[aria-hidden="true"], svg')) {
+    node.remove();
+  }
+
+  return copy.textContent;
+};
+
+const domWriter = {
+  setAttribute: (el, attr, value) => el.setAttribute(attr, value),
+  removeAttribute: (el, attr) => el.removeAttribute(attr),
+};
+
+export function initTree(tree, writer = domWriter) {
   // Visible items only. A collapsed branch takes its descendants out of the
   // sequence.
   const getItems = () =>
@@ -18,22 +37,6 @@ export function initTree(tree) {
       (item) => !item.closest('[role="group"][hidden]'),
     );
 
-  // The hook owns the expanded state. A patch re-renders the server's
-  // version, so it is remembered by position and applied again.
-  const pathOf = (item) => {
-    const path = [];
-
-    for (let node = item; node; node = parentOf(node)) {
-      const siblings = Array.from(
-        node.parentElement.querySelectorAll(':scope > [role="treeitem"]'),
-      );
-      path.unshift(siblings.indexOf(node));
-    }
-
-    return path.join("-");
-  };
-
-  const expandedPaths = new Set();
   let activeIdx = 0;
   let search = "";
   let searchTimeout;
@@ -46,7 +49,7 @@ export function initTree(tree) {
     const active = getItems()[idx];
 
     for (const item of tree.querySelectorAll('[role="treeitem"]')) {
-      item.setAttribute("tabindex", item === active ? "0" : "-1");
+      writer.setAttribute(item, "tabindex", item === active ? "0" : "-1");
     }
   };
 
@@ -56,25 +59,17 @@ export function initTree(tree) {
   };
 
   const setExpanded = (item, expanded) => {
-    item.setAttribute("aria-expanded", expanded ? "true" : "false");
+    writer.setAttribute(item, "aria-expanded", expanded ? "true" : "false");
 
     const group = groupOf(item);
 
     if (group) {
       if (expanded) {
-        group.removeAttribute("hidden");
+        writer.removeAttribute(group, "hidden");
       } else {
-        group.setAttribute("hidden", "");
+        writer.setAttribute(group, "hidden", "");
       }
     }
-
-    const path = pathOf(item);
-
-    if (expanded) {
-      expandedPaths.add(path);
-    } else {
-      expandedPaths.delete(path);
-    }
   };
 
   // Only the caret toggles. A click on the label is the caller's, for
@@ -106,8 +101,7 @@ export function initTree(tree) {
 
     const repeated = [...search].every((char) => char === search[0]);
     const items = getItems();
-    // The item's own label, but not nested items.
-    const labels = items.map((item) => labelOf(item)?.textContent ?? "");
+    const labels = items.map(labelText);
     const idx = searchIndex(
       labels,
       repeated ? search[0] : search,
@@ -131,7 +125,7 @@ export function initTree(tree) {
       if (isBranch(item) && !isExpanded(item)) {
         setExpanded(item, true);
       } else if (isBranch(item)) {
-        const child = groupOf(item).querySelector('[role="treeitem"]');
+        const child = groupOf(item)?.querySelector('[role="treeitem"]');
 
         if (child) moveTo(getItems().indexOf(child));
       }
@@ -155,6 +149,7 @@ export function initTree(tree) {
 
     const nextIdx = targetIndex(e.key, currentIdx, items.length, {
       orientation: "vertical",
+      wrap: false,
     });
 
     if (nextIdx !== null) {
@@ -170,12 +165,6 @@ export function initTree(tree) {
   });
 
   const restore = () => {
-    for (const item of tree.querySelectorAll('[role="treeitem"]')) {
-      if (isBranch(item) && expandedPaths.has(pathOf(item))) {
-        setExpanded(item, true);
-      }
-    }
-
     const items = getItems();
 
     if (items.length > 0) setActive(clamp(activeIdx, items.length));
@@ -188,7 +177,12 @@ export function initTree(tree) {
 
 export default {
   mounted() {
-    this.instance = initTree(this.el);
+    const js = this.js();
+
+    this.instance = initTree(this.el, {
+      setAttribute: (el, attr, value) => js.setAttribute(el, attr, value),
+      removeAttribute: (el, attr) => js.removeAttribute(el, attr),
+    });
   },
 
   updated() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woylie/doggo",
-  "version": "0.15.1",
+  "version": "0.16.1",
   "description": "JavaScript hooks for the Doggo component library",
   "keywords": [
     "phoenix",