Revert "DEV: FloatKit (#23541)" (#23549)

This reverts commits

0623ac684a65f95ce4f5438ff47944b1dc2119f4
408e71e437ef8abf98f93e3449898bf906766b0e
a32fa3b9470dde0543fcee809f2abd1f219f7336

User tips were running into some issues.

plugins/discourse-local-dates/assets/javascripts/initializers/discourse-local-dates.js

@@ -1,16 +1,17 @@
-import { bind } from "discourse-common/utils/decorators";
+import deprecated from "discourse-common/lib/deprecated";
+import { getOwner } from "discourse-common/lib/get-owner";
 import LocalDateBuilder from "../lib/local-date-builder";
 import { withPluginApi } from "discourse/lib/plugin-api";
 import showModal from "discourse/lib/show-modal";
 import { downloadCalendar } from "discourse/lib/download-calendar";
 import { renderIcon } from "discourse-common/lib/icon-library";
 import I18n from "I18n";
+import { hidePopover, showPopover } from "discourse/lib/d-popover";
 import {
   addTagDecorateCallback,
   addTextDecorateCallback,
 } from "discourse/lib/to-markdown";
 import generateDateMarkup from "discourse/plugins/discourse-local-dates/lib/local-date-markup-generator";
-import { htmlSafe } from "@ember/template";
 
 // Import applyLocalDates from discourse/lib/local-dates instead
 export function applyLocalDates(dates, siteSettings) {
@@ -344,9 +345,11 @@ function _calculateDuration(element) {
 export default {
   name: "discourse-local-dates",
 
-  @bind
   showDatePopover(event) {
-    const tooltip = this.container.lookup("service:tooltip");
+    const owner = getOwner(this);
+    if (owner.isDestroyed || owner.isDestroying) {
+      return;
+    }
 
     if (event?.target?.classList?.contains("download-calendar")) {
       const dataset = event.target.dataset;
@@ -357,25 +360,50 @@ export default {
         },
       ]);
 
-      return tooltip.close();
+      // TODO: remove this when rewriting preview as a component
+      const parentPopover = event.target.closest("[data-tippy-root]");
+      if (parentPopover?._tippy) {
+        parentPopover._tippy.hide();
+      }
+
+      return;
     }
 
     if (!event?.target?.classList?.contains("discourse-local-date")) {
       return;
     }
 
-    const siteSettings = this.container.lookup("service:site-settings");
-    return tooltip.show(event.target, {
-      content: htmlSafe(buildHtmlPreview(event.target, siteSettings)),
+    const siteSettings = owner.lookup("service:site-settings");
+
+    showPopover(event, {
+      trigger: "click",
+      content: buildHtmlPreview(event.target, siteSettings),
+      allowHTML: true,
+      interactive: true,
+      appendTo: "parent",
+      onHidden: (instance) => {
+        instance.destroy();
+      },
     });
   },
 
+  hideDatePopover(event) {
+    hidePopover(event);
+  },
+
   initialize(container) {
-    this.container = container;
-    window.addEventListener("click", this.showDatePopover, { passive: true });
+    window.addEventListener("click", this.showDatePopover);
 
     const siteSettings = container.lookup("service:site-settings");
     if (siteSettings.discourse_local_dates_enabled) {
+      $.fn.applyLocalDates = function () {
+        deprecated(
+          "`$.applyLocalDates()` is deprecated, import and use `applyLocalDates()` instead."
+        );
+
+        return applyLocalDates(this.toArray(), siteSettings);
+      };
+
       withPluginApi("0.8.8", initializeDiscourseLocalDates);
     }
   },

plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss

@@ -23,29 +23,29 @@
   }
 }
 
-.locale-dates-previews {
-  max-width: 250px;
+div[data-tippy-root] {
+  .locale-dates-previews {
+    max-width: 360px;
+    .preview {
+      display: flex;
+      flex-direction: column;
+      padding: 5px;
 
-  .preview {
-    display: flex;
-    flex-direction: column;
-    padding: 5px;
-    margin: 0;
+      .timezone {
+        font-weight: 700;
+      }
 
-    .timezone {
-      font-weight: 700;
-    }
-
-    &.current {
-      background: var(--tertiary-low);
+      &.current {
+        background: var(--tertiary-low);
+      }
     }
   }
-}
 
-.download-calendar {
-  text-align: right;
-  cursor: pointer;
-  margin-top: 0.5em;
+  .download-calendar {
+    text-align: right;
+    cursor: pointer;
+    margin-top: 0.5em;
+  }
 }
 
 .discourse-local-dates-create-modal-footer {

plugins/discourse-local-dates/spec/system/local_dates_spec.rb

@@ -31,46 +31,44 @@ describe "Local dates", type: :system do
 
       expect(topic_page).to have_content(topic.title)
 
+      post_dates = topic_page.find_all("span[data-date]")
+
       # Single date in a paragraph.
       #
-      find("span[data-date]:nth-of-type(1)").click
-      expect(page.find("[data-content] .current .date-time")).to have_text(
-        "#{formatted_date_for_year(12, 15)}\n2:19 PM",
-        exact: true,
-      )
-      page.send_keys(:escape)
+      post_dates[0].click
+      tippy_date = topic_page.find(".tippy-content .current .date-time")
+
+      expect(tippy_date).to have_text("#{formatted_date_for_year(12, 15)}\n2:19 PM", exact: true)
 
       # Two single dates in the same paragraph.
       #
-      find("span[data-date]:nth-of-type(2)").click
-      expect(page.find("[data-content] .current .date-time")).to have_text(
-        "#{formatted_date_for_year(12, 15)}\n1:20 AM",
-        exact: true,
-      )
-      page.send_keys(:escape)
+      post_dates[1].click
+      tippy_date = topic_page.find(".tippy-content .current .date-time")
 
-      find("span[data-date]:nth-of-type(3)").click
-      expect(page.find("[data-content] .current .date-time")).to have_text(
-        "#{formatted_date_for_year(12, 15)}\n2:40 AM",
-        exact: true,
-      )
-      page.send_keys(:escape)
+      expect(tippy_date).to have_text("#{formatted_date_for_year(12, 15)}\n1:20 AM", exact: true)
+
+      post_dates[2].click
+      tippy_date = topic_page.find(".tippy-content .current .date-time")
+
+      expect(tippy_date).to have_text("#{formatted_date_for_year(12, 15)}\n2:40 AM", exact: true)
 
       # Two date ranges in the same paragraph.
       #
-      find("span[data-date]:nth-of-type(4)").click
-      expect(page.find("[data-content] .current .date-time")).to have_text(
+      post_dates[3].click
+      tippy_date = topic_page.find(".tippy-content .current .date-time")
+
+      expect(tippy_date).to have_text(
         "#{formatted_date_for_year(12, 15)}\n11:25 AM → 12:26 AM",
         exact: true,
       )
-      page.send_keys(:escape)
 
-      find("span[data-date]:nth-of-type(6)").click
-      expect(page.find("[data-content] .current .date-time")).to have_text(
+      post_dates[5].click
+      tippy_date = topic_page.find(".tippy-content .current .date-time")
+
+      expect(tippy_date).to have_text(
         "#{formatted_date_for_year(12, 22)} 11:57 AM → #{formatted_date_for_year(12, 23)} 11:58 AM",
         exact: true,
       )
-      page.send_keys(:escape)
     end
   end