tosijs-ui 1.6.11 → 1.6.12

package/CHANGELOG.md

@@ -0,0 +1,37 @@
+# Changelog
+
+## 1.6.12
+
+Packaging improvements for independent, tree-shakeable consumption. All changes
+are **additive — no breaking changes**; one minor behavioral edge case is noted
+below.
+
+### Added
+
+- **Subpath exports**, so an app can import only what it needs without the barrel
+  dragging in dev tools:
+  - curated: `tosijs-ui/icons`, `tosijs-ui/code-editor`, `tosijs-ui/live-example`,
+    `tosijs-ui/doc-browser`, `tosijs-ui/diff`, `tosijs-ui/theme`
+  - per-component wildcard: `import { tosiRating } from 'tosijs-ui/rating'`
+    (resolves `dist/rating.js`, registering just that element)
+
+  The full barrel `import 'tosijs-ui'` is unchanged and still registers every
+  `<tosi-*>` element.
+
+### Changed
+
+- **`menu`, `tooltip`, and `float` now inject their stylesheet and register their
+  global listeners on first use, not at import.** Importing these modules (or the
+  barrel) no longer has import-time side effects. This also fixes a latent bug
+  where the menu `keydown` handler attached to `document.body` at import time,
+  which may not exist yet.
+
+### Possible edge case
+
+If you imported `menu` / `tooltip` / `float` **purely for the side effect** — i.e.
+you hand-author markup with the internal classes (`.tosi-menu`, `.tosi-tooltip`,
+…) and relied on a bare `import` injecting the stylesheet, **without** ever
+calling the API (`popMenu`, `popDropMenu`, `initTooltips`, `showTooltip`) or using
+the `<tosi-*>` element — those styles now apply only once the API/element is first
+used. Normal usage (the element creators, the `<tosi-*>` elements, and the
+`popMenu`/`initTooltips` entry points) is unaffected.

package/dist/float.js

@@ -131,6 +131,7 @@ export class TosiFloat extends WebComponent {
     };
     connectedCallback() {
         super.connectedCallback();
+        ensureFloatListeners();
         TosiFloat.floats.add(this);
         const PASSIVE = { passive: true };
         this.addEventListener('touchstart', this.reposition, PASSIVE);
@@ -147,27 +148,37 @@ export const XinFloat = TosiFloat;
 export const tosiFloat = TosiFloat.elementCreator();
 /** @deprecated Use tosiFloat instead */
 export const xinFloat = tosiFloat;
-window.addEventListener('resize', () => {
-    Array.from(TosiFloat.floats).forEach((float) => {
-        if (float.remainOnResize === 'hide') {
-            float.hidden = true;
-        }
-        else if (float.remainOnResize === 'remove') {
-            float.remove();
-        }
-    });
-}, { passive: true });
-document.addEventListener('scroll', (event) => {
-    if (event.target instanceof HTMLElement &&
-        event.target.closest(TosiFloat.tagName)) {
+// Register the global reposition/dismiss handlers on first float connecting,
+// not at import (keeps the module side-effect-free for tree-shaking). They
+// iterate TosiFloat.floats, so they're no-ops until a float exists — registered
+// once, no teardown needed.
+let floatListenersRegistered = false;
+function ensureFloatListeners() {
+    if (floatListenersRegistered)
         return;
-    }
-    Array.from(TosiFloat.floats).forEach((float) => {
-        if (float.remainOnScroll === 'hide') {
-            float.hidden = true;
-        }
-        else if (float.remainOnScroll === 'remove') {
-            float.remove();
+    floatListenersRegistered = true;
+    window.addEventListener('resize', () => {
+        Array.from(TosiFloat.floats).forEach((float) => {
+            if (float.remainOnResize === 'hide') {
+                float.hidden = true;
+            }
+            else if (float.remainOnResize === 'remove') {
+                float.remove();
+            }
+        });
+    }, { passive: true });
+    document.addEventListener('scroll', (event) => {
+        if (event.target instanceof HTMLElement &&
+            event.target.closest(TosiFloat.tagName)) {
+            return;
         }
-    });
-}, { passive: true, capture: true });
+        Array.from(TosiFloat.floats).forEach((float) => {
+            if (float.remainOnScroll === 'hide') {
+                float.hidden = true;
+            }
+            else if (float.remainOnScroll === 'remove') {
+                float.remove();
+            }
+        });
+    }, { passive: true, capture: true });
+}