@icen.ai/ui 0.8.0 → 0.9.0

package/dist/behaviors/date-picker.mjs

@@ -1,3 +1,126 @@
+// src/behaviors/popover.ts
+var PANEL_SIZING_ATTRS = {
+  width: "data-panel-width",
+  minWidth: "data-panel-min",
+  maxWidth: "data-panel-max",
+  minHeight: "data-panel-min-height",
+  maxHeight: "data-panel-max-height"
+};
+function readPanelSizing(el) {
+  const out = {};
+  if (!el) return out;
+  for (const key of Object.keys(PANEL_SIZING_ATTRS)) {
+    const raw = el.getAttribute(PANEL_SIZING_ATTRS[key]);
+    if (raw == null) continue;
+    const n = Number(raw);
+    if (Number.isFinite(n) && n > 0) out[key] = n;
+  }
+  return out;
+}
+function applyPanelSizing(panel, sizing) {
+  if (sizing == null) {
+    panel.style.width = "";
+    panel.style.minWidth = "";
+    panel.style.maxWidth = "";
+    panel.style.minHeight = "";
+    panel.style.maxHeight = "";
+    return;
+  }
+  const vw = typeof document === "undefined" ? Number.POSITIVE_INFINITY : document.documentElement.clientWidth;
+  const fitW = (n) => Math.min(n, Math.max(80, vw - 24));
+  if (sizing.width != null) {
+    const w = fitW(sizing.width);
+    panel.style.width = `${w}px`;
+    panel.style.maxWidth = `${w}px`;
+  }
+  if (sizing.minWidth != null) panel.style.minWidth = `${fitW(sizing.minWidth)}px`;
+  if (sizing.maxWidth != null && sizing.width == null) panel.style.maxWidth = `${fitW(sizing.maxWidth)}px`;
+  if (sizing.minHeight != null) panel.style.minHeight = `${sizing.minHeight}px`;
+  if (sizing.maxHeight != null) panel.style.maxHeight = `${sizing.maxHeight}px`;
+}
+var DEFAULT_MIN_WIDTH = 220;
+var DEFAULT_MAX_WIDTH = 420;
+var DEFAULT_MIN_HEIGHT = 120;
+var DEFAULT_MAX_HEIGHT = 420;
+function clamp(value, min, max) {
+  if (max < min) return min;
+  return Math.min(max, Math.max(min, value));
+}
+function chooseSide(preferredSide, availableTop, availableBottom, desiredHeight) {
+  const preferredSpace = preferredSide === "top" ? availableTop : availableBottom;
+  const oppositeSpace = preferredSide === "top" ? availableBottom : availableTop;
+  if (preferredSpace >= desiredHeight) return preferredSide;
+  if (oppositeSpace >= desiredHeight) return preferredSide === "top" ? "bottom" : "top";
+  if (preferredSpace >= oppositeSpace) return preferredSide;
+  return preferredSide === "top" ? "bottom" : "top";
+}
+function horizontalAnchor(anchor, width, align) {
+  if (align === "center") return anchor.left + anchor.width / 2 - width / 2;
+  if (align === "end") return anchor.right - width;
+  return anchor.left;
+}
+function computePopoverLayout(anchor, viewport, opts = {}) {
+  const margin = opts.margin ?? 12;
+  const offset = opts.offset ?? 8;
+  const preferredSide = opts.side ?? "top";
+  const align = opts.align ?? "start";
+  if (preferredSide === "left" || preferredSide === "right") {
+    const availableLeft = Math.max(0, anchor.left - margin - offset);
+    const availableRight = Math.max(0, viewport.width - anchor.right - margin - offset);
+    const side2 = (preferredSide === "left" ? availableLeft : availableRight) >= DEFAULT_MIN_WIDTH ? preferredSide : preferredSide === "left" ? "right" : "left";
+    const minWidth2 = Math.max(1, opts.minWidth ?? DEFAULT_MIN_WIDTH);
+    const maxWidth2 = Math.min(
+      Math.max(opts.maxWidth ?? DEFAULT_MAX_WIDTH, minWidth2),
+      side2 === "left" ? availableLeft : availableRight
+    );
+    const width2 = minWidth2;
+    const left2 = clamp(
+      side2 === "left" ? anchor.left - offset - width2 : anchor.right + offset,
+      margin,
+      viewport.width - margin - width2
+    );
+    const availableHeight2 = Math.max(80, viewport.height - margin * 2);
+    const maxHeight2 = Math.min(opts.maxHeight ?? DEFAULT_MAX_HEIGHT, availableHeight2);
+    const desired = clamp(opts.contentHeightHint ?? Math.min(anchor.height, maxHeight2), 40, maxHeight2);
+    const anchorTop = align === "center" ? anchor.top + anchor.height / 2 - desired / 2 : align === "end" ? anchor.bottom - desired : anchor.top;
+    const top2 = clamp(anchorTop, margin, viewport.height - margin - desired);
+    return { side: side2, left: left2, top: top2, width: width2, maxHeight: maxHeight2 };
+  }
+  const availableWidth = Math.max(80, viewport.width - margin * 2);
+  const requestedMinWidth = Math.max(1, opts.minWidth ?? DEFAULT_MIN_WIDTH);
+  const requestedMaxWidth = Math.max(requestedMinWidth, opts.maxWidth ?? DEFAULT_MAX_WIDTH);
+  const maxWidth = Math.min(requestedMaxWidth, availableWidth);
+  const minWidth = Math.min(requestedMinWidth, maxWidth);
+  const availableTop = Math.max(0, anchor.top - margin - offset);
+  const availableBottom = Math.max(0, viewport.height - anchor.bottom - margin - offset);
+  const availableHeight = Math.max(80, viewport.height - margin * 2);
+  const minHeight = Math.min(Math.max(80, opts.minHeight ?? DEFAULT_MIN_HEIGHT), availableHeight);
+  const requestedMaxHeight = Math.max(minHeight, opts.maxHeight ?? DEFAULT_MAX_HEIGHT);
+  const fallbackHeight = Math.min(260, requestedMaxHeight);
+  const contentHeight = Math.max(opts.contentHeightHint ?? 0, fallbackHeight);
+  const desiredHeight = clamp(contentHeight, minHeight, Math.min(requestedMaxHeight, availableHeight));
+  const side = chooseSide(preferredSide, availableTop, availableBottom, desiredHeight);
+  const sideSpace = side === "top" ? availableTop : availableBottom;
+  const maxHeight = Math.min(
+    requestedMaxHeight,
+    Math.max(80, sideSpace || Math.max(availableTop, availableBottom)),
+    availableHeight
+  );
+  const positionedHeight = clamp(desiredHeight, 40, maxHeight);
+  const width = align === "stretch" ? clamp(anchor.width, minWidth, maxWidth) : maxWidth;
+  const left = clamp(horizontalAnchor(anchor, width, align), margin, viewport.width - margin - width);
+  const desiredTop = side === "top" ? anchor.top - offset - positionedHeight : anchor.bottom + offset;
+  const top = clamp(desiredTop, margin, viewport.height - margin - positionedHeight);
+  return { side, left, top, width, maxHeight };
+}
+
+// src/behaviors/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
 // src/behaviors/date-picker.ts
 var openPicker = null;
 var panelEl = null;
@@ -33,16 +156,21 @@ function ensurePanel() {
 }
 function positionPanel(panel, trigger) {
   const r = trigger.getBoundingClientRect();
-  const pw = 280;
-  const ph = panel.offsetHeight || 320;
-  let left = r.left;
-  let top = r.bottom + 4;
-  if (left + pw > window.innerWidth - 12) left = window.innerWidth - pw - 12;
-  if (left < 12) left = 12;
-  if (top + ph > window.innerHeight - 12) top = r.top - ph - 4;
-  if (top < 12) top = 12;
-  panel.style.left = left + "px";
-  panel.style.top = top + "px";
+  const sizing = readPanelSizing(trigger.closest("[data-date-picker]"));
+  applyPanelSizing(panel, null);
+  if (sizing.width != null || sizing.minWidth != null) {
+    applyPanelSizing(panel, { width: sizing.width ?? sizing.minWidth, maxWidth: sizing.maxWidth, maxHeight: sizing.maxHeight });
+  } else {
+    applyPanelSizing(panel, sizing);
+  }
+  const pw = sizing.width ?? sizing.minWidth ?? 280;
+  const layout = computePopoverLayout(
+    r,
+    { width: window.innerWidth, height: window.innerHeight },
+    { side: "bottom", offset: 4, margin: 12, minWidth: pw, maxWidth: pw, maxHeight: sizing.maxHeight }
+  );
+  panel.style.left = `${layout.left}px`;
+  panel.style.top = `${layout.top}px`;
 }
 var SVG_NS = "http://www.w3.org/2000/svg";
 function buildCalIcon() {
@@ -150,12 +278,10 @@ function renderCalendar(panel, ctx) {
   foot.append(todayBtn, clearBtn);
   panel.append(head, weekdays, grid, foot);
   prevBtn.addEventListener("click", () => {
-    ctx.view = new Date(year, month - 1, 15);
-    renderCalendar(panel, { ...ctx, view: ctx.view });
+    renderCalendar(panel, { ...ctx, view: new Date(year, month - 1, 15) });
   });
   nextBtn.addEventListener("click", () => {
-    ctx.view = new Date(year, month + 1, 15);
-    renderCalendar(panel, { ...ctx, view: ctx.view });
+    renderCalendar(panel, { ...ctx, view: new Date(year, month + 1, 15) });
   });
   todayBtn.addEventListener("click", () => {
     onPick(new Date(today.getFullYear(), today.getMonth(), today.getDate()));
@@ -183,10 +309,20 @@ function closePanel() {
     repositionHandler = null;
   }
 }
+var pickersInit = /* @__PURE__ */ new WeakSet();
 function setupPicker(container) {
+  if (pickersInit.has(container)) return () => {
+  };
+  pickersInit.add(container);
   const el = container;
-  if (el.__icenDatePickerInit) return;
-  el.__icenDatePickerInit = true;
+  const ac = new AbortController();
+  const disposers = [
+    () => {
+      if (openPicker === el) closePanel();
+      ac.abort();
+      pickersInit.delete(container);
+    }
+  ];
   const fmt = el.dataset.datePickerFormat ?? "yyyy-mm-dd";
   const minStr = el.dataset.datePickerMin;
   const maxStr = el.dataset.datePickerMax;
@@ -224,8 +360,9 @@ function setupPicker(container) {
   if (hidden) {
     const obs = new MutationObserver(() => paint());
     obs.observe(hidden, { attributes: true, attributeFilter: ["value"] });
+    disposers.push(() => obs.disconnect());
   }
-  trigger.addEventListener("click", () => {
+  const onTriggerClick = () => {
     if (openPicker === el) {
       closePanel();
       return;
@@ -246,17 +383,9 @@ function setupPicker(container) {
       max,
       weekStart,
       onPick: (d) => {
-        if (d === null) {
-          if (hidden) {
-            hidden.value = "";
-            hidden.dispatchEvent(new Event("change", { bubbles: true }));
-          }
-        } else {
-          if (hidden) {
-            hidden.value = toDateStr(d);
-            hidden.dispatchEvent(new Event("change", { bubbles: true }));
-          }
-        }
+        if (hidden) hidden.value = d ? toDateStr(d) : "";
+        emitIcen(el, "icen:date-change", { value: d ? toDateStr(d) : "", date: d });
+        if (hidden) hidden.dispatchEvent(new Event("change", { bubbles: true }));
         paint();
         closePanel();
       }
@@ -280,16 +409,26 @@ function setupPicker(container) {
     };
     window.addEventListener("scroll", repositionHandler, { passive: true });
     window.addEventListener("resize", repositionHandler, { passive: true });
-  });
+  };
+  trigger.addEventListener("click", onTriggerClick, { signal: ac.signal });
+  return () => {
+    for (const d of disposers) d();
+  };
 }
 function initDatePicker(root) {
-  if (typeof document === "undefined") return;
-  if (typeof window === "undefined") return;
+  if (typeof document === "undefined") return () => {
+  };
+  if (typeof window === "undefined") return () => {
+  };
   const scope = root ?? document;
   const pickers = [];
   if (scope instanceof Element && scope.matches(".date-picker[data-date-picker]")) pickers.push(scope);
   pickers.push(...Array.from(scope.querySelectorAll(".date-picker[data-date-picker]")));
-  for (const p of pickers) setupPicker(p);
+  const disposers = [];
+  for (const p of pickers) disposers.push(setupPicker(p));
+  return () => {
+    for (const d of disposers) d();
+  };
 }
 export {
   initDatePicker

package/dist/behaviors/dropdown.d.mts

@@ -1,4 +1,8 @@
-/** 绑定全部 [data-dropdown-trigger]（document 级委托，重复调用安全）。 */
-declare function initDropdown(root?: ParentNode): void;
+/**
+ * 绑定全部 [data-dropdown-trigger]（document 级委托，重复调用安全）。
+ * 返回销毁函数：摘除 document 委托并复位幂等标记（销毁后可重新 init）；
+ * 销毁时若有面板开着会顺带收起。SSR 下返回 no-op。
+ */
+declare function initDropdown(root?: ParentNode): () => void;
 
 export { initDropdown };

package/dist/behaviors/dropdown.mjs

@@ -1,12 +1,142 @@
+// src/behaviors/popover.ts
+var PANEL_SIZING_ATTRS = {
+  width: "data-panel-width",
+  minWidth: "data-panel-min",
+  maxWidth: "data-panel-max",
+  minHeight: "data-panel-min-height",
+  maxHeight: "data-panel-max-height"
+};
+function readPanelSizing(el) {
+  const out = {};
+  if (!el) return out;
+  for (const key of Object.keys(PANEL_SIZING_ATTRS)) {
+    const raw = el.getAttribute(PANEL_SIZING_ATTRS[key]);
+    if (raw == null) continue;
+    const n = Number(raw);
+    if (Number.isFinite(n) && n > 0) out[key] = n;
+  }
+  return out;
+}
+function applyPanelSizing(panel, sizing) {
+  if (sizing == null) {
+    panel.style.width = "";
+    panel.style.minWidth = "";
+    panel.style.maxWidth = "";
+    panel.style.minHeight = "";
+    panel.style.maxHeight = "";
+    return;
+  }
+  const vw = typeof document === "undefined" ? Number.POSITIVE_INFINITY : document.documentElement.clientWidth;
+  const fitW = (n) => Math.min(n, Math.max(80, vw - 24));
+  if (sizing.width != null) {
+    const w = fitW(sizing.width);
+    panel.style.width = `${w}px`;
+    panel.style.maxWidth = `${w}px`;
+  }
+  if (sizing.minWidth != null) panel.style.minWidth = `${fitW(sizing.minWidth)}px`;
+  if (sizing.maxWidth != null && sizing.width == null) panel.style.maxWidth = `${fitW(sizing.maxWidth)}px`;
+  if (sizing.minHeight != null) panel.style.minHeight = `${sizing.minHeight}px`;
+  if (sizing.maxHeight != null) panel.style.maxHeight = `${sizing.maxHeight}px`;
+}
+var DEFAULT_MIN_WIDTH = 220;
+var DEFAULT_MAX_WIDTH = 420;
+var DEFAULT_MIN_HEIGHT = 120;
+var DEFAULT_MAX_HEIGHT = 420;
+function clamp(value, min, max) {
+  if (max < min) return min;
+  return Math.min(max, Math.max(min, value));
+}
+function chooseSide(preferredSide, availableTop, availableBottom, desiredHeight) {
+  const preferredSpace = preferredSide === "top" ? availableTop : availableBottom;
+  const oppositeSpace = preferredSide === "top" ? availableBottom : availableTop;
+  if (preferredSpace >= desiredHeight) return preferredSide;
+  if (oppositeSpace >= desiredHeight) return preferredSide === "top" ? "bottom" : "top";
+  if (preferredSpace >= oppositeSpace) return preferredSide;
+  return preferredSide === "top" ? "bottom" : "top";
+}
+function horizontalAnchor(anchor, width, align) {
+  if (align === "center") return anchor.left + anchor.width / 2 - width / 2;
+  if (align === "end") return anchor.right - width;
+  return anchor.left;
+}
+function computePopoverLayout(anchor, viewport, opts = {}) {
+  const margin = opts.margin ?? 12;
+  const offset = opts.offset ?? 8;
+  const preferredSide = opts.side ?? "top";
+  const align = opts.align ?? "start";
+  if (preferredSide === "left" || preferredSide === "right") {
+    const availableLeft = Math.max(0, anchor.left - margin - offset);
+    const availableRight = Math.max(0, viewport.width - anchor.right - margin - offset);
+    const side2 = (preferredSide === "left" ? availableLeft : availableRight) >= DEFAULT_MIN_WIDTH ? preferredSide : preferredSide === "left" ? "right" : "left";
+    const minWidth2 = Math.max(1, opts.minWidth ?? DEFAULT_MIN_WIDTH);
+    const maxWidth2 = Math.min(
+      Math.max(opts.maxWidth ?? DEFAULT_MAX_WIDTH, minWidth2),
+      side2 === "left" ? availableLeft : availableRight
+    );
+    const width2 = minWidth2;
+    const left2 = clamp(
+      side2 === "left" ? anchor.left - offset - width2 : anchor.right + offset,
+      margin,
+      viewport.width - margin - width2
+    );
+    const availableHeight2 = Math.max(80, viewport.height - margin * 2);
+    const maxHeight2 = Math.min(opts.maxHeight ?? DEFAULT_MAX_HEIGHT, availableHeight2);
+    const desired = clamp(opts.contentHeightHint ?? Math.min(anchor.height, maxHeight2), 40, maxHeight2);
+    const anchorTop = align === "center" ? anchor.top + anchor.height / 2 - desired / 2 : align === "end" ? anchor.bottom - desired : anchor.top;
+    const top2 = clamp(anchorTop, margin, viewport.height - margin - desired);
+    return { side: side2, left: left2, top: top2, width: width2, maxHeight: maxHeight2 };
+  }
+  const availableWidth = Math.max(80, viewport.width - margin * 2);
+  const requestedMinWidth = Math.max(1, opts.minWidth ?? DEFAULT_MIN_WIDTH);
+  const requestedMaxWidth = Math.max(requestedMinWidth, opts.maxWidth ?? DEFAULT_MAX_WIDTH);
+  const maxWidth = Math.min(requestedMaxWidth, availableWidth);
+  const minWidth = Math.min(requestedMinWidth, maxWidth);
+  const availableTop = Math.max(0, anchor.top - margin - offset);
+  const availableBottom = Math.max(0, viewport.height - anchor.bottom - margin - offset);
+  const availableHeight = Math.max(80, viewport.height - margin * 2);
+  const minHeight = Math.min(Math.max(80, opts.minHeight ?? DEFAULT_MIN_HEIGHT), availableHeight);
+  const requestedMaxHeight = Math.max(minHeight, opts.maxHeight ?? DEFAULT_MAX_HEIGHT);
+  const fallbackHeight = Math.min(260, requestedMaxHeight);
+  const contentHeight = Math.max(opts.contentHeightHint ?? 0, fallbackHeight);
+  const desiredHeight = clamp(contentHeight, minHeight, Math.min(requestedMaxHeight, availableHeight));
+  const side = chooseSide(preferredSide, availableTop, availableBottom, desiredHeight);
+  const sideSpace = side === "top" ? availableTop : availableBottom;
+  const maxHeight = Math.min(
+    requestedMaxHeight,
+    Math.max(80, sideSpace || Math.max(availableTop, availableBottom)),
+    availableHeight
+  );
+  const positionedHeight = clamp(desiredHeight, 40, maxHeight);
+  const width = align === "stretch" ? clamp(anchor.width, minWidth, maxWidth) : maxWidth;
+  const left = clamp(horizontalAnchor(anchor, width, align), margin, viewport.width - margin - width);
+  const desiredTop = side === "top" ? anchor.top - offset - positionedHeight : anchor.bottom + offset;
+  const top = clamp(desiredTop, margin, viewport.height - margin - positionedHeight);
+  return { side, left, top, width, maxHeight };
+}
+
+// src/behaviors/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
+// src/behaviors/context-menu.ts
+function emitMenuSelect(source, item) {
+  emitIcen(item, "icen:menu-select", {
+    source,
+    item,
+    value: item.dataset.value ?? "",
+    /* 优先专用 label 子元素（避开快捷键/图标文本混入），无则退整项文本 */
+    label: (item.querySelector(".menu-item-label, .command-item-label")?.textContent ?? item.textContent ?? "").trim().slice(0, 80)
+  });
+}
+
 // src/behaviors/dropdown.ts
 var VIEWPORT_MARGIN = 12;
 var SIDE_OFFSET = 4;
 var active = null;
 var initialized = false;
-function clamp(value, min, max) {
-  if (max < min) return min;
-  return Math.min(max, Math.max(min, value));
-}
 function menuItems(panel) {
   return Array.from(panel.querySelectorAll(".menu-item:not(.is-disabled):not(:disabled)"));
 }
@@ -19,21 +149,14 @@ function place() {
   if (!active) return;
   const { trigger, panel } = active;
   const rect = trigger.getBoundingClientRect();
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-  const pw = panel.offsetWidth;
-  const ph = panel.offsetHeight;
-  const left = clamp(rect.left, VIEWPORT_MARGIN, vw - VIEWPORT_MARGIN - pw);
-  let top = rect.bottom + SIDE_OFFSET;
-  let side = "bottom";
-  if (top + ph > vh - VIEWPORT_MARGIN && rect.top - SIDE_OFFSET - ph >= VIEWPORT_MARGIN) {
-    top = rect.top - SIDE_OFFSET - ph;
-    side = "top";
-  }
-  top = clamp(top, VIEWPORT_MARGIN, vh - VIEWPORT_MARGIN - ph);
-  panel.style.left = `${left}px`;
-  panel.style.top = `${top}px`;
-  panel.dataset.side = side;
+  const layout = computePopoverLayout(
+    rect,
+    { width: window.innerWidth, height: window.innerHeight },
+    { side: "bottom", offset: SIDE_OFFSET, margin: VIEWPORT_MARGIN }
+  );
+  panel.style.left = `${layout.left}px`;
+  panel.style.top = `${layout.top}px`;
+  panel.dataset.side = layout.side;
 }
 function openDropdown(trigger, highlightFirst = false) {
   closeDropdown();
@@ -44,6 +167,7 @@ function openDropdown(trigger, highlightFirst = false) {
   panel.className = "menu";
   panel.setAttribute("role", "menu");
   panel.style.visibility = "hidden";
+  applyPanelSizing(panel, readPanelSizing(root));
   while (template.firstChild) panel.appendChild(template.firstChild);
   panel.querySelectorAll(".menu-item").forEach((el) => el.setAttribute("role", "menuitem"));
   document.body.appendChild(panel);
@@ -100,22 +224,28 @@ function onKeyDown(e) {
   if (e.key === "Enter" && active.highlight >= 0) {
     e.preventDefault();
     const item = items[active.highlight];
+    emitMenuSelect(active.panel, item);
     closeDropdown(true);
     item.click();
   }
 }
 function initDropdown(root) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined") return () => {
+  };
   const scope = root ?? document;
   scope.querySelectorAll("[data-dropdown-trigger]").forEach((el) => el.setAttribute("aria-expanded", "false"));
-  if (initialized) return;
+  if (initialized) return () => {
+  };
   initialized = true;
-  document.addEventListener("click", (e) => {
+  const onClick = (e) => {
     const target = e.target instanceof Element ? e.target : null;
     if (!target) return;
     if (active && target.closest(".menu-item") && active.panel.contains(target)) {
       const item = target.closest(".menu-item");
       if (item) {
+        if (!item.matches(".is-disabled") && !item.matches(":disabled")) {
+          emitMenuSelect(active.panel, item);
+        }
         closeDropdown();
         return;
       }
@@ -124,8 +254,9 @@ function initDropdown(root) {
     if (!trigger) return;
     if (active && active.trigger === trigger) closeDropdown();
     else openDropdown(trigger);
-  });
-  document.addEventListener("keydown", (e) => {
+  };
+  document.addEventListener("click", onClick);
+  const onKeyDown2 = (e) => {
     if (e.key !== "ArrowDown") return;
     if (active) return;
     const target = e.target instanceof Element ? e.target : null;
@@ -133,7 +264,15 @@ function initDropdown(root) {
     if (!trigger) return;
     e.preventDefault();
     openDropdown(trigger, true);
-  });
+  };
+  document.addEventListener("keydown", onKeyDown2);
+  const destroy = () => {
+    document.removeEventListener("click", onClick);
+    document.removeEventListener("keydown", onKeyDown2);
+    closeDropdown();
+    initialized = false;
+  };
+  return destroy;
 }
 export {
   initDropdown