npm - @numiko/drilldown - Versions diffs - 2.0.0 - Mend

@numiko/drilldown 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,121 @@
+# Drilldown
+The Drilldown Package provides an easy-to-use solution for creating animated, hierarchical menus using the GreenSock Animation Platform (GSAP). It allows for smooth transitions between menu levels with configurable options for customization and callbacks for advanced integrations.
+## Table of Contents
+- [Features](#markdown-header-features)
+- [Dependencies](#markdown-header-dependencies)
+- [Installation](#markdown-header-installation)
+- [Usage](#markdown-header-usage)
+- [API](#markdown-header-api)
+- [Release Notes](#markdown-header-release-notes)
+## Features
+- **Dynamic Hierarchical Menus**: Easily create multi-level drilldown menus to efficiently manage complex site navigation structures.
+- **GSAP Animations**: Utilizes the GreenSock Animation Platform (GSAP) to provide smooth, high-performance transitions between menu levels.
+- **Configurable Selectors**: Customize selectors for menu items, back buttons, submenus, and more to match your HTML structure.
+- **Customizable Animation Callbacks**: Offers hooks for animation start and complete events at both child and parent levels, allowing for fine-tuned control over menu behavior.
+- **Automatic Height Adjustment**: Features a ResizeObserver to automatically adjust the height of the drilldown menu, ensuring it matches the content for a seamless user experience.
+- **Lifecycle Management**: Features methods for initializing and destroying drilldown instances, enabling proper setup and teardown of components to prevent memory leaks and ensure clean transitions between states.
+## Dependencies
+- GSAP
+## Installation
+Install from npm:
+```shell
+npm install @numiko/drilldown
+```
+## Usage
+### JS initialisation
+```ts
+import { Drilldown, type DrilldownOptions } from '@numiko/drilldown';
+const menuElement = document.getElementById('menu') as HTMLElement;
+const options: DrilldownOptions = {
+  backSelector: '[data-js-menu-back]',
+  nextSelector: '[data-js-menu-next]',
+  submenuSelector: '[data-js-menu-container]',
+  itemSelector: '[data-js-menu-item]',
+};
+const menu = new Drilldown(menuElement, options);
+menu.init();
+```
+### HTML Structure (with appropriate tailwind styles)
+**Note** The menu markup will be generated by the menu twig template for drupal builds - this is just a basic example of the needed structure.
+```HTML
+<div id="menu" class="overflow-hidden bg-black text-white relative top-full left-0 w-full" data-js-menu-container data-js-menu-container-level="0" aria-hidden="false">
+  <ul class="flex flex-col">
+    <li data-js-menu-item data-js-menu-item-level="0">
+      <a class="flex gap-4 w-full text-left items-center justify-between px-9 py-7 group" href="http://www.example.com" data-js-menu-link data-js-menu-link-level="1">
+      <span>Top level 1</span>
+      </a>
+    </li>
+      <li data-js-menu-item data-js-menu-item-level="0">
+        <button class="flex gap-4 w-full text-left items-center justify-between px-9 py-7 group" type="button" data-js-menu-link data-js-menu-link-level="0" data-js-menu-next aria-controls="menu_1">
+            <span>Top level 2 &raquo;</span>
+        </button>
+        <div id="menu_1" class="invisible absolute z-10 w-full top-0" data-js-menu-container data-js-menu-container-level="1">
+            <button class="flex gap-4 w-full text-left items-center justify-start px-9 py-7 group" type="button" data-js-menu-back>
+              <span> &laquo; Go back</span>
+            </button>
+            <div>
+              <a class="flex w-full text-left items-center justify-between px-9 py-7 group" data-js-menu-parent href="http://www.example.com">Top level 2</a>
+            </div>
+            <ul class="flex flex-col">
+              <li data-js-menu-item data-js-menu-item-level="1">
+                  <a class="flex gap-4 w-full text-left items-center justify-between px-9 py-7 group" href="http://www.example.com" data-js-menu-link data-js-menu-link-level="1">
+                  <span>Second level 1</span>
+                  </a>
+              </li>
+              <li data-js-menu-item data-js-menu-item-level="1">
+                <button class="flex gap-4 w-full text-left items-center justify-between px-9 py-7 group" href="http://www.example.com" data-js-menu-link data-js-menu-link-level="1" data-js-menu-next aria-controls="menu_2">
+                  <span>Second level 2 &raquo;</span>
+                </button>
+                <div id="menu_2" class="invisible absolute z-10 w-full top-0" data-js-menu-container data-js-menu-container-level="2">
+                  <button class="flex gap-4 w-full text-left items-center justify-start px-9 py-7 group" type="button" data-js-menu-back>
+                      <span>&laquo; Go back</span>
+                  </button>
+                  <div>
+                      <a class="flex w-full text-left items-center justify-between px-9 py-7 group" data-js-menu-parent href="http://www.example.com">Second level 2</a>
+                  </div>
+                  <ul class="flex flex-col">
+                      <li data-js-menu-item data-js-menu-item-level="2">
+                        <a class="flex gap-4 w-full text-left items-center justify-between px-9 py-7 group" href="http://www.example.com" data-js-menu-link data-js-menu-link-level="2">
+                        <span>Third level 1</span>
+                        </a>
+                      </li>
+                  </ul>
+                </div>
+              </li>
+              <li data-js-menu-item data-js-menu-item-level="1">
+                <a class="flex gap-4 w-full text-left items-center justify-between px-9 py-7 group" href="http://www.example.com" data-js-menu-link data-js-menu-link-level="1">
+                <span>Second level 3</span>
+              </a>
+            </li>
+            </ul>
+        </div>
+      </li>
+  </ul>
+</div>
+```
+## Release notes
+### v1.0.0
+- Inital version created to work with SiteKit menus

package/dist/Drilldown.es.d.ts ADDED Viewed

@@ -0,0 +1,179 @@
+export declare class Drilldown {
+    private readonly context;
+    private readonly options;
+    private activeMenuItem;
+    private menuResizeObserver;
+    private isAnimating;
+    /**
+     * Initializes a new instance of the Drilldown class.
+     * @param context - The element to initialize the drilldown on.
+     * @param options
+     */
+    constructor(context: HTMLElement, options?: DrilldownOptions);
+    /**
+     * Binds instance to member functions to preserve the `this` context.
+     */
+    private bindThisToMemberFunctions;
+    init(): void;
+    /**
+     * Handles click events on the menu, determining whether a next or back button was clicked,
+     * and initiates the appropriate animation to transition between menus.
+     * This function prevents navigation if animations are currently running or if navigation is disabled.
+     * It also ensures that the default action for the click event is prevented.
+     */
+    private handleMenuClick;
+    /**
+     * Determines the target menu based on the element that triggered the event.
+     * If the action is to navigate to a next (child) menu, it finds the submenu within the active menu item.
+     * If the action is to go back, it finds the parent menu of the current submenu.
+     *
+     * @param element - The element (typically a button or link) that triggered the navigation action.
+     * @param isNextButton - A flag indicating whether the navigation action is moving forward to a child menu.
+     * @returns The target menu to navigate to, or null if no target menu can be determined.
+     */
+    private getTargetMenu;
+    /**
+     * Creates the animation for transitioning between menus.
+     * This function initializes a GSAP tween for either showing a child menu (next) or a parent menu (back),
+     * depending on the direction of navigation. It also sets up onStart and onComplete callbacks for the animation.
+     *
+     * @param currentMenu - The currently active menu that is being transitioned from.
+     * @param targetMenu - The target menu that is being transitioned to.
+     * @param isChild - Determines the type of animation to create; true for child menu, false for parent menu.
+     * @returns The GSAP timeline instance for the created animation.
+     */
+    private createAnimation;
+    /**
+     * Sets up GSAP tween callbacks for menu animations. This method configures onStart and onComplete callbacks
+     * for the tween animation based on whether it's an animation for showing a child menu or a parent menu.
+     * It integrates both custom callback functions provided via options and internal logic defined in the class.
+     *
+     * @param tween - The GSAP tween instance that controls the menu animation.
+     * @param currentMenu - The currently active menu element that is being transitioned from.
+     * @param targetMenu - The target menu element that is being transitioned to.
+     * @param isChild - Flag to determine if the animation is for showing a child menu (true) or a parent menu (false).
+     */
+    private setupTweenCallbacks;
+    /**
+     * Creates a ResizeObserver to adjust the height of the drilldown menu.
+     * This ensures the menu height matches the content, especially useful when content changes size.
+     */
+    private createMenuResizeObserver;
+    /**
+     * Returns the main list items for a given menu. It does not include supplementary items, for
+     * example, the parent link or the back button.
+     * @param menu
+     */
+    private getMenuListItems;
+    /**
+     * Returns the elements that will be hidden when a menu is transitioning.
+     * @param menu
+     */
+    private getElementsToHideForMenuTransition;
+    /**
+     * The callback that is fired when the menu navigates down a level.
+     */
+    private onShowChildStart;
+    /**
+     * The callback that is fired after the menu has moved down a level.
+     */
+    private onShowChildComplete;
+    /**
+     * The callback that is fired when the menu navigates up a level.
+     */
+    private onShowParentStart;
+    /**
+     * The callback that is fired after the menu has moved up a level.
+     */
+    private onShowParentComplete;
+    /**
+     * Generates the tween animation for showing a child menu.
+     * This method configures the animation sequence for transitioning to a submenu.
+     * @param currentMenu - The currently active menu.
+     * @param targetMenu - The submenu to be displayed.
+     */
+    private onShowChildTween;
+    /**
+     * Generates the tween animation for showing a parent menu.
+     * This method configures the animation sequence for transitioning back to a parent menu.
+     * @param currentMenu - The currently active submenu.
+     * @param targetMenu - The parent menu to be displayed.
+     */
+    private onShowParentTween;
+    /**
+     * Removes all inline styles from elements within a given context.
+     * This is particularly useful for cleaning up after dynamic style changes during menu animations.
+     * @param context - The context within which to remove inline styles.
+     */
+    private removeInlineStyles;
+    /**
+     * Calculates the natural height of an element, disregarding any explicitly set heights.
+     * This is useful for animations that need to adjust to the content's natural size.
+     * @param element - The element to measure.
+     */
+    private getNaturalHeight;
+    /**
+     * Resets the menu items to their initial state, removing any dynamic modifications.
+     * This method is typically called when the menu is being reset or destroyed.
+     */
+    private resetMenuListItems;
+    /**
+     * Resets the drilldown menu to its initial state, removing any dynamic styles or selections.
+     * This is useful for cleaning up and preparing the menu for another interaction.
+     */
+    reset(): void;
+    /**
+     * Cleans up event listeners and resets the menu, preparing the instance for garbage collection.
+     * This method should be called to prevent memory leaks when the drilldown menu is no longer needed.
+     */
+    destroy(): void;
+}
+/**
+ * Configuration options for initializing a Drilldown instance.
+ * Defines selectors for menu elements and animation behavior customization.
+ */
+export declare type DrilldownOptions = {
+    backSelector?: string;
+    nextSelector?: string;
+    submenuSelector?: string;
+    itemSelector?: string;
+    /**
+     * Callback function executed when the drilldown menu is reset.
+     * Useful for custom cleanup or state management.
+     */
+    onReset?: (() => void) | null;
+    /**
+     * Animation configuration (options) for child menu transitions.
+     * Partial TweenOptions allowing selective override of default values.
+     */
+    childTweenOptions?: Partial<TweenOptions>;
+    /**
+     * Animation configuration (options) for parent menu transitions.
+     * Partial TweenOptions allowing selective override of default values.
+     */
+    parentTweenOptions?: Partial<TweenOptions>;
+};
+export declare type TweenCallback = (currentMenu: HTMLElement, targetMenu: HTMLElement) => void;
+export declare type TweenOptions = {
+    outDuration: number;
+    outEase: string;
+    outStagger: number;
+    inDuration: number;
+    inEase: string;
+    inStagger: number;
+    /**
+     * Duration in seconds for height transition animations.
+     */
+    heightDuration: number;
+    /**
+     * Easing function for height transition animations.
+     */
+    heightEase: string;
+    onStart?: TweenCallback | null;
+    onComplete?: TweenCallback | null;
+};
+export { }

package/dist/Drilldown.es.js ADDED Viewed

@@ -0,0 +1,275 @@
+import { gsap as m } from "gsap";
+const u = 0.2, l = "power1.out";
+class f {
+  /**
+   * Initializes a new instance of the Drilldown class.
+   * @param context - The element to initialize the drilldown on.
+   * @param options
+   */
+  constructor(i, s = {}) {
+    this.activeMenuItem = null, this.menuResizeObserver = null, this.isAnimating = !1, this.handleMenuClick = (o) => {
+      if (this.isAnimating) return;
+      const n = o.target, r = n.closest(this.options.nextSelector) ?? n.closest(this.options.backSelector);
+      if (!r) return;
+      o.preventDefault();
+      const a = !!r.closest(this.options.nextSelector), h = r.closest(this.options.submenuSelector);
+      if (!h) return;
+      const c = this.getTargetMenu(r, a);
+      if (!c) return;
+      (a ? this.createAnimation(h, c, !0) : this.createAnimation(h, c, !1)).play();
+    }, this.onShowParentTween = (o, n) => {
+      const r = this.getElementsToHideForMenuTransition(n), a = this.getElementsToHideForMenuTransition(o), h = m.timeline();
+      return h.to(a, {
+        x: 20,
+        autoAlpha: 0,
+        duration: this.options.parentTweenOptions.outDuration,
+        ease: this.options.parentTweenOptions.outEase,
+        stagger: this.options.parentTweenOptions.outStagger
+      }), h.to(this.context, {
+        // This is calculated at runtime because the height of the parent menu changes
+        // just before we animate it in: see the 'onShowParentStart' callback.
+        height: () => `${this.getNaturalHeight(n)}px`,
+        duration: this.options.parentTweenOptions.heightDuration,
+        ease: this.options.parentTweenOptions.heightEase
+      }), h.set(o, {
+        autoAlpha: 0
+      }), h.to(r, {
+        autoAlpha: 1,
+        x: 0,
+        duration: this.options.parentTweenOptions.inDuration,
+        ease: this.options.parentTweenOptions.inEase,
+        stagger: this.options.parentTweenOptions.inStagger
+      }), h;
+    }, this.bindThisToMemberFunctions(), this.context = i;
+    const t = s.childTweenOptions, e = s.parentTweenOptions;
+    this.options = {
+      backSelector: s.backSelector || "[data-js-menu-back]",
+      nextSelector: s.nextSelector || "[data-js-menu-next]",
+      submenuSelector: s.submenuSelector || "[data-js-menu-container]",
+      itemSelector: s.itemSelector || "[data-js-menu-item]",
+      onReset: s.onReset || null,
+      childTweenOptions: {
+        outDuration: (t == null ? void 0 : t.outDuration) || u,
+        outEase: (t == null ? void 0 : t.outEase) || l,
+        outStagger: (t == null ? void 0 : t.outStagger) || 0,
+        inDuration: (t == null ? void 0 : t.inDuration) || u,
+        inEase: (t == null ? void 0 : t.inEase) || l,
+        inStagger: (t == null ? void 0 : t.inStagger) || 0,
+        heightDuration: (t == null ? void 0 : t.heightDuration) || u,
+        heightEase: (t == null ? void 0 : t.heightEase) || l,
+        onStart: (t == null ? void 0 : t.onStart) || null,
+        onComplete: (t == null ? void 0 : t.onComplete) || null
+      },
+      parentTweenOptions: {
+        outDuration: (e == null ? void 0 : e.outDuration) || u,
+        outEase: (e == null ? void 0 : e.outEase) || l,
+        outStagger: (e == null ? void 0 : e.outStagger) || 0,
+        inDuration: (e == null ? void 0 : e.inDuration) || u,
+        inEase: (e == null ? void 0 : e.inEase) || l,
+        inStagger: (e == null ? void 0 : e.inStagger) || 0,
+        heightDuration: (e == null ? void 0 : e.heightDuration) || u,
+        heightEase: (e == null ? void 0 : e.heightEase) || l,
+        onStart: (e == null ? void 0 : e.onStart) || null,
+        onComplete: (e == null ? void 0 : e.onComplete) || null
+      }
+    }, this.activeMenuItem = null, this.menuResizeObserver = null;
+  }
+  /**
+   * Binds instance to member functions to preserve the `this` context.
+   */
+  bindThisToMemberFunctions() {
+    const i = Object.getOwnPropertyNames(Object.getPrototypeOf(this)), s = this;
+    i.forEach((t) => {
+      const e = s[t];
+      typeof e == "function" && (s[t] = e.bind(this));
+    });
+  }
+  init() {
+    this.context.addEventListener("click", this.handleMenuClick);
+  }
+  /**
+    * Determines the target menu based on the element that triggered the event.
+    * If the action is to navigate to a next (child) menu, it finds the submenu within the active menu item.
+    * If the action is to go back, it finds the parent menu of the current submenu.
+    *
+    * @param element - The element (typically a button or link) that triggered the navigation action.
+    * @param isNextButton - A flag indicating whether the navigation action is moving forward to a child menu.
+    * @returns The target menu to navigate to, or null if no target menu can be determined.
+  */
+  getTargetMenu(i, s) {
+    return this.activeMenuItem = i.closest(this.options.itemSelector), this.activeMenuItem ? s ? this.activeMenuItem.querySelector(this.options.submenuSelector) : this.activeMenuItem.closest(this.options.submenuSelector) : null;
+  }
+  /**
+   * Creates the animation for transitioning between menus.
+   * This function initializes a GSAP tween for either showing a child menu (next) or a parent menu (back),
+   * depending on the direction of navigation. It also sets up onStart and onComplete callbacks for the animation.
+   *
+   * @param currentMenu - The currently active menu that is being transitioned from.
+   * @param targetMenu - The target menu that is being transitioned to.
+   * @param isChild - Determines the type of animation to create; true for child menu, false for parent menu.
+   * @returns The GSAP timeline instance for the created animation.
+   */
+  createAnimation(i, s, t) {
+    const e = t ? this.onShowChildTween(i, s) : this.onShowParentTween(i, s);
+    return this.setupTweenCallbacks(e, i, s, t), e.pause(), e;
+  }
+  /**
+   * Sets up GSAP tween callbacks for menu animations. This method configures onStart and onComplete callbacks
+   * for the tween animation based on whether it's an animation for showing a child menu or a parent menu.
+   * It integrates both custom callback functions provided via options and internal logic defined in the class.
+   *
+   * @param tween - The GSAP tween instance that controls the menu animation.
+   * @param currentMenu - The currently active menu element that is being transitioned from.
+   * @param targetMenu - The target menu element that is being transitioned to.
+   * @param isChild - Flag to determine if the animation is for showing a child menu (true) or a parent menu (false).
+   */
+  setupTweenCallbacks(i, s, t, e) {
+    const o = e ? this.options.childTweenOptions : this.options.parentTweenOptions, n = e ? this.onShowChildStart : this.onShowParentStart, r = e ? this.onShowChildComplete : this.onShowParentComplete;
+    i.eventCallback("onStart", () => {
+      var a;
+      (a = o.onStart) == null || a.call(o, s, t), n(s, t);
+    }), i.eventCallback("onComplete", () => {
+      var a;
+      (a = o.onComplete) == null || a.call(o, s, t), r(s, t);
+    });
+  }
+  /**
+   * Creates a ResizeObserver to adjust the height of the drilldown menu.
+   * This ensures the menu height matches the content, especially useful when content changes size.
+   */
+  createMenuResizeObserver() {
+    return this.menuResizeObserver || (this.menuResizeObserver = new ResizeObserver((i) => {
+      for (const s of i) {
+        const t = s.target;
+        this.context.style.height = `${t.offsetHeight}px`;
+      }
+    })), this.menuResizeObserver;
+  }
+  /**
+   * Returns the main list items for a given menu. It does not include supplementary items, for
+   * example, the parent link or the back button.
+   * @param menu
+   */
+  getMenuListItems(i) {
+    const s = Array.from(i.children).filter((e) => e.matches("ul"))[0];
+    return s ? Array.from(s.children).filter((e) => e.matches(this.options.itemSelector)) : [];
+  }
+  /**
+   * Returns the elements that will be hidden when a menu is transitioning.
+   * @param menu
+   */
+  getElementsToHideForMenuTransition(i) {
+    const t = this.getMenuListItems(i).map((r) => r.querySelector("[data-js-menu-link]")), e = i.querySelector(this.options.backSelector), o = i.querySelector("[data-js-menu-parent]");
+    return [e, o, ...t];
+  }
+  /**
+   * The callback that is fired when the menu navigates down a level.
+   */
+  onShowChildStart(i, s) {
+    i.scrollTop = 0, s.scrollTop = 0, this.isAnimating = !0;
+  }
+  /**
+   * The callback that is fired after the menu has moved down a level.
+   */
+  onShowChildComplete(i, s) {
+    this.isAnimating = !1, this.getMenuListItems(i).forEach((o) => {
+      o !== this.activeMenuItem && o.classList.add("hidden");
+    }), this.menuResizeObserver && this.menuResizeObserver.unobserve(i), this.createMenuResizeObserver().observe(s);
+  }
+  /**
+   * The callback that is fired when the menu navigates up a level.
+   */
+  onShowParentStart(i, s) {
+    this.isAnimating = !0, this.getMenuListItems(s).forEach((e) => {
+      e.classList.remove("hidden");
+    });
+  }
+  /**
+   * The callback that is fired after the menu has moved up a level.
+   */
+  onShowParentComplete(i, s) {
+    this.isAnimating = !1, this.menuResizeObserver && this.menuResizeObserver.unobserve(i), s === this.context ? this.context.style.height = "auto" : this.createMenuResizeObserver().observe(s);
+  }
+  /**
+   * Generates the tween animation for showing a child menu.
+   * This method configures the animation sequence for transitioning to a submenu.
+   * @param currentMenu - The currently active menu.
+   * @param targetMenu - The submenu to be displayed.
+   */
+  onShowChildTween(i, s) {
+    const t = s.offsetHeight, e = this.getElementsToHideForMenuTransition(i), o = this.getElementsToHideForMenuTransition(s), n = m.timeline();
+    return n.to(e, {
+      autoAlpha: 0,
+      x: -20,
+      duration: this.options.childTweenOptions.outDuration,
+      ease: this.options.childTweenOptions.outEase,
+      stagger: this.options.childTweenOptions.outStagger
+    }), n.to(this.context, {
+      height: `${t}px`,
+      duration: this.options.childTweenOptions.heightDuration,
+      ease: this.options.childTweenOptions.heightEase
+    }), n.set(s, {
+      autoAlpha: 1
+    }), n.fromTo(o, {
+      autoAlpha: 0,
+      x: 20
+    }, {
+      autoAlpha: 1,
+      x: 0,
+      duration: this.options.childTweenOptions.inDuration,
+      ease: this.options.childTweenOptions.inEase,
+      stagger: this.options.childTweenOptions.inStagger
+    }), n;
+  }
+  /**
+   * Removes all inline styles from elements within a given context.
+   * This is particularly useful for cleaning up after dynamic style changes during menu animations.
+   * @param context - The context within which to remove inline styles.
+   */
+  removeInlineStyles(i) {
+    const s = Array.from(i.querySelectorAll("[style]"));
+    i.hasAttribute("style") && s.push(i), s.forEach((t) => {
+      m.set(t, {
+        clearProps: "all",
+        overwrite: !0
+      });
+    });
+  }
+  /**
+   * Calculates the natural height of an element, disregarding any explicitly set heights.
+   * This is useful for animations that need to adjust to the content's natural size.
+   * @param element - The element to measure.
+   */
+  getNaturalHeight(i) {
+    const s = i.offsetHeight;
+    i.style.height = "auto";
+    const t = i.offsetHeight;
+    return i.style.height = `${s}px`, t;
+  }
+  /**
+   * Resets the menu items to their initial state, removing any dynamic modifications.
+   * This method is typically called when the menu is being reset or destroyed.
+   */
+  resetMenuListItems() {
+    this.context.querySelectorAll(this.options.itemSelector).forEach((s) => {
+      s.classList.remove("hidden");
+    });
+  }
+  /**
+   * Resets the drilldown menu to its initial state, removing any dynamic styles or selections.
+   * This is useful for cleaning up and preparing the menu for another interaction.
+   */
+  reset() {
+    this.isAnimating = !1, typeof this.options.onReset == "function" && this.options.onReset(), this.resetMenuListItems(), this.removeInlineStyles(this.context), this.menuResizeObserver && this.menuResizeObserver.disconnect();
+  }
+  /**
+   * Cleans up event listeners and resets the menu, preparing the instance for garbage collection.
+   * This method should be called to prevent memory leaks when the drilldown menu is no longer needed.
+   */
+  destroy() {
+    this.context.removeEventListener("click", this.handleMenuClick), this.reset();
+  }
+}
+export {
+  f as Drilldown
+};

package/dist/Drilldown.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,101 @@
+{
+  "name": "@numiko/drilldown",
+  "version": "2.0.0",
+  "description": "A package to create a menu system enabling you to drilldown to deeper levels and navigate back up",
+  "author": "Numiko",
+  "private": false,
+  "license": "ISC",
+  "homepage": "https://bitbucket.org/numiko/drilldown#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@bitbucket.org/numiko/drilldown.git"
+  },
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:coverage": "vitest --coverage",
+    "test:ci": "vitest --run --reporter junit --outputFile ./reports/results.xml --coverage.enabled --coverage.include lib --coverage.reporter=html --coverage.reportsDirectory ./reports/",
+    "generate-docs": "typedoc lib/Drilldown.ts",
+    "deploy-docs": "netlify deploy --dir=docs --alias=v$(node -p \"require('./package.json').version\")",
+    "release": "echo 'Releasing package. Ensure the module is linked to the Netlify project using `netlify link`.'; release-it release"
+  },
+  "main": "./dist/Drilldown.umd.js",
+  "files": [
+    "dist",
+    "package.json",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/Drilldown.es.d.ts",
+        "module": "./dist/Drilldown.es.js"
+      },
+      "require": "./dist/Drilldown.umd.js"
+    }
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.38.0",
+    "@j-ulrich/release-it-regex-bumper": "^5.3.0",
+    "@stylistic/eslint-plugin": "^2.9.0",
+    "@types/gsap": "^3.0.0",
+    "@types/node": "^24.9.1",
+    "@typescript-eslint/eslint-plugin": "^8.46.2",
+    "@typescript-eslint/parser": "^8.46.2",
+    "@vitest/coverage-v8": "^2.1.3",
+    "eslint": "^9.38.0",
+    "globals": "^15.11.0",
+    "happy-dom": "^20.0.11",
+    "netlify-cli": "^23.13.3",
+    "release-it": "^19.0.5",
+    "typedoc": "^0.28.14",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.2",
+    "vite": "^5.4.9",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-eslint": "^1.8.1",
+    "vitest": "^2.1.3"
+  },
+  "dependencies": {
+    "gsap": "^3.13.0"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-darwin-arm64": "^4.18.0",
+    "@rollup/rollup-darwin-x64": "^4.18.0",
+    "@rollup/rollup-linux-x64-gnu": "^4.52.5"
+  },
+  "release-it": {
+    "$schema": "https://unpkg.com/release-it/schema/release-it.json",
+    "plugins": {
+      "@j-ulrich/release-it-regex-bumper": {
+        "out": [
+          {
+            "file": "README.md",
+            "search": "\\d+-\\d+-\\d+",
+            "replace": "{{major}}-{{minor}}-{{patch}}"
+          }
+        ]
+      }
+    },
+    "npm": {
+      "publish": true,
+      "publishArgs": [
+        "--access",
+        "public"
+      ]
+    },
+    "hooks": {
+      "before:init": [
+        "vitest run"
+      ],
+      "after:bump": [
+        "npm run generate-docs",
+        "npm run build",
+        "npm run deploy-docs"
+      ]
+    }
+  }
+}