@esri/calcite-components 5.1.0-next.7 → 5.1.0-next.9

package/dist/chunks/useForm.js

@@ -0,0 +1,165 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { makeGenericController } from "@arcgis/lumina/controllers";
+import { uncapitalize, kebabToPascal } from "@arcgis/toolkit/string";
+import { s as syncInputDelegate, i as isSupportedType } from "./input.js";
+const componentsWithInputEvent = [
+  "calcite-input",
+  "calcite-input-number",
+  "calcite-input-text",
+  "calcite-text-area"
+];
+function getClearValidationEventName(componentTag) {
+  const componentTagCamelCase = uncapitalize(kebabToPascal(componentTag));
+  return `${componentTagCamelCase}${componentsWithInputEvent.includes(componentTag) ? "Input" : "Change"}`;
+}
+function displayValidationMessage(component, { status, message, icon }) {
+  if ("status" in component) {
+    component.status = status;
+  }
+  if ("validationIcon" in component && typeof component.validationIcon !== "string") {
+    component.validationIcon = icon;
+  }
+  if ("validationMessage" in component && !component.validationMessage) {
+    component.validationMessage = message;
+  }
+}
+function syncInternalInput(component, input) {
+  const { disabled, required } = component;
+  input.disabled = disabled;
+  input.required = !!required;
+  if (isCheckable(component)) {
+    input.checked = component.checked;
+  } else if (isInputComponent(component, input)) {
+    syncInputDelegate(input.type, component, input);
+  }
+}
+function isCheckable(component) {
+  return "checked" in component;
+}
+function isInputComponent(component, input) {
+  return component && isSupportedType(input.type);
+}
+const useForm = (options) => {
+  return makeGenericController((component, controller) => {
+    let defaultValueDirty = false;
+    let defaultCheckedDirty = false;
+    let inputDelegate;
+    let lastAssociatedForm = null;
+    if (options.inputType) {
+      inputDelegate = document.createElement("input");
+      inputDelegate.type = options.inputType;
+    }
+    function invalidFormHandler(event) {
+      event?.preventDefault();
+    }
+    function onFormReset() {
+      if ("status" in component) {
+        component.status = "idle";
+      }
+      if ("validationIcon" in component) {
+        component.validationIcon = false;
+      }
+      if ("validationMessage" in component) {
+        component.validationMessage = "";
+      }
+      if (isCheckable(component)) {
+        component.checked = defaultCheckedDirty ? component.defaultChecked : component.checked;
+      }
+      component.value = defaultValueDirty ? component.defaultValue : component.value;
+      defaultValueDirty = false;
+      defaultCheckedDirty = false;
+    }
+    component.listen("luminaFormResetCallback", () => {
+      onFormReset();
+    });
+    component.listen("luminaFormAssociatedCallback", ({ detail: [form] }) => {
+      if (form) {
+        form.addEventListener("invalid", invalidFormHandler, { capture: true });
+      } else {
+        lastAssociatedForm?.removeEventListener("invalid", invalidFormHandler, { capture: true });
+      }
+      lastAssociatedForm = form;
+    });
+    function handleInvalidInput() {
+      const validationMsg = inputDelegate?.validationMessage || "";
+      component.el.dispatchEvent(
+        // allows users to set custom validation messages
+        new CustomEvent("calciteInvalid", { bubbles: true, composed: true })
+      );
+      displayValidationMessage(component, {
+        message: validationMsg,
+        icon: true,
+        status: "invalid"
+      });
+      const clearValidationEvent = getClearValidationEventName(component.el.tagName.toLowerCase());
+      component.listen(
+        clearValidationEvent,
+        () => {
+          if ("status" in component) {
+            component.status = "idle";
+          }
+          if ("validationIcon" in component && (!component.validationIcon || component.validationIcon === true)) {
+            component.validationIcon = false;
+          }
+          if ("validationMessage" in component && component.validationMessage === validationMsg) {
+            component.validationMessage = "";
+          }
+        },
+        { once: true }
+      );
+    }
+    controller.onConnected(() => {
+      component.el.addEventListener("invalid", handleInvalidInput);
+    });
+    controller.onDisconnected(() => {
+      component.el.removeEventListener("invalid", handleInvalidInput);
+    });
+    controller.onUpdate((changes) => {
+      if (changes.has("value") && !defaultValueDirty) {
+        defaultValueDirty = true;
+        component.defaultValue = component.value;
+      }
+      if (isCheckable(component) && changes.has("checked") && !defaultCheckedDirty) {
+        defaultCheckedDirty = true;
+        component.defaultChecked = component.checked;
+      }
+      if (changes.has("value") || isCheckable(component) && changes.has("checked")) {
+        component.elementInternals.setFormValue(getFormValue());
+      }
+      if (inputDelegate) {
+        inputDelegate.value = component.value;
+        syncInternalInput(component, inputDelegate);
+        inputDelegate.checkValidity();
+        component.elementInternals.setValidity(inputDelegate.validity, inputDelegate.validationMessage);
+        if ("validity" in component) {
+          component.validity = component.elementInternals.validity;
+        }
+      }
+    });
+    function getFormValue() {
+      if (Array.isArray(component.value)) {
+        const formData = new FormData();
+        component.value.forEach((value) => formData.append(component.name, value));
+        return formData;
+      }
+      if (isCheckable(component)) {
+        if (component.checked) {
+          return component.defaultValue === void 0 && !defaultValueDirty && component.value === void 0 ? "on" : component.value;
+        }
+        return null;
+      }
+      return component.value;
+    }
+    return {
+      get active() {
+        return !!component.elementInternals.form;
+      },
+      requestSubmit: () => {
+        component.elementInternals.form?.requestSubmit();
+      }
+    };
+  });
+};
+export {
+  useForm as u
+};

package/dist/chunks/useReferenceElement.js

@@ -0,0 +1,505 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { ref } from "lit/directives/ref.js";
+import { keyed } from "lit/directives/keyed.js";
+import { nothing, svg, html } from "lit";
+import { safeClassMap } from "@arcgis/lumina";
+import { x as getShadowRootNode, j as isPrimaryPointerButton, y as isKeyboardTriggeredClick, q as queryElementRoots } from "./dom.js";
+import { i as isActivationKey } from "./key.js";
+import { t as toAriaBoolean } from "./aria.js";
+import { makeGenericController } from "@arcgis/lumina/controllers";
+const CSS = {
+  arrow: "calcite-floating-ui-arrow",
+  arrowStroke: "calcite-floating-ui-arrow__stroke"
+};
+const DEFAULTS = {
+  width: 12,
+  height: 6,
+  strokeWidth: 1
+};
+const FloatingArrow = ({ floatingLayout, key, ref: ref$1 }) => {
+  const { width, height, strokeWidth } = DEFAULTS;
+  const svgX = width / 2;
+  const isVertical = floatingLayout === "vertical";
+  const dValue = `M0,0 H${width} L${width - svgX},${height} Q${svgX},${height} ${svgX},${height} Z`;
+  return keyed(key, html`<svg aria-hidden=true class=${safeClassMap(CSS.arrow)} height=${width} viewBox=${`0 0 ${width} ${width + (!isVertical ? strokeWidth : 0)}`} width=${width + (isVertical ? strokeWidth : 0)} ${ref(ref$1)}>${svg`${svg`<path class=${safeClassMap(CSS.arrowStroke)} d=${dValue ?? nothing} fill=none stroke-width=${strokeWidth + 1} />` || ""}<path d=${dValue ?? nothing} stroke=none />`}</svg>`);
+};
+function haveSameComponents(components, activeComponents) {
+  if (components === activeComponents) {
+    return true;
+  }
+  if (components.length !== activeComponents.length) {
+    return false;
+  }
+  const s1 = new Set(components);
+  const s2 = new Set(activeComponents);
+  if (s1.size !== s2.size) {
+    return false;
+  }
+  for (const item of s1) {
+    if (!s2.has(item)) {
+      return false;
+    }
+  }
+  return true;
+}
+const clickTolerance = 5;
+const HOVER_OPEN_DELAY_MS = 300;
+const HOVER_QUICK_OPEN_DELAY_MS = HOVER_OPEN_DELAY_MS / 3;
+const HOVER_CLOSE_DELAY_MS = HOVER_OPEN_DELAY_MS * 1.5;
+function isDrag({
+  startX,
+  startY,
+  endX,
+  endY
+}) {
+  const distance = Math.hypot(endX - startX, endY - startY);
+  return distance > clickTolerance;
+}
+const referenceElementManager = (options) => {
+  const registeredElements = /* @__PURE__ */ new Map();
+  const registeredShadowRootCounts = /* @__PURE__ */ new WeakMap();
+  let activeComponents = null;
+  let clickedComponents = null;
+  let hoverCloseTimeout = null;
+  let hoverOpenTimeout = null;
+  let hoveredComponents = null;
+  let pointerDownPosition = null;
+  let registeredComponentCount = 0;
+  const queryComponents = (composedPath, type) => {
+    const registeredElement = composedPath.find((pathEl) => registeredElements.has(pathEl));
+    if (!registeredElement) {
+      return void 0;
+    }
+    const components = registeredElements.get(registeredElement);
+    return components?.filter((component) => component.referenceElementType === type);
+  };
+  const toggleComponents = (event, type) => {
+    const composedPath = event.composedPath();
+    const components = queryComponents(composedPath, type);
+    components?.forEach((component) => {
+      if (component && !component.triggerDisabled) {
+        component.open = !component.open;
+      }
+    });
+    Array.from(registeredElements.values()).flat().filter(
+      (component) => !components?.includes(component) && component.autoClose && component.open && !composedPath.includes(component.el)
+    ).forEach((component) => component.open = false);
+  };
+  const clickHandler = (event) => {
+    if (isKeyboardTriggeredClick(event) || event.defaultPrevented || pointerDownPosition && isDrag({
+      endY: event.clientY,
+      endX: event.clientX,
+      startY: pointerDownPosition.y,
+      startX: pointerDownPosition.x
+    })) {
+      return;
+    }
+    pointerDownPosition = null;
+    toggleComponents(event, "click");
+  };
+  const clearHoverOpenTimeout = () => {
+    if (hoverOpenTimeout != null) {
+      window.clearTimeout(hoverOpenTimeout);
+    }
+    hoverOpenTimeout = null;
+  };
+  const clearHoverCloseTimeout = () => {
+    if (hoverCloseTimeout != null) {
+      window.clearTimeout(hoverCloseTimeout);
+    }
+    hoverCloseTimeout = null;
+  };
+  const clearHoverTimeout = () => {
+    clearHoverOpenTimeout();
+    clearHoverCloseTimeout();
+  };
+  const pathHasOpenHoverComponent = (components, composedPath) => {
+    return activeComponents?.some((component) => component?.open && composedPath.includes(component.el)) || components?.some((component) => component?.open && composedPath.includes(component.el));
+  };
+  const toggleHoverComponents = (components, open) => {
+    components?.forEach((component) => component.open = open);
+    activeComponents = open ? components : null;
+  };
+  const closeActiveHoverComponents = () => {
+    toggleHoverComponents(activeComponents, false);
+  };
+  const hoverKeyDownHandler = (event) => {
+    if (event.key === "Escape" && !event.defaultPrevented) {
+      const openActiveHoverComponents = activeComponents?.filter((component) => component?.open);
+      if (openActiveHoverComponents?.length) {
+        clearHoverTimeout();
+        closeActiveHoverComponents();
+        const composedPath = event.composedPath();
+        if (openActiveHoverComponents.some(
+          (component) => component.referenceEl instanceof Element && composedPath.includes(component.referenceEl) || composedPath.includes(component.el)
+        )) {
+          event.preventDefault();
+        }
+      }
+    }
+  };
+  const hoverClickHandler = (event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    clickedComponents = null;
+    const composedPath = event.composedPath();
+    const components = queryComponents(composedPath, "hover");
+    if (pathHasOpenHoverComponent(components, composedPath)) {
+      clearHoverTimeout();
+      return;
+    }
+    closeActiveHoverComponents();
+    if (!components?.length) {
+      return;
+    }
+    clearHoverTimeout();
+    const closeOnClickHoverComponents = components.filter((component) => component.closeOnClick);
+    const nonCloseOnClickHoverComponents = components.filter((component) => !component.closeOnClick);
+    if (closeOnClickHoverComponents?.length) {
+      clickedComponents = closeOnClickHoverComponents;
+      toggleHoverComponents(closeOnClickHoverComponents, false);
+    }
+    toggleHoverComponents(nonCloseOnClickHoverComponents, true);
+  };
+  const pointerDownHandler = (event) => {
+    if (event.defaultPrevented || !isPrimaryPointerButton(event)) {
+      return;
+    }
+    const { clientX, clientY } = event;
+    pointerDownPosition = { x: clientX, y: clientY };
+  };
+  const keyDownHandler = (event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    if (event.key === "Escape") {
+      closeAllComponents();
+    } else if (isActivationKey(event.key)) {
+      toggleComponents(event, "click");
+    }
+  };
+  const closeAllComponents = () => {
+    Array.from(registeredElements.values()).flat().forEach((component) => component.open = false);
+  };
+  const closeComponentsIfNotActive = (components) => {
+    if (!haveSameComponents(components ?? [], activeComponents ?? [])) {
+      closeActiveHoverComponents();
+    }
+  };
+  const openHoveredComponents = (components) => {
+    hoverOpenTimeout = window.setTimeout(
+      () => {
+        if (hoverOpenTimeout === null || !haveSameComponents(components ?? [], hoveredComponents ?? [])) {
+          return;
+        }
+        clearHoverCloseTimeout();
+        closeComponentsIfNotActive(components);
+        toggleHoverComponents(components, true);
+      },
+      activeComponents?.some((component) => component.open) ? HOVER_QUICK_OPEN_DELAY_MS : HOVER_OPEN_DELAY_MS
+    );
+  };
+  const closeHoveredComponents = () => {
+    hoverCloseTimeout = window.setTimeout(() => {
+      if (hoverCloseTimeout === null) {
+        return;
+      }
+      closeActiveHoverComponents();
+    }, HOVER_CLOSE_DELAY_MS);
+  };
+  const pointerMoveHandler = (event) => {
+    if (event.defaultPrevented) {
+      closeActiveHoverComponents();
+      return;
+    }
+    const composedPath = event.composedPath();
+    const components = queryComponents(composedPath, "hover");
+    if (pathHasOpenHoverComponent(components, composedPath)) {
+      clearHoverTimeout();
+      return;
+    }
+    if (components?.some((component) => clickedComponents?.includes(component))) {
+      return;
+    }
+    if (!components?.some((component) => hoveredComponents?.includes(component))) {
+      clearHoverOpenTimeout();
+    }
+    hoveredComponents = components;
+    if (components?.length) {
+      openHoveredComponents(components);
+    } else if (activeComponents?.some((component) => component?.open)) {
+      closeHoveredComponents();
+    }
+    clickedComponents = null;
+  };
+  const blurHandler = () => {
+    closeActiveHoverComponents();
+  };
+  const pointerLeaveHandler = (event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    clearHoverTimeout();
+    closeHoveredComponents();
+  };
+  const addListeners = () => {
+    if (options.click) {
+      window.addEventListener("click", clickHandler);
+      window.addEventListener("keydown", keyDownHandler);
+      window.addEventListener("pointerdown", pointerDownHandler);
+    }
+    if (options.hover) {
+      window.addEventListener("click", hoverClickHandler);
+      window.addEventListener("keydown", hoverKeyDownHandler);
+      window.addEventListener("pointermove", pointerMoveHandler);
+      window.addEventListener("focusin", focusInHandler);
+      window.addEventListener("blur", blurHandler);
+      document.addEventListener("pointerleave", pointerLeaveHandler);
+    }
+  };
+  const removeListeners = () => {
+    if (options.click) {
+      window.removeEventListener("pointerdown", pointerDownHandler);
+      window.removeEventListener("click", clickHandler);
+      window.removeEventListener("keydown", keyDownHandler);
+    }
+    if (options.hover) {
+      window.removeEventListener("click", hoverClickHandler);
+      window.removeEventListener("keydown", hoverKeyDownHandler);
+      window.removeEventListener("pointermove", pointerMoveHandler);
+      window.removeEventListener("focusin", focusInHandler);
+      window.removeEventListener("blur", blurHandler);
+      document.removeEventListener("pointerleave", pointerLeaveHandler);
+    }
+  };
+  const toggleFocusedComponents = (components, open) => {
+    {
+      clearHoverTimeout();
+    }
+    toggleHoverComponents(components, open);
+  };
+  const getReferenceElShadowRootNode = (referenceEl) => {
+    return referenceEl instanceof Element ? getShadowRootNode(referenceEl) : null;
+  };
+  const focusInHandler = (event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    const composedPath = event.composedPath();
+    const components = queryComponents(composedPath, "hover");
+    if (pathHasOpenHoverComponent(components, composedPath)) {
+      clearHoverTimeout();
+      return;
+    }
+    if (components?.some((component) => clickedComponents?.includes(component))) {
+      return;
+    }
+    clickedComponents = null;
+    closeComponentsIfNotActive(components);
+    if (!components?.length) {
+      return;
+    }
+    toggleFocusedComponents(components, true);
+  };
+  const updateElement = (component, referenceEl) => {
+    if (!referenceEl || !component.referenceElementType) {
+      return;
+    }
+    if (options.click && "ariaExpanded" in referenceEl) {
+      const existingComponents = registeredElements.get(referenceEl) ?? [];
+      const existingComponentOpen = existingComponents?.some((component2) => component2.open) ?? false;
+      referenceEl.ariaExpanded = toAriaBoolean(component.open || existingComponentOpen);
+    }
+  };
+  const addShadowListeners = (shadowRoot) => {
+    shadowRoot.addEventListener("focusin", focusInHandler);
+  };
+  const removeShadowListeners = (shadowRoot) => {
+    shadowRoot.removeEventListener("focusin", focusInHandler);
+  };
+  const registerShadowRoot = (shadowRoot) => {
+    const count = registeredShadowRootCounts.get(shadowRoot);
+    const newCount = (typeof count === "number" ? count : 0) + 1;
+    if (newCount === 1) {
+      addShadowListeners(shadowRoot);
+    }
+    registeredShadowRootCounts.set(shadowRoot, newCount);
+  };
+  const unregisterShadowRoot = (shadowRoot) => {
+    const count = registeredShadowRootCounts.get(shadowRoot);
+    const currentCount = typeof count === "number" ? count : 0;
+    const newCount = Math.max(0, currentCount - 1);
+    if (currentCount > 0 && newCount === 0) {
+      removeShadowListeners(shadowRoot);
+      registeredShadowRootCounts.delete(shadowRoot);
+      return;
+    }
+    if (newCount > 0) {
+      registeredShadowRootCounts.set(shadowRoot, newCount);
+    }
+  };
+  const registerElement = (component, referenceEl) => {
+    if (!referenceEl || !component.referenceElementType) {
+      return;
+    }
+    const existingComponents = registeredElements.get(referenceEl) ?? [];
+    if (existingComponents.includes(component)) {
+      return;
+    }
+    if (options.click && "ariaControlsElements" in referenceEl) {
+      const currentElements = referenceEl.ariaControlsElements ?? [];
+      if (!currentElements.includes(component)) {
+        const updatedElements = [...currentElements, component];
+        referenceEl.ariaControlsElements = updatedElements;
+      }
+    }
+    if (options.hover && "ariaDescribedByElements" in referenceEl) {
+      const currentElements = referenceEl.ariaDescribedByElements ?? [];
+      if (!currentElements.includes(component)) {
+        const updatedElements = [...currentElements, component];
+        referenceEl.ariaDescribedByElements = updatedElements;
+      }
+    }
+    registeredComponentCount++;
+    registeredElements.set(referenceEl, [...existingComponents, component]);
+    const shadowRoot = options.hover ? getReferenceElShadowRootNode(referenceEl) : null;
+    if (shadowRoot) {
+      registerShadowRoot(shadowRoot);
+    }
+    if (registeredComponentCount === 1) {
+      addListeners();
+    }
+    updateElement(component, referenceEl);
+  };
+  const decrementRegisteredElementCount = (shadowRoot) => {
+    registeredComponentCount--;
+    if (shadowRoot) {
+      unregisterShadowRoot(shadowRoot);
+    }
+  };
+  const unregisterElement = (component, referenceEl) => {
+    if (!referenceEl || !component.referenceElementType) {
+      return;
+    }
+    const shadowRoot = options.hover ? getReferenceElShadowRootNode(referenceEl) : null;
+    const existingComponents = registeredElements.get(referenceEl) ?? [];
+    const updatedComponents = existingComponents.filter((p) => p !== component);
+    if (updatedComponents.length > 0) {
+      registeredElements.set(referenceEl, updatedComponents);
+      if (updatedComponents.length !== existingComponents.length) {
+        decrementRegisteredElementCount(shadowRoot);
+      }
+    } else if (registeredElements.delete(referenceEl)) {
+      decrementRegisteredElementCount(shadowRoot);
+    }
+    if (registeredComponentCount === 0) {
+      removeListeners();
+      clearHoverTimeout();
+    }
+    if (options.click && "ariaControlsElements" in referenceEl) {
+      const newElements = referenceEl.ariaControlsElements?.filter((element) => element !== component);
+      referenceEl.ariaControlsElements = newElements?.length > 0 ? newElements : null;
+    }
+    if (options.click && "ariaExpanded" in referenceEl) {
+      const hasRegisteredComponents = (updatedComponents?.length ?? 0) > 0;
+      if (hasRegisteredComponents) {
+        const existingComponentOpen = updatedComponents?.some((component2) => component2.open) ?? false;
+        referenceEl.ariaExpanded = toAriaBoolean(existingComponentOpen);
+      } else {
+        referenceEl.ariaExpanded = null;
+      }
+    }
+    if (options.hover && "ariaDescribedByElements" in referenceEl) {
+      const newElements = referenceEl.ariaDescribedByElements?.filter((element) => element !== component);
+      referenceEl.ariaDescribedByElements = newElements?.length > 0 ? newElements : null;
+    }
+  };
+  return {
+    registerElement,
+    unregisterElement,
+    updateElement
+  };
+};
+const useReferenceElement = (options) => {
+  const { manager } = options;
+  return makeGenericController((component, controller) => {
+    let animationFrameId = null;
+    let lastRegisteredReferenceEl = null;
+    const canManageReferenceElement = (referenceEl) => {
+      return Boolean(referenceEl && component.referenceElementType);
+    };
+    const registerReferenceElement = (referenceEl) => {
+      if (!canManageReferenceElement(referenceEl)) {
+        return;
+      }
+      manager.registerElement(component, referenceEl);
+      lastRegisteredReferenceEl = referenceEl;
+    };
+    const unregisterReferenceElement = (referenceEl) => {
+      if (!canManageReferenceElement(referenceEl)) {
+        return;
+      }
+      manager.unregisterElement(component, referenceEl);
+      if (lastRegisteredReferenceEl === referenceEl) {
+        lastRegisteredReferenceEl = null;
+      }
+    };
+    const getReferenceElement = (component2) => {
+      const { referenceElement, el } = component2;
+      return (typeof referenceElement === "string" ? queryElementRoots(el, { id: referenceElement }) : referenceElement) || null;
+    };
+    const setUpReferenceElement = (warn = true) => {
+      if (!component.referenceElementType) {
+        return;
+      }
+      component.referenceEl = getReferenceElement(component);
+      const { el, referenceElement, referenceEl } = component;
+      if (warn && referenceElement && !referenceEl) {
+        console.warn(`${el.tagName}: reference-element id "${referenceElement}" was not found.`, {
+          el
+        });
+      }
+    };
+    controller.onConnected(() => {
+      animationFrameId = requestAnimationFrame(() => {
+        if (!component.el.isConnected) {
+          return;
+        }
+        setUpReferenceElement(component.manager.loadedCalled);
+        registerReferenceElement(component.referenceEl);
+      });
+    });
+    controller.onLoaded(() => {
+      if (component.referenceElement && !component.referenceEl) {
+        setUpReferenceElement();
+      }
+    });
+    controller.onUpdate((changes) => {
+      if (!component.hasUpdated) {
+        return;
+      }
+      if (changes.has("referenceElement")) {
+        setUpReferenceElement();
+      }
+      if (changes.has("referenceEl")) {
+        unregisterReferenceElement(changes.get("referenceEl"));
+        registerReferenceElement(component.referenceEl);
+      } else if (changes.has("open")) {
+        manager.updateElement(component, component.referenceEl);
+      }
+    });
+    controller.onDisconnected(() => {
+      if (animationFrameId != null) {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = null;
+      }
+      unregisterReferenceElement(lastRegisteredReferenceEl);
+    });
+  });
+};
+export {
+  FloatingArrow as F,
+  referenceElementManager as r,
+  useReferenceElement as u
+};