shadcn_phlexcomponents 0.1.16 → 0.1.18

data/app/javascript/controllers/dropdown_menu_controller.js

@@ -1,238 +1,218 @@
-import { Controller } from "@hotwired/stimulus";
-import { useClickOutside } from "stimulus-use";
-import { initFloatingUi } from "../utils/floating_ui";
-import {
-  getSameLevelItems,
-  focusTrigger,
-  hideContent,
-  showContent,
-  lockScroll,
-  unlockScroll,
-  getStimulusInstance,
-  onClickOutside,
-  getNextEnabledIndex,
-  getPreviousEnabledIndex,
-  focusElement,
-} from "../utils";
+import { Controller } from '@hotwired/stimulus';
+import { useClickOutside } from 'stimulus-use';
+import { initFloatingUi } from '../utils/floating_ui';
+import { getSameLevelItems, focusTrigger, hideContent, showContent, lockScroll, unlockScroll, getStimulusInstance, onClickOutside, getNextEnabledIndex, getPreviousEnabledIndex, focusElement, } from '../utils';
 const onKeydown = (controller, event) => {
-  const key = event.key;
-  if (["Tab", "Enter", " "].includes(key)) event.preventDefault();
-  if (key === "Home") {
-    controller.focusItemByIndex(null, 0);
-  } else if (key === "End") {
-    controller.focusItemByIndex(null, controller.items.length - 1);
-  } else if (key === "Escape") {
-    controller.close();
-  }
+    const key = event.key;
+    if (['Tab', 'Enter', ' '].includes(key))
+        event.preventDefault();
+    if (key === 'Home') {
+        controller.focusItemByIndex(null, 0);
+    }
+    else if (key === 'End') {
+        controller.focusItemByIndex(null, controller.items.length - 1);
+    }
+    else if (key === 'Escape') {
+        controller.close();
+    }
 };
 const focusItemByIndex = (controller, event = null, index = null) => {
-  if (event !== null) {
-    const key = event.key;
-    if (key === "ArrowUp") {
-      controller.items[controller.items.length - 1].focus();
-    } else {
-      controller.items[0].focus();
-    }
-  } else if (index !== null) {
-    controller.items[index].focus();
-  }
+    if (event !== null) {
+        const key = event.key;
+        if (key === 'ArrowUp') {
+            controller.items[controller.items.length - 1].focus();
+        }
+        else {
+            controller.items[0].focus();
+        }
+    }
+    else if (index !== null) {
+        controller.items[index].focus();
+    }
 };
 const DropdownMenuController = class extends Controller {
-  // targets
-  static targets = ["trigger", "contentContainer", "content", "item"];
-  // values
-  static values = {
-    isOpen: Boolean,
-  };
-  connect() {
-    this.closestContentSelector =
-      '[data-dropdown-menu-target="content"], [data-dropdown-menu-sub-target="content"]';
-    this.items = getSameLevelItems({
-      content: this.contentTarget,
-      items: this.itemTargets,
-      closestContentSelector: this.closestContentSelector,
-    });
-    useClickOutside(this, {
-      element: this.contentTarget,
-      dispatchEvent: false,
-    });
-    this.DOMKeydownListener = this.onDOMKeydown.bind(this);
-  }
-  toggle(event) {
-    if (this.isOpenValue) {
-      this.close();
-    } else {
-      this.open(event);
-    }
-  }
-  open(event) {
-    this.isOpenValue = true;
-    // Sub menus are not connected to the DOM yet when dropdown menu is connected.
-    // So we initialize them here instead of in connect().
-    if (this.subMenuControllers === undefined) {
-      const subMenuControllers = [];
-      const subMenus = Array.from(
-        this.contentTarget.querySelectorAll(
-          '[data-shadcn-phlexcomponents="dropdown-menu-sub"]',
-        ),
-      );
-      subMenus.forEach((subMenu) => {
-        const subMenuController = getStimulusInstance(
-          "dropdown-menu-sub",
-          subMenu,
-        );
-        if (subMenuController) {
-          subMenuControllers.push(subMenuController);
+    // targets
+    static targets = ['trigger', 'contentContainer', 'content', 'item'];
+    // values
+    static values = {
+        isOpen: Boolean,
+    };
+    connect() {
+        this.closestContentSelector =
+            '[data-dropdown-menu-target="content"], [data-dropdown-menu-sub-target="content"]';
+        this.items = getSameLevelItems({
+            content: this.contentTarget,
+            items: this.itemTargets,
+            closestContentSelector: this.closestContentSelector,
+        });
+        useClickOutside(this, { element: this.contentTarget, dispatchEvent: false });
+        this.DOMKeydownListener = this.onDOMKeydown.bind(this);
+    }
+    toggle(event) {
+        if (this.isOpenValue) {
+            this.close();
+        }
+        else {
+            this.open(event);
+        }
+    }
+    open(event) {
+        this.isOpenValue = true;
+        // Sub menus are not connected to the DOM yet when dropdown menu is connected.
+        // So we initialize them here instead of in connect().
+        if (this.subMenuControllers === undefined) {
+            const subMenuControllers = [];
+            const subMenus = Array.from(this.contentTarget.querySelectorAll('[data-shadcn-phlexcomponents="dropdown-menu-sub"]'));
+            subMenus.forEach((subMenu) => {
+                const subMenuController = getStimulusInstance('dropdown-menu-sub', subMenu);
+                if (subMenuController) {
+                    subMenuControllers.push(subMenuController);
+                }
+            });
+            this.subMenuControllers = subMenuControllers;
+        }
+        let elementToFocus = null;
+        if (event instanceof KeyboardEvent) {
+            const key = event.key;
+            if (['ArrowDown', 'Enter', ' '].includes(key)) {
+                elementToFocus = this.items[0];
+            }
         }
-      });
-      this.subMenuControllers = subMenuControllers;
-    }
-    let elementToFocus = null;
-    if (event instanceof KeyboardEvent) {
-      const key = event.key;
-      if (["ArrowDown", "Enter", " "].includes(key)) {
-        elementToFocus = this.items[0];
-      }
-    } else {
-      elementToFocus = this.contentTarget;
-    }
-    focusElement(elementToFocus);
-  }
-  close() {
-    this.isOpenValue = false;
-    this.subMenuControllers.forEach((subMenuController) => {
-      subMenuController.closeImmediately();
-    });
-  }
-  focusItem(event) {
-    const item = event.currentTarget;
-    let items = [];
-    const content = item.closest(this.closestContentSelector);
-    const isSubMenu =
-      content.dataset.shadcnPhlexcomponents === "dropdown-menu-sub-content";
-    if (isSubMenu) {
-      const subMenu = content.closest(
-        '[data-shadcn-phlexcomponents="dropdown-menu-sub"]',
-      );
-      const subMenuController = this.subMenuControllers.find(
-        (subMenuController) => subMenuController.element == subMenu,
-      );
-      if (subMenuController) {
-        items = subMenuController.items;
-      }
-    } else {
-      items = this.items;
-    }
-    const index = items.indexOf(item);
-    if (event instanceof KeyboardEvent) {
-      const key = event.key;
-      let newIndex = 0;
-      if (key === "ArrowUp") {
-        newIndex = getPreviousEnabledIndex({
-          items,
-          currentIndex: index,
-          wrapAround: false,
+        else {
+            elementToFocus = this.contentTarget;
+        }
+        focusElement(elementToFocus);
+    }
+    close() {
+        this.isOpenValue = false;
+        this.subMenuControllers.forEach((subMenuController) => {
+            subMenuController.closeImmediately();
         });
-      } else {
-        newIndex = getNextEnabledIndex({
-          items,
-          currentIndex: index,
-          wrapAround: false,
+    }
+    focusItem(event) {
+        const item = event.currentTarget;
+        let items = [];
+        const content = item.closest(this.closestContentSelector);
+        const isSubMenu = content.dataset.shadcnPhlexcomponents === 'dropdown-menu-sub-content';
+        if (isSubMenu) {
+            const subMenu = content.closest('[data-shadcn-phlexcomponents="dropdown-menu-sub"]');
+            const subMenuController = this.subMenuControllers.find((subMenuController) => subMenuController.element == subMenu);
+            if (subMenuController) {
+                items = subMenuController.items;
+            }
+        }
+        else {
+            items = this.items;
+        }
+        const index = items.indexOf(item);
+        if (event instanceof KeyboardEvent) {
+            const key = event.key;
+            let newIndex = 0;
+            if (key === 'ArrowUp') {
+                newIndex = getPreviousEnabledIndex({
+                    items,
+                    currentIndex: index,
+                    wrapAround: false,
+                });
+            }
+            else {
+                newIndex = getNextEnabledIndex({
+                    items,
+                    currentIndex: index,
+                    wrapAround: false,
+                });
+            }
+            items[newIndex].focus();
+        }
+        else {
+            // item mouseover event
+            items[index].focus();
+        }
+        // Close submenus on the same level
+        const subMenusInContent = Array.from(content.querySelectorAll('[data-shadcn-phlexcomponents="dropdown-menu-sub"]'));
+        subMenusInContent.forEach((subMenu) => {
+            const subMenuController = this.subMenuControllers.find((subMenuController) => subMenuController.element == subMenu);
+            if (subMenuController) {
+                subMenuController.closeImmediately();
+            }
         });
-      }
-      items[newIndex].focus();
-    } else {
-      // item mouseover event
-      items[index].focus();
-    }
-    // Close submenus on the same level
-    const subMenusInContent = Array.from(
-      content.querySelectorAll(
-        '[data-shadcn-phlexcomponents="dropdown-menu-sub"]',
-      ),
-    );
-    subMenusInContent.forEach((subMenu) => {
-      const subMenuController = this.subMenuControllers.find(
-        (subMenuController) => subMenuController.element == subMenu,
-      );
-      if (subMenuController) {
-        subMenuController.closeImmediately();
-      }
-    });
-  }
-  onItemFocus(event) {
-    const item = event.currentTarget;
-    item.tabIndex = 0;
-  }
-  onItemBlur(event) {
-    const item = event.currentTarget;
-    item.tabIndex = -1;
-  }
-  focusItemByIndex(event = null, index = null) {
-    focusItemByIndex(this, event, index);
-  }
-  focusContent(event) {
-    const item = event.currentTarget;
-    const content = item.closest(this.closestContentSelector);
-    content.focus();
-  }
-  select(event) {
-    if (event instanceof KeyboardEvent) {
-      const key = event.key;
-      const item = event.currentTarget || event.target;
-      // For rails button_to
-      if (item && (key === "Enter" || key === " ")) {
-        item.click();
-      }
-    }
-    this.close();
-  }
-  clickOutside(event) {
-    onClickOutside(this, event);
-  }
-  isOpenValueChanged(isOpen, previousIsOpen) {
-    if (isOpen) {
-      lockScroll(this.contentTarget.id);
-      showContent({
-        trigger: this.triggerTarget,
-        content: this.contentTarget,
-        contentContainer: this.contentContainerTarget,
-        setEqualWidth: false,
-      });
-      this.cleanup = initFloatingUi({
-        referenceElement: this.triggerTarget,
-        floatingElement: this.contentContainerTarget,
-        side: this.contentTarget.dataset.side,
-        align: this.contentTarget.dataset.align,
-        sideOffset: 4,
-      });
-      this.setupEventListeners();
-    } else {
-      unlockScroll(this.contentTarget.id);
-      hideContent({
-        trigger: this.triggerTarget,
-        content: this.contentTarget,
-        contentContainer: this.contentContainerTarget,
-      });
-      if (previousIsOpen) {
-        focusTrigger(this.triggerTarget);
-      }
-      this.cleanupEventListeners();
-    }
-  }
-  disconnect() {
-    this.cleanupEventListeners();
-  }
-  onDOMKeydown(event) {
-    if (!this.isOpenValue) return;
-    onKeydown(this, event);
-  }
-  setupEventListeners() {
-    document.addEventListener("keydown", this.DOMKeydownListener);
-  }
-  cleanupEventListeners() {
-    if (this.cleanup) this.cleanup();
-    document.removeEventListener("keydown", this.DOMKeydownListener);
-  }
+    }
+    onItemFocus(event) {
+        const item = event.currentTarget;
+        item.tabIndex = 0;
+    }
+    onItemBlur(event) {
+        const item = event.currentTarget;
+        item.tabIndex = -1;
+    }
+    focusItemByIndex(event = null, index = null) {
+        focusItemByIndex(this, event, index);
+    }
+    focusContent(event) {
+        const item = event.currentTarget;
+        const content = item.closest(this.closestContentSelector);
+        content.focus();
+    }
+    select(event) {
+        if (event instanceof KeyboardEvent) {
+            const key = event.key;
+            const item = (event.currentTarget || event.target);
+            // For rails button_to
+            if (item && (key === 'Enter' || key === ' ')) {
+                item.click();
+            }
+        }
+        this.close();
+    }
+    clickOutside(event) {
+        onClickOutside(this, event);
+    }
+    isOpenValueChanged(isOpen, previousIsOpen) {
+        if (isOpen) {
+            lockScroll(this.contentTarget.id);
+            showContent({
+                trigger: this.triggerTarget,
+                content: this.contentTarget,
+                contentContainer: this.contentContainerTarget,
+                setEqualWidth: false,
+            });
+            this.cleanup = initFloatingUi({
+                referenceElement: this.triggerTarget,
+                floatingElement: this.contentContainerTarget,
+                side: this.contentTarget.dataset.side,
+                align: this.contentTarget.dataset.align,
+                sideOffset: 4,
+            });
+            this.setupEventListeners();
+        }
+        else {
+            unlockScroll(this.contentTarget.id);
+            hideContent({
+                trigger: this.triggerTarget,
+                content: this.contentTarget,
+                contentContainer: this.contentContainerTarget,
+            });
+            if (previousIsOpen) {
+                focusTrigger(this.triggerTarget);
+            }
+            this.cleanupEventListeners();
+        }
+    }
+    disconnect() {
+        this.cleanupEventListeners();
+    }
+    onDOMKeydown(event) {
+        if (!this.isOpenValue)
+            return;
+        onKeydown(this, event);
+    }
+    setupEventListeners() {
+        document.addEventListener('keydown', this.DOMKeydownListener);
+    }
+    cleanupEventListeners() {
+        if (this.cleanup)
+            this.cleanup();
+        document.removeEventListener('keydown', this.DOMKeydownListener);
+    }
 };
 export { DropdownMenuController, onKeydown, focusItemByIndex };

data/app/javascript/controllers/dropdown_menu_sub_controller.js

@@ -1,118 +1,105 @@
-import { Controller } from "@hotwired/stimulus";
-import { initFloatingUi } from "../utils/floating_ui";
-import {
-  ON_OPEN_FOCUS_DELAY,
-  getSameLevelItems,
-  showContent,
-  hideContent,
-  getStimulusInstance,
-} from "../utils";
+import { Controller } from '@hotwired/stimulus';
+import { initFloatingUi } from '../utils/floating_ui';
+import { ON_OPEN_FOCUS_DELAY, getSameLevelItems, showContent, hideContent, getStimulusInstance, } from '../utils';
 const DropdownMenuSubController = class extends Controller {
-  // targets
-  static targets = ["trigger", "contentContainer", "content"];
-  // values
-  static values = {
-    isOpen: Boolean,
-  };
-  connect() {
-    this.items = getSameLevelItems({
-      content: this.contentTarget,
-      items: Array.from(
-        this.contentTarget.querySelectorAll(
-          '[data-dropdown-menu-target="item"], [data-dropdown-menu-sub-target="trigger"]',
-        ),
-      ),
-      closestContentSelector: '[data-dropdown-menu-sub-target="content"]',
-    });
-  }
-  open(event = null) {
-    clearTimeout(this.closeTimeout);
-    this.isOpenValue = true;
-    setTimeout(() => {
-      if (event instanceof KeyboardEvent) {
-        const key = event.key;
-        if (["ArrowRight", "Enter", " "].includes(key)) {
-          this.focusItemByIndex(null, 0);
+    // targets
+    static targets = ['trigger', 'contentContainer', 'content'];
+    // values
+    static values = {
+        isOpen: Boolean,
+    };
+    connect() {
+        this.items = getSameLevelItems({
+            content: this.contentTarget,
+            items: Array.from(this.contentTarget.querySelectorAll('[data-dropdown-menu-target="item"], [data-dropdown-menu-sub-target="trigger"]')),
+            closestContentSelector: '[data-dropdown-menu-sub-target="content"]',
+        });
+    }
+    open(event = null) {
+        clearTimeout(this.closeTimeout);
+        this.isOpenValue = true;
+        setTimeout(() => {
+            if (event instanceof KeyboardEvent) {
+                const key = event.key;
+                if (['ArrowRight', 'Enter', ' '].includes(key)) {
+                    this.focusItemByIndex(null, 0);
+                }
+            }
+        }, ON_OPEN_FOCUS_DELAY);
+    }
+    close() {
+        this.closeTimeout = window.setTimeout(() => {
+            this.isOpenValue = false;
+        }, 250);
+    }
+    closeOnLeftKeydown() {
+        this.closeImmediately();
+        this.triggerTarget.focus();
+    }
+    focusItemByIndex(event, index) {
+        if (event) {
+            const key = event.key;
+            if (key === 'ArrowUp') {
+                this.items[this.items.length - 1].focus();
+            }
+            else {
+                this.items[0].focus();
+            }
+        }
+        else if (index !== null) {
+            this.items[index].focus();
         }
-      }
-    }, ON_OPEN_FOCUS_DELAY);
-  }
-  close() {
-    this.closeTimeout = window.setTimeout(() => {
-      this.isOpenValue = false;
-    }, 250);
-  }
-  closeOnLeftKeydown() {
-    this.closeImmediately();
-    this.triggerTarget.focus();
-  }
-  focusItemByIndex(event, index) {
-    if (event) {
-      const key = event.key;
-      if (key === "ArrowUp") {
-        this.items[this.items.length - 1].focus();
-      } else {
-        this.items[0].focus();
-      }
-    } else if (index !== null) {
-      this.items[index].focus();
     }
-  }
-  closeParentSubMenu() {
-    const parentContent = this.triggerTarget.closest(
-      '[data-dropdown-menu-sub-target="content"]',
-    );
-    if (parentContent) {
-      const subMenu = parentContent.closest(
-        '[data-shadcn-phlexcomponents="dropdown-menu-sub"]',
-      );
-      if (subMenu) {
-        const subMenuController = getStimulusInstance(
-          "dropdown-menu-sub",
-          subMenu,
-        );
-        if (subMenuController) {
-          subMenuController.closeImmediately();
-          setTimeout(() => {
-            subMenuController.triggerTarget.focus();
-          }, 100);
+    closeParentSubMenu() {
+        const parentContent = this.triggerTarget.closest('[data-dropdown-menu-sub-target="content"]');
+        if (parentContent) {
+            const subMenu = parentContent.closest('[data-shadcn-phlexcomponents="dropdown-menu-sub"]');
+            if (subMenu) {
+                const subMenuController = getStimulusInstance('dropdown-menu-sub', subMenu);
+                if (subMenuController) {
+                    subMenuController.closeImmediately();
+                    setTimeout(() => {
+                        subMenuController.triggerTarget.focus();
+                    }, 100);
+                }
+            }
         }
-      }
     }
-  }
-  closeImmediately() {
-    this.isOpenValue = false;
-  }
-  isOpenValueChanged(isOpen) {
-    if (isOpen) {
-      showContent({
-        trigger: this.triggerTarget,
-        content: this.contentTarget,
-        contentContainer: this.contentContainerTarget,
-      });
-      this.cleanup = initFloatingUi({
-        referenceElement: this.triggerTarget,
-        floatingElement: this.contentContainerTarget,
-        side: this.contentTarget.dataset.side,
-        align: this.contentTarget.dataset.align,
-        sideOffset: -2,
-      });
-    } else {
-      this.closeTimeout = window.setTimeout(() => {
-        hideContent({
-          trigger: this.triggerTarget,
-          content: this.contentTarget,
-          contentContainer: this.contentContainerTarget,
-        });
-      });
-      this.cleanupEventListeners();
+    closeImmediately() {
+        this.isOpenValue = false;
+    }
+    isOpenValueChanged(isOpen) {
+        if (isOpen) {
+            showContent({
+                trigger: this.triggerTarget,
+                content: this.contentTarget,
+                contentContainer: this.contentContainerTarget,
+            });
+            this.cleanup = initFloatingUi({
+                referenceElement: this.triggerTarget,
+                floatingElement: this.contentContainerTarget,
+                side: this.contentTarget.dataset.side,
+                align: this.contentTarget.dataset.align,
+                sideOffset: -2,
+            });
+        }
+        else {
+            this.closeTimeout = window.setTimeout(() => {
+                hideContent({
+                    trigger: this.triggerTarget,
+                    content: this.contentTarget,
+                    contentContainer: this.contentContainerTarget,
+                });
+            });
+            this.cleanupEventListeners();
+        }
+    }
+    disconnect() {
+        this.cleanupEventListeners();
+    }
+    cleanupEventListeners() {
+        if (this.cleanup)
+            this.cleanup();
     }
-  }
-  disconnect() {
-    this.cleanupEventListeners();
-  }
-  cleanupEventListeners() {
-    if (this.cleanup) this.cleanup();
-  }
 };
 export { DropdownMenuSubController };