app/assets/build/coco/app.js in coveragebook_components-0.8.9 vs app/assets/build/coco/app.js in coveragebook_components-0.9.0

@@ -14042,11 +14042,11 @@
 
   // ../../../package.json
   var package_default = {
     name: "coveragebook-components",
     type: "module",
-    version: "0.8.9",
+    version: "0.9.0",
     main: "index.js",
     repository: "[e-mail]:coveragebook/coco.git",
     author: "Mark Perkins <[e-mail]>",
     license: "NO LICENSE",
     browserslist: [
@@ -23833,14 +23833,15 @@
           return;
         const data2 = getData(el);
         const settings = tippyModifiers(modifiers);
         const result = expression ? evaluate2(expression) : {};
         const directiveConfig = isObject2(result) ? result : {};
-        let _a = directiveConfig, { triggerTarget, contentTarget } = _a, config = __objRest(_a, ["triggerTarget", "contentTarget"]);
+        let _a = directiveConfig, { triggerTarget, contentTarget, anchorTarget } = _a, config = __objRest(_a, ["triggerTarget", "contentTarget", "anchorTarget"]);
         contentTarget = contentTarget || el.querySelector("[x-dropdown\\:content]");
         content = isNode(contentTarget) ? contentTarget.firstElementChild : contentTarget;
         triggerTarget = triggerTarget || el.querySelector("[x-dropdown\\:trigger]") || el;
+        anchorTarget = anchorTarget || el.querySelector("[x-dropdown\\:anchor]") || el;
         if (!el.__x_dropdown) {
           const mixin = Alpine3.reactive({
             dropdown: {
               open: false,
               trigger: triggerTarget,
@@ -23852,11 +23853,11 @@
                 el.__x_dropdown.show();
               }
             }
           });
           setData(el, mixin);
-          const dropdown = el.__x_dropdown = tippy_default(el, __spreadValues(__spreadValues({
+          const dropdown = el.__x_dropdown = tippy_default(anchorTarget, __spreadValues(__spreadValues({
             theme: "coco-app-dropdown",
             placement: "bottom-start",
             offset: [0, 0],
             trigger: "click",
             interactive: true,
@@ -24072,15 +24073,17 @@
       isCollapsed: false,
       approving: false,
       confirmed: true,
       lastState: null,
       stateTooltips: data2.tooltips || {},
-      tooltipText: null,
-      dropdown: null
+      tooltipText: null
     }, data2.props || {}), {
       init() {
         this.lastState = this.state;
+        this.checkConfirmation = this.checkConfirmation.bind(this);
+        this.approveAndRun = this.approveAndRun.bind(this);
+        this.shouldShowTooltip = this.shouldShowTooltip.bind(this);
         this.$nextTick(() => {
           if (this.$options.confirm) {
             this.confirmed = false;
           }
         });
@@ -24104,30 +24107,22 @@
           this.tooltipText = tooltipForState || labelText || defaultContent;
         } else {
           this.tooltipText = tooltipForState || defaultContent;
         }
       },
-      showTooltip() {
+      shouldShowTooltip() {
         return !!this.tooltipText;
       },
       get disabled() {
         return this.$options.disabled === true;
       },
       set disabled(value) {
         this.$options.disabled = value;
       },
-      /* dropdown */
-      hideDropdown() {
-        if (this.dropdown) {
-          this.dropdown.hide();
-        }
+      get tippyInstance() {
+        return this.$root.__x_tippy;
       },
-      showDropdown() {
-        if (this.dropdown) {
-          this.dropdown.show();
-        }
-      },
       /* confirmation */
       checkConfirmation(event) {
         if (!this.confirmed) {
           this.approving = true;
           event.preventDefault();
@@ -24202,19 +24197,42 @@
       },
       /* bindings */
       root: {
         "x-options": "options",
         "x-tooltip": "tooltipText",
-        "x-effect": "setTooltipText",
-        "@confirmation:confirm": "approveAndRun",
-        "@confirmation:cancel": "cancelConfirmation",
-        "@dropdown:show": "setState('active')",
-        "@dropdown:hide": "resetState()"
+        "x-effect": "setTooltipText"
       }
     });
   });
 
+  // ../../components/coco/base/button/button_dropdown.js
+  var button_dropdown_exports = {};
+  __export(button_dropdown_exports, {
+    default: () => button_dropdown_default
+  });
+  var button_dropdown_default = CocoComponent("buttonDropdown", (data2 = {}) => {
+    return {
+      dropdown: null,
+      button: null,
+      init() {
+        this.$nextTick(() => {
+          this.button = getComponent(this.$el.querySelector(".coco-button"));
+        });
+      },
+      hideDropdown() {
+        if (this.dropdown) {
+          this.dropdown.hide();
+        }
+      },
+      showDropdown() {
+        if (this.dropdown) {
+          this.dropdown.show();
+        }
+      }
+    };
+  });
+
   // ../../components/coco/base/dropdown/dropdown.js
   var dropdown_exports = {};
   __export(dropdown_exports, {
     default: () => dropdown_default2
   });
@@ -24542,11 +24560,11 @@
       headers.Accept = ["text/vnd.turbo-stream.html", headers.Accept].join(", ");
     }
   }
 
   // import-glob:/Users/mark/Code/coveragebook/coco/app/assets/js/base|@baseComponents/**/*.js
-  var modules = [button_exports, dropdown_exports, icon_exports, image_uploader_exports, modal_exports, modal_dialog_exports, modal_lightbox_exports, poll_controller_exports];
+  var modules = [button_exports, button_dropdown_exports, dropdown_exports, icon_exports, image_uploader_exports, modal_exports, modal_dialog_exports, modal_lightbox_exports, poll_controller_exports];
   var __default = modules;
 
   // base/components.js
   var components_default = registerComponents(__default);
 
@@ -25070,48 +25088,60 @@
     default: () => button_group_default
   });
   var button_group_default = CocoComponent("appButtonGroup", () => {
     return {
       options: ["collapsible"],
+      ready: false,
       containerWidth: 0,
       contentWidth: 0,
       collapsed: false,
-      tooltip: null,
+      singletonTooltip: null,
+      tooltipInstances: [],
       get collapsible() {
         return this.$options.collapsible !== false;
       },
       get buttons() {
         const buttonElements = this.$el.querySelectorAll(
           "[data-component='app-button']"
         );
-        return Array.from(buttonElements).map((el) => getData(el));
+        return Array.from(buttonElements).map((el) => getComponent(el));
       },
       get parent() {
         return this.$root.parentElement;
       },
       init() {
         this.$nextTick(() => {
           if (!this.collapsible)
             return;
-          this.createTooltipsSingleton();
+          this.ready = true;
           this.onResize();
+          this.createSingletonTooltip();
         });
         this.$watch("collapsed", (value) => {
           this.buttons.forEach((button) => {
             button.isCollapsed = value;
           });
+          this.$nextTick(() => this.createSingletonTooltip());
         });
       },
-      createTooltipsSingleton() {
-        const tippys = this.buttons.map((button) => {
-          return button.showTooltip() && button.$root.__x_tippy;
-        }).filter((t3) => t3);
-        this.tooltip = createSingleton(tippys, {
+      createSingletonTooltip() {
+        this.destroySingletonTooltip();
+        this.tooltipInstances = this.buttons.map((button) => button.shouldShowTooltip() && button.tippyInstance).filter((t3) => t3);
+        this.singletonTooltip = createSingleton(this.tooltipInstances, {
           theme: "coco-tooltip",
-          onShow: () => this.collapsed
+          delay: 100,
+          moveTransition: "transform 0.1s ease-out"
         });
       },
+      destroySingletonTooltip() {
+        if (this.singletonTooltip && this.singletonTooltip.destroy) {
+          this.singletonTooltip.destroy();
+          this.singletonTooltip = null;
+          this.tooltipInstances.forEach((tooltip) => tooltip.destroy());
+          this.tooltipInstances = [];
+        }
+      },
       onResize() {
         if (!this.collapsible)
           return;
         this.containerWidth = Math.ceil(this.parent.offsetWidth);
         if (this.collapsed) {
@@ -25126,12 +25156,12 @@
             this.contentWidth = contentWidth;
           }
         }
       },
       destroy() {
-        if (this.tooltip) {
-          this.tooltip.destroy();
-          this.tooltip = null;
+        if (this.singletonTooltip) {
+          this.singletonTooltip.destroy();
+          this.singletonTooltip = null;
         }
       }
     };
   });