From 9b711cda202c0d6b55211ab139306d2dcd572fe9 Mon Sep 17 00:00:00 2001 From: Anders Kaseorg Date: Thu, 30 May 2024 12:51:29 -0700 Subject: [PATCH] tippy: Use namespace import for tippy.js. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Names like “delegate”, “Instance”, “Placement”, “Props”, and “ReferenceElement” are much too generic to make sense as named imports. The downside is that we now need to write tippy.default(…) instead of tippy(…) (because ES module namespace objects cannot be callable), but that cost is worthwhile. Signed-off-by: Anders Kaseorg --- web/src/add_stream_options_popover.ts | 10 ++-- web/src/admin.js | 4 +- web/src/bootstrap_typeahead.ts | 7 +-- web/src/buddy_list.ts | 4 +- web/src/click_handlers.js | 4 +- web/src/common.ts | 7 +-- web/src/compose_popovers.js | 4 +- web/src/compose_recipient.ts | 8 +-- web/src/compose_send_menu_popover.js | 4 +- web/src/compose_tooltips.ts | 18 +++--- web/src/copied_tooltip.ts | 4 +- web/src/drafts.ts | 4 +- web/src/integration_url_modal.ts | 9 ++- web/src/message_list_tooltips.ts | 5 +- web/src/personal_menu_popover.js | 4 +- web/src/playground_links_popover.ts | 6 +- web/src/popover_menus.ts | 46 +++++++--------- web/src/portico/help.js | 6 +- web/src/portico/tippyjs.ts | 4 +- web/src/settings_components.ts | 15 ++--- web/src/stats/stats.ts | 4 +- web/src/tippyjs.ts | 79 +++++++++++++-------------- web/src/user_card_popover.js | 4 +- web/src/user_group_popover.ts | 6 +- 24 files changed, 131 insertions(+), 135 deletions(-) diff --git a/web/src/add_stream_options_popover.ts b/web/src/add_stream_options_popover.ts index bf596bad56..cfb8b7becc 100644 --- a/web/src/add_stream_options_popover.ts +++ b/web/src/add_stream_options_popover.ts @@ -1,6 +1,6 @@ import $ from "jquery"; import assert from "minimalistic-assert"; -import type {ReferenceElement} from "tippy.js"; +import type * as tippy from "tippy.js"; import render_left_sidebar_stream_setting_popover from "../templates/popovers/left_sidebar/left_sidebar_stream_setting_popover.hbs"; @@ -33,14 +33,14 @@ export function initialize(): void { // When showing the popover menu, we want the // "Add channels" and the "Filter channels" tooltip // to appear below the "Add channels" icon. - const add_streams_tooltip: ReferenceElement | undefined = + const add_streams_tooltip: tippy.ReferenceElement | undefined = $("#add_streams_tooltip").get(0); assert(add_streams_tooltip !== undefined); add_streams_tooltip._tippy?.setProps({ placement: "bottom", }); - const filter_streams_tooltip: (ReferenceElement & HTMLElement) | undefined = + const filter_streams_tooltip: (tippy.ReferenceElement & HTMLElement) | undefined = $("#filter_streams_tooltip").get(0); // If `filter_streams_tooltip` is not triggered yet, this will set its initial placement. assert(filter_streams_tooltip !== undefined); @@ -58,14 +58,14 @@ export function initialize(): void { // "Add channels" and the "Filter channels" tooltip // to appear at it's original position that is // above the "Add channels" icon. - const add_streams_tooltip: ReferenceElement | undefined = + const add_streams_tooltip: tippy.ReferenceElement | undefined = $("#add_streams_tooltip").get(0); assert(add_streams_tooltip !== undefined); add_streams_tooltip._tippy?.setProps({ placement: "top", }); - const filter_streams_tooltip: (ReferenceElement & HTMLElement) | undefined = + const filter_streams_tooltip: (tippy.ReferenceElement & HTMLElement) | undefined = $("#filter_streams_tooltip").get(0); assert(filter_streams_tooltip !== undefined); filter_streams_tooltip.dataset.tippyPlacement = "top"; diff --git a/web/src/admin.js b/web/src/admin.js index 73054a0b69..9e41f6f49b 100644 --- a/web/src/admin.js +++ b/web/src/admin.js @@ -1,5 +1,5 @@ import $ from "jquery"; -import tippy from "tippy.js"; +import * as tippy from "tippy.js"; import render_admin_tab from "../templates/settings/admin_tab.hbs"; import render_settings_organization_settings_tip from "../templates/settings/organization_settings_tip.hbs"; @@ -272,7 +272,7 @@ export function build_page() { }), }; - tippy($("#realm_can_access_all_users_group_widget_container")[0], opts); + tippy.default($("#realm_can_access_all_users_group_widget_container")[0], opts); } } diff --git a/web/src/bootstrap_typeahead.ts b/web/src/bootstrap_typeahead.ts index 6f32bc3433..7c82f52973 100644 --- a/web/src/bootstrap_typeahead.ts +++ b/web/src/bootstrap_typeahead.ts @@ -138,8 +138,7 @@ import $ from "jquery"; import assert from "minimalistic-assert"; import {insertTextIntoField} from "text-field-edit"; -import type {Instance} from "tippy.js"; -import tippy from "tippy.js"; +import * as tippy from "tippy.js"; import {get_string_diff} from "./util"; @@ -234,7 +233,7 @@ export class Typeahead { advanceKeyCodes: number[]; non_tippy_parent_element: string | undefined; values: WeakMap; - instance: Instance | undefined; + instance: tippy.Instance | undefined; constructor(input_element: TypeaheadInputElement, options: TypeaheadOptions) { this.input_element = input_element; @@ -341,7 +340,7 @@ export class Typeahead { // We don't need tippy to position typeaheads which already know where they should be. return this; } - this.instance = tippy(this.input_element.$element[0], { + this.instance = tippy.default(this.input_element.$element[0], { // Lets typeahead take the width needed to fit the content // and wraps it if it overflows the visible container. maxWidth: "none", diff --git a/web/src/buddy_list.ts b/web/src/buddy_list.ts index 946f51e058..ff8aae59bd 100644 --- a/web/src/buddy_list.ts +++ b/web/src/buddy_list.ts @@ -1,6 +1,6 @@ import $ from "jquery"; import assert from "minimalistic-assert"; -import tippy from "tippy.js"; +import * as tippy from "tippy.js"; import render_section_header from "../templates/buddy_list/section_header.hbs"; import render_view_all_subscribers from "../templates/buddy_list/view_all_subscribers.hbs"; @@ -166,7 +166,7 @@ export class BuddyList extends BuddyListConf { // This will default to "bottom" placement for this tooltip. placement = "auto"; } - tippy($elem[0], { + tippy.default($elem[0], { // Because the buddy list subheadings are potential click targets // for purposes having nothing to do with the subscriber count // (collapsing/expanding), we delay showing the tooltip until the diff --git a/web/src/click_handlers.js b/web/src/click_handlers.js index 3de9975c3c..b1733b7c77 100644 --- a/web/src/click_handlers.js +++ b/web/src/click_handlers.js @@ -1,6 +1,6 @@ import $ from "jquery"; import assert from "minimalistic-assert"; -import tippy from "tippy.js"; +import * as tippy from "tippy.js"; // You won't find every click handler here, but it's a good place to start! @@ -519,7 +519,7 @@ export function initialize() { // This will default to "bottom" placement for this tooltip. placement = "auto"; } - tippy($elem[0], { + tippy.default($elem[0], { // Quickly display and hide right sidebar tooltips // so that they don't stick and overlap with // each other. diff --git a/web/src/common.ts b/web/src/common.ts index e99a00019d..1df24fea16 100644 --- a/web/src/common.ts +++ b/web/src/common.ts @@ -1,6 +1,5 @@ import $ from "jquery"; -import type {ReferenceElement} from "tippy.js"; -import tippy from "tippy.js"; +import * as tippy from "tippy.js"; import {$t} from "./i18n"; @@ -123,8 +122,8 @@ function set_password_toggle_label( ): void { $(password_selector).attr("aria-label", label); if (tippy_tooltips) { - const element: ReferenceElement = $(password_selector)[0]; - const tippy_instance = element._tippy ?? tippy(element); + const element: tippy.ReferenceElement = $(password_selector)[0]; + const tippy_instance = element._tippy ?? tippy.default(element); tippy_instance.setContent(label); } else { $(password_selector).attr("title", label); diff --git a/web/src/compose_popovers.js b/web/src/compose_popovers.js index ee5e9abd6b..275e4e1c0a 100644 --- a/web/src/compose_popovers.js +++ b/web/src/compose_popovers.js @@ -1,5 +1,5 @@ import $ from "jquery"; -import {delegate} from "tippy.js"; +import * as tippy from "tippy.js"; import render_compose_control_buttons_popover from "../templates/popovers/compose_control_buttons/compose_control_buttons_popover.hbs"; import render_mobile_message_buttons_popover from "../templates/popovers/mobile_message_buttons_popover.hbs"; @@ -16,7 +16,7 @@ export function initialize() { // compose box buttons popover shown on mobile widths. // We want this click event to propagate and hide other popovers // that could possibly obstruct user from using this popover. - delegate("body", { + tippy.delegate("body", { ...popover_menus.default_popover_props, // Attach the click event to `.mobile_button_container`, since // the button (`.compose_mobile_button`) already has a hover diff --git a/web/src/compose_recipient.ts b/web/src/compose_recipient.ts index 64fcd26358..fb8e06ee0f 100644 --- a/web/src/compose_recipient.ts +++ b/web/src/compose_recipient.ts @@ -3,7 +3,7 @@ import $ from "jquery"; import _, {isNumber} from "lodash"; import assert from "minimalistic-assert"; -import type {Instance, Placement} from "tippy.js"; +import type * as tippy from "tippy.js"; import render_inline_decorated_stream_name from "../templates/inline_decorated_stream_name.hbs"; @@ -238,7 +238,7 @@ export function possibly_update_stream_name_in_compose(stream_id: number): void } } -function item_click_callback(event: JQuery.ClickEvent, dropdown: Instance): void { +function item_click_callback(event: JQuery.ClickEvent, dropdown: tippy.Instance): void { const recipient_id_str = $(event.currentTarget).attr("data-unique-id"); assert(recipient_id_str !== undefined); let recipient_id: string | number = recipient_id_str; @@ -273,7 +273,7 @@ function get_options_for_recipient_widget(): Option[] { return options; } -function compose_recipient_dropdown_on_show(dropdown: Instance): void { +function compose_recipient_dropdown_on_show(dropdown: tippy.Instance): void { // Offset to display dropdown above compose. let top_offset = 5; const window_height = window.innerHeight; @@ -285,7 +285,7 @@ function compose_recipient_dropdown_on_show(dropdown: Instance): void { // pixels below compose starting from top of compose box. const bottom_space = window_height - recipient_input_top - search_box_and_padding_height; // Show dropdown on top / bottom based on available space. - let placement: Placement = "top-start"; + let placement: tippy.Placement = "top-start"; if (bottom_space > top_space) { placement = "bottom-start"; top_offset = -30; diff --git a/web/src/compose_send_menu_popover.js b/web/src/compose_send_menu_popover.js index ebe0b38aac..03621c3a76 100644 --- a/web/src/compose_send_menu_popover.js +++ b/web/src/compose_send_menu_popover.js @@ -1,5 +1,5 @@ import $ from "jquery"; -import {delegate} from "tippy.js"; +import * as tippy from "tippy.js"; import render_send_later_popover from "../templates/popovers/send_later_popover.hbs"; import render_send_later_modal from "../templates/send_later_modal.hbs"; @@ -142,7 +142,7 @@ export function toggle() { } export function initialize() { - delegate("body", { + tippy.delegate("body", { ...popover_menus.default_popover_props, target: "#send_later i", onUntrigger() { diff --git a/web/src/compose_tooltips.ts b/web/src/compose_tooltips.ts index 22f86c1231..9796461a6f 100644 --- a/web/src/compose_tooltips.ts +++ b/web/src/compose_tooltips.ts @@ -1,7 +1,7 @@ import $ from "jquery"; import _ from "lodash"; import assert from "minimalistic-assert"; -import {delegate} from "tippy.js"; +import * as tippy from "tippy.js"; import render_drafts_tooltip from "../templates/drafts_tooltip.hbs"; import render_narrow_to_compose_recipients_tooltip from "../templates/narrow_to_compose_recipients_tooltip.hbs"; @@ -17,7 +17,7 @@ import {parse_html} from "./ui_util"; import {user_settings} from "./user_settings"; export function initialize(): void { - delegate("body", { + tippy.delegate("body", { target: [ // Ideally this would be `#compose_buttons .button`, but the // reply button's actual area is its containing span. @@ -34,7 +34,7 @@ export function initialize(): void { instance.destroy(); }, }); - delegate("body", { + tippy.delegate("body", { target: "#compose_buttons .compose-reply-button-wrapper", delay: EXTRA_LONG_HOVER_DELAY, // Only show on mouseenter since for spectators, clicking on these @@ -81,7 +81,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: "#new_conversation_button", delay: EXTRA_LONG_HOVER_DELAY, // Only show on mouseenter since for spectators, clicking on these @@ -115,7 +115,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { // Only display Tippy content on classes accompanied by a `data-` attribute. target: ` .compose_control_button[data-tooltip-template-id], @@ -149,7 +149,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: ".send-control-button", delay: LONG_HOVER_DELAY, placement: "top", @@ -176,7 +176,7 @@ export function initialize(): void { appendTo: () => document.body, }); - delegate("body", { + tippy.delegate("body", { target: "#compose-send-button", delay: EXTRA_LONG_HOVER_DELAY, // By default, tippyjs uses a trigger value of "mouseenter focus", @@ -198,7 +198,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: ".narrow_to_compose_recipients", delay: LONG_HOVER_DELAY, appendTo: () => document.body, @@ -236,7 +236,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { // TODO: Might need to target just the Send button itself // in the new design target: ".disabled-message-send-controls", diff --git a/web/src/copied_tooltip.ts b/web/src/copied_tooltip.ts index 3869386fd9..a8076c8772 100644 --- a/web/src/copied_tooltip.ts +++ b/web/src/copied_tooltip.ts @@ -1,4 +1,4 @@ -import tippy from "tippy.js"; +import * as tippy from "tippy.js"; import {$t} from "./i18n"; @@ -8,7 +8,7 @@ export function show_copied_confirmation( timeout_in_ms = 1000, ): void { // Display a tooltip to notify the user the message or code was copied. - const instance = tippy(copy_button, { + const instance = tippy.default(copy_button, { placement: "top", appendTo: () => document.body, onUntrigger() { diff --git a/web/src/drafts.ts b/web/src/drafts.ts index 13488b068e..f2bc712100 100644 --- a/web/src/drafts.ts +++ b/web/src/drafts.ts @@ -2,7 +2,7 @@ import {subDays} from "date-fns"; import $ from "jquery"; import _ from "lodash"; import assert from "minimalistic-assert"; -import tippy from "tippy.js"; +import * as tippy from "tippy.js"; import {z} from "zod"; import render_confirm_delete_all_drafts from "../templates/confirm_dialog/confirm_delete_all_drafts.hbs"; @@ -364,7 +364,7 @@ export function restore_message(draft: LocalStorageDraft): ComposeArguments { function draft_notify(): void { // Display a tooltip to notify the user about the saved draft. - const instance = tippy(".top_left_drafts .unread_count", { + const instance = tippy.default(".top_left_drafts .unread_count", { content: $t({defaultMessage: "Saved as draft"}), arrow: true, placement: "right", diff --git a/web/src/integration_url_modal.ts b/web/src/integration_url_modal.ts index 4601854bc7..f5304fc4fc 100644 --- a/web/src/integration_url_modal.ts +++ b/web/src/integration_url_modal.ts @@ -1,6 +1,6 @@ import ClipboardJS from "clipboard"; import $ from "jquery"; -import type {Instance} from "tippy.js"; +import type * as tippy from "tippy.js"; import render_generate_integration_url_modal from "../templates/settings/generate_integration_url_modal.hbs"; import render_integration_events from "../templates/settings/integration_events.hbs"; @@ -177,7 +177,7 @@ export function show_generate_integration_url_modal(api_key: string): void { function integration_item_click_callback( event: JQuery.ClickEvent, - dropdown: Instance, + dropdown: tippy.Instance, ): void { integration_input_dropdown_widget.render(); $(".integration-url-name-wrapper").trigger("input"); @@ -214,7 +214,10 @@ export function show_generate_integration_url_modal(api_key: string): void { return options; } - function stream_item_click_callback(event: JQuery.ClickEvent, dropdown: Instance): void { + function stream_item_click_callback( + event: JQuery.ClickEvent, + dropdown: tippy.Instance, + ): void { stream_input_dropdown_widget.render(); $(".integration-url-stream-wrapper").trigger("input"); const user_selected_option = stream_input_dropdown_widget.value(); diff --git a/web/src/message_list_tooltips.ts b/web/src/message_list_tooltips.ts index d03b02497a..72d75891b4 100644 --- a/web/src/message_list_tooltips.ts +++ b/web/src/message_list_tooltips.ts @@ -1,7 +1,6 @@ import $ from "jquery"; import assert from "minimalistic-assert"; -import {delegate} from "tippy.js"; -import type * as tippy from "tippy.js"; +import * as tippy from "tippy.js"; import render_change_visibility_policy_button_tooltip from "../templates/change_visibility_policy_button_tooltip.hbs"; import render_message_edit_notice_tooltip from "../templates/message_edit_notice_tooltip.hbs"; @@ -44,7 +43,7 @@ const store_message_list_instances_plugin = { function message_list_tooltip(target: string, props: Partial = {}): void { const {onShow, ...other_props} = props; - delegate("body", { + tippy.delegate("body", { target, appendTo: () => document.body, plugins: [store_message_list_instances_plugin], diff --git a/web/src/personal_menu_popover.js b/web/src/personal_menu_popover.js index f5bbe93781..4e43ddde14 100644 --- a/web/src/personal_menu_popover.js +++ b/web/src/personal_menu_popover.js @@ -1,5 +1,5 @@ import $ from "jquery"; -import tippy from "tippy.js"; +import * as tippy from "tippy.js"; import render_navbar_personal_menu_popover from "../templates/popovers/navbar/navbar_personal_menu_popover.hbs"; @@ -37,7 +37,7 @@ export function initialize() { const $popper = $(instance.popper); popover_menus.popover_instances.personal_menu = instance; - tippy(".personal-menu-clear-status", { + tippy.default(".personal-menu-clear-status", { placement: "top", appendTo: document.body, }); diff --git a/web/src/playground_links_popover.ts b/web/src/playground_links_popover.ts index dd52f95aaa..bfc4c7bfd5 100644 --- a/web/src/playground_links_popover.ts +++ b/web/src/playground_links_popover.ts @@ -1,5 +1,5 @@ import $ from "jquery"; -import type {Instance as PopoverInstance, ReferenceElement} from "tippy.js"; +import type * as tippy from "tippy.js"; import url_template_lib from "url-template"; import render_playground_links_popover from "../templates/popovers/playground_links_popover.hbs"; @@ -12,13 +12,13 @@ import * as ui_util from "./ui_util"; type RealmPlaygroundWithURL = RealmPlayground & {playground_url: string}; -let playground_links_popover_instance: PopoverInstance; +let playground_links_popover_instance: tippy.Instance; // Playground_store contains all the data we need to generate a popover of // playground links for each code block. The element is the target element // to pop off of. function toggle_playground_links_popover( - element: ReferenceElement, + element: tippy.ReferenceElement, playground_store: Map, ): void { if (is_open()) { diff --git a/web/src/popover_menus.ts b/web/src/popover_menus.ts index 52fd1b8549..8f1846ac97 100644 --- a/web/src/popover_menus.ts +++ b/web/src/popover_menus.ts @@ -3,8 +3,7 @@ popovers system in popovers.js. */ import $ from "jquery"; -import type {Instance as PopoverInstance, Props as PopoverProps, ReferenceElement} from "tippy.js"; -import tippy from "tippy.js"; +import * as tippy from "tippy.js"; import * as blueslip from "./blueslip"; import {media_breakpoints_num} from "./css_variables"; @@ -31,7 +30,7 @@ type PopoverName = | "gear_menu" | "help_menu"; -export const popover_instances: Record = { +export const popover_instances: Record = { compose_control_buttons: null, starred_messages: null, drafts: null, @@ -85,23 +84,20 @@ export function focus_first_popover_item($items: JQuery, index = 0): void { $items.eq(index).expectOne().trigger("focus"); } -export function sidebar_menu_instance_handle_keyboard( - instance: PopoverInstance, - key: string, -): void { +export function sidebar_menu_instance_handle_keyboard(instance: tippy.Instance, key: string): void { const items = get_popover_items_for_instance(instance); popover_items_handle_keyboard(key, items); } -export function get_visible_instance(): PopoverInstance | null | undefined { +export function get_visible_instance(): tippy.Instance | null | undefined { return Object.values(popover_instances).find(Boolean); } -export function get_topic_menu_popover(): PopoverInstance | null { +export function get_topic_menu_popover(): tippy.Instance | null { return popover_instances.topics_menu; } -export function get_scheduled_messages_popover(): PopoverInstance | null { +export function get_scheduled_messages_popover(): tippy.Instance | null { return popover_instances.send_later; } @@ -109,11 +105,11 @@ export function is_scheduled_messages_popover_displayed(): boolean | undefined { return popover_instances.send_later?.state.isVisible; } -export function get_compose_control_buttons_popover(): PopoverInstance | null { +export function get_compose_control_buttons_popover(): tippy.Instance | null { return popover_instances.compose_control_buttons; } -export function get_starred_messages_popover(): PopoverInstance | null { +export function get_starred_messages_popover(): tippy.Instance | null { return popover_instances.starred_messages; } @@ -125,7 +121,7 @@ export function is_gear_menu_popover_displayed(): boolean | undefined { return popover_instances.gear_menu?.state.isVisible; } -export function get_gear_menu_instance(): PopoverInstance | null { +export function get_gear_menu_instance(): tippy.Instance | null { return popover_instances.gear_menu; } @@ -137,7 +133,7 @@ export function is_message_actions_popover_displayed(): boolean | undefined { return popover_instances.message_actions?.state.isVisible; } -function get_popover_items_for_instance(instance: PopoverInstance): JQuery | undefined { +function get_popover_items_for_instance(instance: tippy.Instance): JQuery | undefined { const $current_elem = $(instance.popper); const class_name = $current_elem.attr("class"); @@ -149,7 +145,7 @@ function get_popover_items_for_instance(instance: PopoverInstance): JQuery | und return $current_elem.find("a, [tabindex='0']").filter(":visible"); } -export function hide_current_popover_if_visible(instance: PopoverInstance | null): void { +export function hide_current_popover_if_visible(instance: tippy.Instance | null): void { // Call this function instead of `instance.hide` to avoid tippy // logging about the possibility of already hidden instances, // which can occur when a click handler does a hide_all(). @@ -158,7 +154,7 @@ export function hide_current_popover_if_visible(instance: PopoverInstance | null } } -export const default_popover_props: Partial = { +export const default_popover_props: Partial = { delay: 0, appendTo: () => document.body, trigger: "click", @@ -186,7 +182,7 @@ export const default_popover_props: Partial = { requires: ["$$tippy"], fn({state}) { // eslint-disable-next-line @typescript-eslint/consistent-type-assertions - const instance = (state.elements.reference as ReferenceElement)._tippy!; + const instance = (state.elements.reference as tippy.ReferenceElement)._tippy!; const $popover = $(state.elements.popper); const $tippy_box = $popover.find(".tippy-box"); if ($tippy_box.hasClass("show-when-reference-hidden")) { @@ -281,7 +277,7 @@ export const left_sidebar_tippy_options = { }, }; -export function on_show_prep(instance: PopoverInstance): void { +export function on_show_prep(instance: tippy.Instance): void { $(instance.popper).on("click", (e) => { // Popover is not hidden on click inside it unless the click handler for the // element explicitly hides the popover when handling the event. @@ -297,8 +293,8 @@ export function on_show_prep(instance: PopoverInstance): void { } function get_props_for_popover_centering( - popover_props: Partial, -): Partial { + popover_props: Partial, +): Partial { return { arrow: false, getReferenceClientRect: () => new DOMRect(0, 0, 0, 0), @@ -364,10 +360,10 @@ function get_props_for_popover_centering( // Toggles a popover menu directly; intended for use in keyboard // shortcuts and similar alternative ways to open a popover menu. export function toggle_popover_menu( - target: ReferenceElement, - popover_props: Partial, + target: tippy.ReferenceElement, + popover_props: Partial, options?: {show_as_overlay_on_mobile: boolean}, -): PopoverInstance { +): tippy.Instance { const instance = target._tippy; if (instance) { hide_current_popover_if_visible(instance); @@ -391,7 +387,7 @@ export function toggle_popover_menu( ]; } - return tippy(target, { + return tippy.default(target, { ...default_popover_props, showOnCreate: true, ...popover_props, @@ -401,7 +397,7 @@ export function toggle_popover_menu( // Main function to define a popover menu, opened via clicking on the // target selector. -export function register_popover_menu(target: string, popover_props: Partial): void { +export function register_popover_menu(target: string, popover_props: Partial): void { // For some elements, such as the click target to open the message // actions menu, we want to avoid propagating the click event to // parent elements. Tippy's built-in `delegate` method does not diff --git a/web/src/portico/help.js b/web/src/portico/help.js index 58fc1cb42f..ec12bea10b 100644 --- a/web/src/portico/help.js +++ b/web/src/portico/help.js @@ -1,7 +1,7 @@ import ClipboardJS from "clipboard"; import $ from "jquery"; import SimpleBar from "simplebar"; -import tippy from "tippy.js"; +import * as tippy from "tippy.js"; import copy_to_clipboard_svg from "../../templates/copy_to_clipboard_svg.hbs"; import * as common from "../common"; @@ -46,14 +46,14 @@ function add_copy_to_clipboard_element($codehilite) { }); // Show a tippy tooltip when the button is hovered - const tooltip_copy = tippy($copy_button[0], { + const tooltip_copy = tippy.default($copy_button[0], { content: "Copy code", trigger: "mouseenter", placement: "top", }); // Show a tippy tooltip when the code is copied - const tooltip_copied = tippy($copy_button[0], { + const tooltip_copied = tippy.default($copy_button[0], { content: "Copied!", trigger: "manual", placement: "top", diff --git a/web/src/portico/tippyjs.ts b/web/src/portico/tippyjs.ts index e8aae7010f..3573873eae 100644 --- a/web/src/portico/tippyjs.ts +++ b/web/src/portico/tippyjs.ts @@ -1,8 +1,8 @@ import $ from "jquery"; -import tippy from "tippy.js"; +import * as tippy from "tippy.js"; function initialize(): void { - tippy("[data-tippy-content]", { + tippy.default("[data-tippy-content]", { // Same defaults as set in web app tippyjs module. maxWidth: 300, delay: [100, 20], diff --git a/web/src/settings_components.ts b/web/src/settings_components.ts index 63328c0e0f..9a7b24c270 100644 --- a/web/src/settings_components.ts +++ b/web/src/settings_components.ts @@ -1,7 +1,6 @@ import $ from "jquery"; import assert from "minimalistic-assert"; -import type {PopperElement, Props} from "tippy.js"; -import tippy from "tippy.js"; +import * as tippy from "tippy.js"; import {z} from "zod"; import render_compose_banner from "../templates/compose_banner/compose_banner.hbs"; @@ -1158,12 +1157,14 @@ function enable_or_disable_save_button($subsection_elem: JQuery): void { disable_save_btn = should_disable_save_button_for_time_limit_settings(time_limit_settings); } else if ($subsection_elem.attr("id") === "org-other-settings") { disable_save_btn = should_disable_save_button_for_jitsi_server_url_setting(); - const $button_wrapper = $subsection_elem.find(".subsection-changes-save"); + const $button_wrapper = $subsection_elem.find( + ".subsection-changes-save", + ); const tippy_instance = $button_wrapper[0]._tippy; if (disable_save_btn) { // avoid duplication of tippy if (!tippy_instance) { - const opts: Partial = {placement: "top"}; + const opts: Partial = {placement: "top"}; initialize_disable_btn_hint_popover( $button_wrapper, $t({defaultMessage: "Cannot save invalid Jitsi server URL."}), @@ -1183,9 +1184,9 @@ function enable_or_disable_save_button($subsection_elem: JQuery): void { export function initialize_disable_btn_hint_popover( $btn_wrapper: JQuery, hint_text: string | undefined, - opts: Partial, + opts: Partial, ): void { - const tippy_opts: Partial = { + const tippy_opts: Partial = { animation: false, hideOnClick: false, placement: "bottom", @@ -1197,5 +1198,5 @@ export function initialize_disable_btn_hint_popover( if (hint_text !== undefined) { tippy_opts.content = hint_text; } - tippy($btn_wrapper[0], tippy_opts); + tippy.default($btn_wrapper[0], tippy_opts); } diff --git a/web/src/stats/stats.ts b/web/src/stats/stats.ts index d1c9b3cc85..b8245825fe 100644 --- a/web/src/stats/stats.ts +++ b/web/src/stats/stats.ts @@ -3,7 +3,7 @@ import assert from "minimalistic-assert"; import PlotlyBar from "plotly.js/lib/bar"; import Plotly from "plotly.js/lib/core"; import PlotlyPie from "plotly.js/lib/pie"; -import tippy from "tippy.js"; +import * as tippy from "tippy.js"; import {z} from "zod"; import * as blueslip from "../blueslip"; @@ -224,7 +224,7 @@ function update_last_full_update(end_times: number[]): void { } $(() => { - tippy(".last_update_tooltip", { + tippy.default(".last_update_tooltip", { // Same defaults as set in our tippyjs module. maxWidth: 300, delay: [100, 20], diff --git a/web/src/tippyjs.ts b/web/src/tippyjs.ts index 79bb206413..26b3eaa1c1 100644 --- a/web/src/tippyjs.ts +++ b/web/src/tippyjs.ts @@ -1,7 +1,6 @@ import $ from "jquery"; import assert from "minimalistic-assert"; -import type {ReferenceElement} from "tippy.js"; -import tippy, {delegate} from "tippy.js"; +import * as tippy from "tippy.js"; import render_buddy_list_title_tooltip from "../templates/buddy_list/title_tooltip.hbs"; import render_org_logo_tooltip from "../templates/org_logo_tooltip.hbs"; @@ -52,7 +51,7 @@ export const EXTRA_LONG_HOVER_DELAY: [number, number] = [1500, 20]; // We override the defaults set by tippy library here, // so make sure to check this too after checking tippyjs // documentation for default properties. -tippy.setDefaultProps({ +tippy.default.setDefaultProps({ // Tooltips shouldn't take more space than mobile widths. maxWidth: 300, delay: INSTANT_HOVER_DELAY, @@ -85,14 +84,14 @@ export function initialize(): void { // * Set `data-tippy-content="{{t 'Tooltip content' }}"`, often // replacing a `title` attribute on an element that had both. // * Set placement; we typically use `data-tippy-placement="top"`. - delegate("body", { + tippy.delegate("body", { target: ".tippy-zulip-tooltip", }); // variant of tippy-zulip-tooltip above having delay=LONG_HOVER_DELAY, // default placement="top" with fallback placement="bottom", // and appended to body - delegate("body", { + tippy.delegate("body", { target: ".tippy-zulip-delayed-tooltip", // Disable trigger on focus, to avoid displaying on-click. trigger: "mouseenter", @@ -110,7 +109,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: ".toggle-subscription-tooltip", trigger: "mouseenter", delay: EXTRA_LONG_HOVER_DELAY, @@ -118,7 +117,7 @@ export function initialize(): void { placement: "bottom", }); - delegate("body", { + tippy.delegate("body", { target: ".tippy-left-sidebar-tooltip", placement: "right", delay: EXTRA_LONG_HOVER_DELAY, @@ -139,7 +138,7 @@ export function initialize(): void { // this element doesn't have an always visible label, and // thus hovering it is a way to find out what it does, give // it the faster LONG_HOVER_DELAY. - delegate("body", { + tippy.delegate("body", { target: "#show_all_private_messages", placement: "right", delay: LONG_HOVER_DELAY, @@ -158,7 +157,7 @@ export function initialize(): void { // Variant of .tippy-left-sidebar-tooltip configuration. Here // we need to dynamically check which view is the home view. - delegate("body", { + tippy.delegate("body", { target: ".tippy-views-tooltip", placement: "right", delay: EXTRA_LONG_HOVER_DELAY, @@ -189,7 +188,7 @@ export function initialize(): void { // below specify the target directly, elements using those should // not have the tippy-zulip-tooltip class. - delegate("body", { + tippy.delegate("body", { target: ".draft-selection-tooltip", delay: LONG_HOVER_DELAY, appendTo: () => document.body, @@ -203,7 +202,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: ".delete-selected-drafts-button-container", appendTo: () => document.body, onShow(instance) { @@ -216,7 +215,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: "#add-poll-modal .dialog_submit_button_container", appendTo: () => document.body, onShow(instance) { @@ -235,7 +234,7 @@ export function initialize(): void { $("body").on( "blur", ".message_control_button, .delete-selected-drafts-button-container", - function (this: ReferenceElement) { + function (this: tippy.ReferenceElement) { // Remove tooltip when user is trying to tab through all the icons. // If user tabs slowly, tooltips are displayed otherwise they are // destroyed before they can be displayed. @@ -243,7 +242,7 @@ export function initialize(): void { }, ); - delegate("body", { + tippy.delegate("body", { target: [ "#streams_header .streams-tooltip-target", "#scroll-to-bottom-button-clickable-area", @@ -258,7 +257,7 @@ export function initialize(): void { appendTo: () => document.body, }); - delegate("body", { + tippy.delegate("body", { target: [ "#compose_top_right [data-tippy-content]", "#compose_top_right [data-tooltip-template-id]", @@ -270,7 +269,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: ".media-info-wrapper > .media-description > .title", appendTo: () => document.body, onShow(instance) { @@ -294,7 +293,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { // Configure tooltips for the stream_sorter_toggle buttons. // TODO: Ideally, we'd extend this to be a common mechanism for @@ -309,7 +308,7 @@ export function initialize(): void { appendTo: () => document.body, }); - delegate("body", { + tippy.delegate("body", { // This tooltip appears on the "Summary" checkboxes in // settings > custom profile fields, when at the limit of 2 // fields with display_in_profile_summary enabled. @@ -331,7 +330,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: "#full_name_input_container.disabled_setting_tooltip", content: $t({ defaultMessage: @@ -343,7 +342,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: "#change_email_button_container.disabled_setting_tooltip", content: $t({defaultMessage: "Email address changes are disabled in this organization."}), appendTo: () => document.body, @@ -352,7 +351,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: [ "#deactivate_account_container.disabled_setting_tooltip", "#edit-user-form .deactivate_user_button_tooltip", @@ -367,7 +366,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: "#deactivate_realm_button_container.disabled_setting_tooltip", content: $t({ defaultMessage: "Only organization owners may deactivate an organization.", @@ -378,7 +377,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: ".settings-radio-input-parent.default_stream_private_tooltip", content: $t({ defaultMessage: "Default channels for new users cannot be made private.", @@ -389,7 +388,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: ".default-stream.default_stream_private_tooltip", content: $t({ defaultMessage: "Private channels cannot be default channels for new users.", @@ -400,7 +399,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: "[data-tab-key='invite-link-tab'].disabled", content: $t({ defaultMessage: @@ -412,7 +411,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: [ "#api_key_button_container.disabled_setting_tooltip", "#user_email_address_dropdown_container.disabled_setting_tooltip", @@ -426,7 +425,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: "[data-tab-key='invite-email-tab'].disabled", content: $t({ defaultMessage: @@ -438,7 +437,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: ".views-tooltip-target", onShow(instance) { if ($("#toggle-top-left-navigation-area-icon").hasClass("fa-caret-down")) { @@ -455,7 +454,7 @@ export function initialize(): void { appendTo: () => document.body, }); - delegate("body", { + tippy.delegate("body", { target: ".dm-tooltip-target", onShow(instance) { if ($(".direct-messages-container").hasClass("zoom-in")) { @@ -477,7 +476,7 @@ export function initialize(): void { appendTo: () => document.body, }); - delegate("body", { + tippy.delegate("body", { target: "#stream_creation_form .add_subscribers_disabled", content: $t({ defaultMessage: @@ -489,7 +488,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: ".user_row .actions button", trigger: "mouseenter", onShow(instance) { @@ -506,12 +505,12 @@ export function initialize(): void { appendTo: () => document.body, }); - delegate("body", { + tippy.delegate("body", { target: ".user-card-status-area .status-emoji", appendTo: () => document.body, }); - delegate("body", { + tippy.delegate("body", { target: ".status-emoji-name", placement: "top", delay: INSTANT_HOVER_DELAY, @@ -534,7 +533,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { /* The tooltip for new user group button (+) icon button on #groups overlay was not mounted correctly as its sibling element (search bar) @@ -549,7 +548,7 @@ export function initialize(): void { appendTo: () => document.body, }); - delegate("body", { + tippy.delegate("body", { target: "#move_topic_to_stream_widget_wrapper", onShow(instance) { if ($("#move_topic_to_stream_widget").prop("disabled")) { @@ -566,7 +565,7 @@ export function initialize(): void { appendTo: () => document.body, }); - delegate("body", { + tippy.delegate("body", { target: "#userlist-header", placement: "top", appendTo: () => document.body, @@ -578,7 +577,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: "#userlist-toggle", delay: LONG_HOVER_DELAY, placement: "bottom", @@ -596,7 +595,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: "#realm-logo", placement: "right", appendTo: () => document.body, @@ -612,7 +611,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: ".custom-user-field-label-wrapper.required-field-wrapper", content: $t({ defaultMessage: "This profile field is required.", @@ -623,7 +622,7 @@ export function initialize(): void { }, }); - delegate("body", { + tippy.delegate("body", { target: ".popover-contains-shift-hotkey", trigger: "mouseenter", placement: "top", diff --git a/web/src/user_card_popover.js b/web/src/user_card_popover.js index 838b9170d8..303166be33 100644 --- a/web/src/user_card_popover.js +++ b/web/src/user_card_popover.js @@ -2,7 +2,7 @@ import ClipboardJS from "clipboard"; import {parseISO} from "date-fns"; import $ from "jquery"; import assert from "minimalistic-assert"; -import tippy from "tippy.js"; +import * as tippy from "tippy.js"; import render_confirm_mute_user from "../templates/confirm_dialog/confirm_mute_user.hbs"; import render_user_card_popover from "../templates/popovers/user_card/user_card_popover.hbs"; @@ -455,7 +455,7 @@ function init_email_tooltip(user) { $(".user_popover_email").each(function () { if (this.clientWidth < this.scrollWidth) { - tippy(this, { + tippy.default(this, { placement: "bottom", content: people.get_visible_email(user), interactive: true, diff --git a/web/src/user_group_popover.ts b/web/src/user_group_popover.ts index 385a5b532b..b7ee3b7545 100644 --- a/web/src/user_group_popover.ts +++ b/web/src/user_group_popover.ts @@ -1,6 +1,6 @@ import $ from "jquery"; import assert from "minimalistic-assert"; -import type {Instance as PopoverInstance, ReferenceElement} from "tippy.js"; +import type * as tippy from "tippy.js"; import render_user_group_info_popover from "../templates/popovers/user_group_info_popover.hbs"; @@ -17,7 +17,7 @@ import * as ui_util from "./ui_util"; import * as user_groups from "./user_groups"; import * as util from "./util"; -let user_group_popover_instance: PopoverInstance | undefined; +let user_group_popover_instance: tippy.Instance | undefined; type PopoverGroupMember = User & {user_circle_class: string; user_last_seen_time_status: string}; @@ -57,7 +57,7 @@ export function handle_keyboard(key: string): void { // in case of message, message_id is the message id containing it; // in case of user group pill, message_id is not used; export function toggle_user_group_info_popover( - element: ReferenceElement, + element: tippy.ReferenceElement, message_id: number | undefined, ): void { if (is_open()) {