@operato/utils 10.0.0 → 10.11.0

package/dist/src/reactive-controllers/tooltip-reactive-controller.js

@@ -2,55 +2,96 @@ import { hasOverflow } from '../has-overflow.js';
 export class TooltipReactiveController {
     constructor(host, options) {
         this.handleMouseOver = (e) => {
-            var _a;
-            const element = e.target;
-            if (element.hasAttribute(this.attributeName) && hasOverflow(element)) {
-                const tooltipContent = typeof this.content === 'function'
-                    ? this.content.call(this, element)
-                    : this.content || ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
-                const rect = element.getBoundingClientRect();
-                // Calculate the fixed position
-                const fixedTop = rect.top + rect.height;
-                const fixedLeft = rect.left;
-                // Set tooltip container position and content
-                TooltipReactiveController.tooltipContainer.style.top = `${fixedTop}px`;
-                TooltipReactiveController.tooltipContainer.style.left = `${fixedLeft}px`;
-                TooltipReactiveController.tooltipContainer.style.display = 'block';
-                TooltipReactiveController.tooltipContainer.textContent = tooltipContent;
+            var _a, _b;
+            /*
+             * 표식이 달린 **조상**을 찾는다 — 포인터가 닿는 것은 대개 그 안의 조각이다.
+             *
+             * `e.target` 만 보고 있었다. 그런데 툴팁을 붙이고 싶은 줄은 거의 언제나 안에 조각을 가진다 —
+             * 공장 달력의 한 줄은 [표시 6px][줄머리][제목] 셋이고, data-grist 의 머리말도 안에 아이콘이
+             * 들어간다. 포인터가 그 조각 위에 있으면 `e.target` 이 조각이라 표식이 없고, 그대로 돌아갔다.
+             *
+             *   [확인함] 2026-09-11  공장 달력 한 줄 114px 중 제목 조각이 104px.
+             *                        줄에 직접 쏘면 뜨고, 제목 조각에 쏘면 안 뜬다.
+             *                        **91% 의 자리에서 안 뜬다** — 사실상 안 뜨는 것이다.
+             *
+             * `closest` 는 자기 자신부터 본다. 표식이 잎에 달린 경우는 전과 똑같이 동작한다.
+             */
+            const element = (_b = (_a = e.target).closest) === null || _b === void 0 ? void 0 : _b.call(_a, `[${this.attributeName}]`);
+            if (!element || !hasOverflow(element)) {
+                return;
             }
+            TooltipReactiveController.cancelPending();
+            /* 이미 떠 있으면 기다리지 않는다(위 머리말). */
+            if (TooltipReactiveController.shown || this.enterDelay <= 0) {
+                this.show(element);
+                return;
+            }
+            TooltipReactiveController.pending = setTimeout(() => {
+                TooltipReactiveController.pending = null;
+                this.show(element);
+            }, this.enterDelay);
         };
         this.handleMouseOut = (e) => {
+            /* 기다리던 것도 취소한다 — 안 그러면 떠난 뒤에 뜬다. */
+            TooltipReactiveController.cancelPending();
             if (TooltipReactiveController.tooltipContainer) {
                 TooltipReactiveController.tooltipContainer.style.display = 'none';
             }
+            TooltipReactiveController.shown = false;
         };
-        const { attributeName, content } = options || {};
+        const { attributeName, content, enterDelay } = options || {};
         this.host = host;
         this.attributeName = attributeName || 'data-reactive-tooltip';
         this.content = content;
+        this.enterDelay = enterDelay !== null && enterDelay !== void 0 ? enterDelay : TooltipReactiveController.DEFAULT_ENTER_DELAY;
         host.addController(this);
-        // Create a tooltip container element if it doesn't exist
-        if (!TooltipReactiveController.tooltipContainer) {
-            TooltipReactiveController.tooltipContainer = document.createElement('div');
-            TooltipReactiveController.tooltipContainer.className = 'ox-tooltip-container';
-            TooltipReactiveController.tooltipContainer.style.position = 'fixed';
-            TooltipReactiveController.tooltipContainer.style.pointerEvents = 'none';
-            TooltipReactiveController.tooltipContainer.style.zIndex = '1000';
-            // Set default styles using CSS variables
-            TooltipReactiveController.tooltipContainer.style.fontSize = 'var(--tooltip-font-size, 1.0em)';
-            TooltipReactiveController.tooltipContainer.style.color = 'var(--tooltip-color, #fff)';
-            TooltipReactiveController.tooltipContainer.style.backgroundColor =
-                'var(--tooltip-background-color, rgba(0, 0, 0, 0.7))';
-            TooltipReactiveController.tooltipContainer.style.padding = 'var(--tooltip-padding, 5px)';
-            TooltipReactiveController.tooltipContainer.style.borderRadius = 'var(--tooltip-border-radius, 3px)';
-            TooltipReactiveController.tooltipContainer.style.boxShadow =
-                'var(--tooltip-box-shadow, 0 2px 10px rgba(0, 0, 0, 0.2))';
-            TooltipReactiveController.tooltipContainer.style.maxWidth = 'var(--tooltip-max-width, 300px)';
-            TooltipReactiveController.tooltipContainer.style.wordWrap = 'break-word';
-            TooltipReactiveController.tooltipContainer.style.whiteSpace = 'pre-wrap';
-            TooltipReactiveController.tooltipContainer.style.overflow = 'hidden';
-            document.body.appendChild(TooltipReactiveController.tooltipContainer);
+        TooltipReactiveController.ensureContainer();
+    }
+    /**
+     * 툴팁 상자를 만든다 — 문서에 하나만 둔다.
+     *
+     * ── 모양 ────────────────────────────────────────────────────────────────
+     * 전에는 검정 70% 바탕 · 3px 둥글기 · 물려받은 글자 크기였다. 앱의 토큰을 하나도 쓰지 않아서, 화면이
+     * 어떤 색과 크기를 쓰든 툴팁만 브라우저 기본처럼 보였다.
+     *
+     * 이제 --ui-* 를 본다. 툴팁은 **화면 위에 잠깐 떠 있는 것**이라 화면과 같은 면이 아니고, 그래서
+     * 어두운 면에 흰 글자다 — 밝은 면으로 두면 표와 섞여 어디까지가 툴팁인지 안 보인다.
+     *
+     * 글자는 본문보다 한 단 작다(12px). 툴팁은 값이 아니라 값을 거드는 말이다.
+     *
+     * 테두리는 두지 않는다 — 어두운 면이 스스로 경계다. 그림자는 떠 있음을 말할 만큼만 옅게 둔다.
+     *
+     * 값은 모두 --tooltip-* 으로 덮을 수 있다. 어두운 테마는 이 값들을 뒤집어야 한다.
+     */
+    static ensureContainer() {
+        if (TooltipReactiveController.tooltipContainer) {
+            return;
         }
+        const box = document.createElement('div');
+        box.className = 'ox-tooltip-container';
+        box.style.position = 'fixed';
+        box.style.pointerEvents = 'none';
+        box.style.zIndex = '1000';
+        box.style.display = 'none';
+        /*
+         * 낱개 속성으로 적는다. font 축약형은 글꼴 이름을 반드시 요구해서 inherit 을 넣으면 선언이 통째로
+         * 버려진다. 글꼴은 적지 않아도 body 에서 물려받는다 — 이 상자가 body 의 자식이다.
+         */
+        box.style.fontFamily = 'var(--tooltip-font-family, inherit)';
+        box.style.fontSize = 'var(--tooltip-font-size, 12px)';
+        box.style.lineHeight = 'var(--tooltip-line-height, 1.45)';
+        box.style.fontWeight = 'var(--tooltip-font-weight, 400)';
+        box.style.color = 'var(--tooltip-color, #ffffff)';
+        box.style.backgroundColor = 'var(--tooltip-background-color, rgba(23, 36, 44, 0.94))';
+        box.style.padding = 'var(--tooltip-padding, 6px 8px)';
+        box.style.borderRadius = 'var(--tooltip-border-radius, 6px)';
+        box.style.boxShadow = 'var(--tooltip-box-shadow, 0 4px 12px rgba(23, 36, 44, 0.18))';
+        box.style.maxWidth = 'var(--tooltip-max-width, 280px)';
+        box.style.wordWrap = 'break-word';
+        box.style.whiteSpace = 'pre-wrap';
+        box.style.overflow = 'hidden';
+        TooltipReactiveController.tooltipContainer = box;
+        document.body.appendChild(box);
     }
     hostConnected() {
         var _a;
@@ -64,6 +105,69 @@ export class TooltipReactiveController {
         target.removeEventListener('mouseover', this.handleMouseOver);
         target.removeEventListener('mouseout', this.handleMouseOut);
     }
+    static cancelPending() {
+        if (TooltipReactiveController.pending) {
+            clearTimeout(TooltipReactiveController.pending);
+            TooltipReactiveController.pending = null;
+        }
+    }
+    show(element) {
+        var _a;
+        {
+            const tooltipContent = typeof this.content === 'function'
+                ? this.content.call(this, element)
+                : this.content || ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+            const rect = element.getBoundingClientRect();
+            const box = TooltipReactiveController.tooltipContainer;
+            /* 내용을 먼저 넣어야 크기를 잴 수 있다. */
+            box.textContent = tooltipContent;
+            box.style.display = 'block';
+            box.style.left = '0px';
+            box.style.top = '0px';
+            /*
+             * 화면 안으로 밀어 넣는다.
+             *
+             * 전에는 겨눈 요소의 왼쪽 · 아래에 그냥 놓았다. 그래서 오른쪽 끝 칸이나 마지막 줄에서는 툴팁이
+             * 화면 밖으로 나가 **보이지 않았다.** 잘린 글자를 보여 주려고 있는 것인데 그때 안 보인다.
+             *
+             * 넘치면 반대쪽으로 접는다 — 오른쪽이 모자라면 오른쪽 끝에 맞추고, 아래가 모자라면 요소 위로
+             * 올린다.
+             */
+            const GAP = 4;
+            const size = box.getBoundingClientRect();
+            let left = rect.left;
+            let top = rect.bottom + GAP;
+            if (left + size.width > window.innerWidth - GAP) {
+                left = Math.max(GAP, window.innerWidth - size.width - GAP);
+            }
+            if (top + size.height > window.innerHeight - GAP) {
+                top = Math.max(GAP, rect.top - size.height - GAP);
+            }
+            box.style.left = `${Math.round(left)}px`;
+            box.style.top = `${Math.round(top)}px`;
+            TooltipReactiveController.shown = true;
+        }
+    }
 }
+/**
+ * 뜨기까지 기다리는 시간(밀리초).
+ *
+ * ── 왜 기다리나 ─────────────────────────────────────────────────────────
+ * 표를 훑을 때 마우스는 여러 칸을 스쳐 지난다. 지연이 없으면 그 칸마다 툴팁이 떴다 사라져서, 읽으려는
+ * 것을 가리고 눈이 따라가야 한다. 지연을 두면 **머문 곳에만** 뜬다 — 스쳐 지난 것과 보려고 멈춘 것을
+ * 가른다(hover intent).
+ *
+ * 450ms 는 관례에 가까운 값이다. 더 짧으면 스치는 것과 구별되지 않고, 더 길면 「안 뜨는 것」처럼
+ * 느껴진다.
+ *
+ * ── 한 번 뜬 뒤에는 기다리지 않는다 ──────────────────────────────────────
+ * 이미 떠 있으면 다음 요소로 옮길 때 바로 바꾼다. 한 번 「보고 싶다」를 표현했으니 옆 칸을 볼 때마다
+ * 다시 기다리게 하지 않는다.
+ */
+TooltipReactiveController.DEFAULT_ENTER_DELAY = 450;
 TooltipReactiveController.tooltipContainer = null;
+/** 뜨기를 기다리는 중인 타이머. */
+TooltipReactiveController.pending = null;
+/** 지금 툴팁이 떠 있는가. 떠 있으면 다음 요소로 옮길 때 기다리지 않는다. */
+TooltipReactiveController.shown = false;
 //# sourceMappingURL=tooltip-reactive-controller.js.map

package/dist/src/reactive-controllers/tooltip-reactive-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-reactive-controller.js","sourceRoot":"","sources":["../../../src/reactive-controllers/tooltip-reactive-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import { ReactiveController, ReactiveControllerHost } from 'lit'\nimport { hasOverflow } from '../has-overflow.js'\n\nexport class TooltipReactiveController implements ReactiveController {\n  private host: ReactiveControllerHost & HTMLElement\n  private attributeName: string\n  private content?: string | ((element: HTMLElement) => string)\n  private static tooltipContainer: HTMLElement | null = null\n\n  constructor(\n    host: ReactiveControllerHost & HTMLElement,\n    options?: {\n      content?: string | ((element: HTMLElement) => string)\n      attributeName?: string\n    }\n  ) {\n    const { attributeName, content } = options || {}\n\n    this.host = host\n    this.attributeName = attributeName || 'data-reactive-tooltip'\n    this.content = content\n\n    host.addController(this)\n\n    // Create a tooltip container element if it doesn't exist\n    if (!TooltipReactiveController.tooltipContainer) {\n      TooltipReactiveController.tooltipContainer = document.createElement('div')\n      TooltipReactiveController.tooltipContainer.className = 'ox-tooltip-container'\n      TooltipReactiveController.tooltipContainer.style.position = 'fixed'\n      TooltipReactiveController.tooltipContainer.style.pointerEvents = 'none'\n      TooltipReactiveController.tooltipContainer.style.zIndex = '1000'\n      // Set default styles using CSS variables\n      TooltipReactiveController.tooltipContainer.style.fontSize = 'var(--tooltip-font-size, 1.0em)'\n      TooltipReactiveController.tooltipContainer.style.color = 'var(--tooltip-color, #fff)'\n      TooltipReactiveController.tooltipContainer.style.backgroundColor =\n        'var(--tooltip-background-color, rgba(0, 0, 0, 0.7))'\n      TooltipReactiveController.tooltipContainer.style.padding = 'var(--tooltip-padding, 5px)'\n      TooltipReactiveController.tooltipContainer.style.borderRadius = 'var(--tooltip-border-radius, 3px)'\n      TooltipReactiveController.tooltipContainer.style.boxShadow =\n        'var(--tooltip-box-shadow, 0 2px 10px rgba(0, 0, 0, 0.2))'\n      TooltipReactiveController.tooltipContainer.style.maxWidth = 'var(--tooltip-max-width, 300px)'\n      TooltipReactiveController.tooltipContainer.style.wordWrap = 'break-word'\n      TooltipReactiveController.tooltipContainer.style.whiteSpace = 'pre-wrap'\n      TooltipReactiveController.tooltipContainer.style.overflow = 'hidden'\n      document.body.appendChild(TooltipReactiveController.tooltipContainer)\n    }\n  }\n\n  hostConnected() {\n    const target = this.host.shadowRoot ?? this.host\n    target.addEventListener('mouseover', this.handleMouseOver)\n    target.addEventListener('mouseout', this.handleMouseOut)\n  }\n\n  hostDisconnected() {\n    const target = this.host.shadowRoot ?? this.host\n    target.removeEventListener('mouseover', this.handleMouseOver)\n    target.removeEventListener('mouseout', this.handleMouseOut)\n  }\n\n  private handleMouseOver = (e: Event) => {\n    const element = e.target as HTMLElement\n    if (element.hasAttribute(this.attributeName) && hasOverflow(element)) {\n      const tooltipContent =\n        typeof this.content === 'function'\n          ? this.content.call(this, element)\n          : this.content || element.textContent?.trim() || ''\n\n      const rect = element.getBoundingClientRect()\n\n      // Calculate the fixed position\n      const fixedTop = rect.top + rect.height\n      const fixedLeft = rect.left\n\n      // Set tooltip container position and content\n      TooltipReactiveController.tooltipContainer!.style.top = `${fixedTop}px`\n      TooltipReactiveController.tooltipContainer!.style.left = `${fixedLeft}px`\n      TooltipReactiveController.tooltipContainer!.style.display = 'block'\n      TooltipReactiveController.tooltipContainer!.textContent = tooltipContent\n    }\n  }\n\n  private handleMouseOut = (e: Event) => {\n    if (TooltipReactiveController.tooltipContainer) {\n      TooltipReactiveController.tooltipContainer.style.display = 'none'\n    }\n  }\n}\n"]}
+{"version":3,"file":"tooltip-reactive-controller.js","sourceRoot":"","sources":["../../../src/reactive-controllers/tooltip-reactive-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import { ReactiveController, ReactiveControllerHost } from 'lit'\nimport { hasOverflow } from '../has-overflow.js'\n\nexport class TooltipReactiveController implements ReactiveController {\n  /**\n   * 뜨기까지 기다리는 시간(밀리초).\n   *\n   * ── 왜 기다리나 ─────────────────────────────────────────────────────────\n   * 표를 훑을 때 마우스는 여러 칸을 스쳐 지난다. 지연이 없으면 그 칸마다 툴팁이 떴다 사라져서, 읽으려는\n   * 것을 가리고 눈이 따라가야 한다. 지연을 두면 **머문 곳에만** 뜬다 — 스쳐 지난 것과 보려고 멈춘 것을\n   * 가른다(hover intent).\n   *\n   * 450ms 는 관례에 가까운 값이다. 더 짧으면 스치는 것과 구별되지 않고, 더 길면 「안 뜨는 것」처럼\n   * 느껴진다.\n   *\n   * ── 한 번 뜬 뒤에는 기다리지 않는다 ──────────────────────────────────────\n   * 이미 떠 있으면 다음 요소로 옮길 때 바로 바꾼다. 한 번 「보고 싶다」를 표현했으니 옆 칸을 볼 때마다\n   * 다시 기다리게 하지 않는다.\n   */\n  private static readonly DEFAULT_ENTER_DELAY = 450\n\n  private host: ReactiveControllerHost & HTMLElement\n  private attributeName: string\n  private content?: string | ((element: HTMLElement) => string)\n  private enterDelay: number\n  private static tooltipContainer: HTMLElement | null = null\n  /** 뜨기를 기다리는 중인 타이머. */\n  private static pending: ReturnType<typeof setTimeout> | null = null\n  /** 지금 툴팁이 떠 있는가. 떠 있으면 다음 요소로 옮길 때 기다리지 않는다. */\n  private static shown = false\n\n  constructor(\n    host: ReactiveControllerHost & HTMLElement,\n    options?: {\n      content?: string | ((element: HTMLElement) => string)\n      attributeName?: string\n      /** 머무른 시간이 이만큼을 넘으면 뜬다(밀리초). 0 이면 바로 뜬다. */\n      enterDelay?: number\n    }\n  ) {\n    const { attributeName, content, enterDelay } = options || {}\n\n    this.host = host\n    this.attributeName = attributeName || 'data-reactive-tooltip'\n    this.content = content\n    this.enterDelay = enterDelay ?? TooltipReactiveController.DEFAULT_ENTER_DELAY\n\n    host.addController(this)\n\n    TooltipReactiveController.ensureContainer()\n  }\n\n  /**\n   * 툴팁 상자를 만든다 — 문서에 하나만 둔다.\n   *\n   * ── 모양 ────────────────────────────────────────────────────────────────\n   * 전에는 검정 70% 바탕 · 3px 둥글기 · 물려받은 글자 크기였다. 앱의 토큰을 하나도 쓰지 않아서, 화면이\n   * 어떤 색과 크기를 쓰든 툴팁만 브라우저 기본처럼 보였다.\n   *\n   * 이제 --ui-* 를 본다. 툴팁은 **화면 위에 잠깐 떠 있는 것**이라 화면과 같은 면이 아니고, 그래서\n   * 어두운 면에 흰 글자다 — 밝은 면으로 두면 표와 섞여 어디까지가 툴팁인지 안 보인다.\n   *\n   * 글자는 본문보다 한 단 작다(12px). 툴팁은 값이 아니라 값을 거드는 말이다.\n   *\n   * 테두리는 두지 않는다 — 어두운 면이 스스로 경계다. 그림자는 떠 있음을 말할 만큼만 옅게 둔다.\n   *\n   * 값은 모두 --tooltip-* 으로 덮을 수 있다. 어두운 테마는 이 값들을 뒤집어야 한다.\n   */\n  private static ensureContainer() {\n    if (TooltipReactiveController.tooltipContainer) {\n      return\n    }\n\n    const box = document.createElement('div')\n\n    box.className = 'ox-tooltip-container'\n    box.style.position = 'fixed'\n    box.style.pointerEvents = 'none'\n    box.style.zIndex = '1000'\n    box.style.display = 'none'\n\n    /*\n     * 낱개 속성으로 적는다. font 축약형은 글꼴 이름을 반드시 요구해서 inherit 을 넣으면 선언이 통째로\n     * 버려진다. 글꼴은 적지 않아도 body 에서 물려받는다 — 이 상자가 body 의 자식이다.\n     */\n    box.style.fontFamily = 'var(--tooltip-font-family, inherit)'\n    box.style.fontSize = 'var(--tooltip-font-size, 12px)'\n    box.style.lineHeight = 'var(--tooltip-line-height, 1.45)'\n    box.style.fontWeight = 'var(--tooltip-font-weight, 400)'\n    box.style.color = 'var(--tooltip-color, #ffffff)'\n    box.style.backgroundColor = 'var(--tooltip-background-color, rgba(23, 36, 44, 0.94))'\n    box.style.padding = 'var(--tooltip-padding, 6px 8px)'\n    box.style.borderRadius = 'var(--tooltip-border-radius, 6px)'\n    box.style.boxShadow = 'var(--tooltip-box-shadow, 0 4px 12px rgba(23, 36, 44, 0.18))'\n    box.style.maxWidth = 'var(--tooltip-max-width, 280px)'\n    box.style.wordWrap = 'break-word'\n    box.style.whiteSpace = 'pre-wrap'\n    box.style.overflow = 'hidden'\n\n    TooltipReactiveController.tooltipContainer = box\n    document.body.appendChild(box)\n  }\n\n  hostConnected() {\n    const target = this.host.shadowRoot ?? this.host\n    target.addEventListener('mouseover', this.handleMouseOver)\n    target.addEventListener('mouseout', this.handleMouseOut)\n  }\n\n  hostDisconnected() {\n    const target = this.host.shadowRoot ?? this.host\n    target.removeEventListener('mouseover', this.handleMouseOver)\n    target.removeEventListener('mouseout', this.handleMouseOut)\n  }\n\n  private handleMouseOver = (e: Event) => {\n    /*\n     * 표식이 달린 **조상**을 찾는다 — 포인터가 닿는 것은 대개 그 안의 조각이다.\n     *\n     * `e.target` 만 보고 있었다. 그런데 툴팁을 붙이고 싶은 줄은 거의 언제나 안에 조각을 가진다 —\n     * 공장 달력의 한 줄은 [표시 6px][줄머리][제목] 셋이고, data-grist 의 머리말도 안에 아이콘이\n     * 들어간다. 포인터가 그 조각 위에 있으면 `e.target` 이 조각이라 표식이 없고, 그대로 돌아갔다.\n     *\n     *   [확인함] 2026-09-11  공장 달력 한 줄 114px 중 제목 조각이 104px.\n     *                        줄에 직접 쏘면 뜨고, 제목 조각에 쏘면 안 뜬다.\n     *                        **91% 의 자리에서 안 뜬다** — 사실상 안 뜨는 것이다.\n     *\n     * `closest` 는 자기 자신부터 본다. 표식이 잎에 달린 경우는 전과 똑같이 동작한다.\n     */\n    const element = (e.target as HTMLElement).closest?.(`[${this.attributeName}]`) as HTMLElement\n\n    if (!element || !hasOverflow(element)) {\n      return\n    }\n\n    TooltipReactiveController.cancelPending()\n\n    /* 이미 떠 있으면 기다리지 않는다(위 머리말). */\n    if (TooltipReactiveController.shown || this.enterDelay <= 0) {\n      this.show(element)\n      return\n    }\n\n    TooltipReactiveController.pending = setTimeout(() => {\n      TooltipReactiveController.pending = null\n      this.show(element)\n    }, this.enterDelay)\n  }\n\n  private static cancelPending() {\n    if (TooltipReactiveController.pending) {\n      clearTimeout(TooltipReactiveController.pending)\n      TooltipReactiveController.pending = null\n    }\n  }\n\n  private show(element: HTMLElement) {\n    {\n      const tooltipContent =\n        typeof this.content === 'function'\n          ? this.content.call(this, element)\n          : this.content || element.textContent?.trim() || ''\n\n      const rect = element.getBoundingClientRect()\n      const box = TooltipReactiveController.tooltipContainer!\n\n      /* 내용을 먼저 넣어야 크기를 잴 수 있다. */\n      box.textContent = tooltipContent\n      box.style.display = 'block'\n      box.style.left = '0px'\n      box.style.top = '0px'\n\n      /*\n       * 화면 안으로 밀어 넣는다.\n       *\n       * 전에는 겨눈 요소의 왼쪽 · 아래에 그냥 놓았다. 그래서 오른쪽 끝 칸이나 마지막 줄에서는 툴팁이\n       * 화면 밖으로 나가 **보이지 않았다.** 잘린 글자를 보여 주려고 있는 것인데 그때 안 보인다.\n       *\n       * 넘치면 반대쪽으로 접는다 — 오른쪽이 모자라면 오른쪽 끝에 맞추고, 아래가 모자라면 요소 위로\n       * 올린다.\n       */\n      const GAP = 4\n      const size = box.getBoundingClientRect()\n\n      let left = rect.left\n      let top = rect.bottom + GAP\n\n      if (left + size.width > window.innerWidth - GAP) {\n        left = Math.max(GAP, window.innerWidth - size.width - GAP)\n      }\n\n      if (top + size.height > window.innerHeight - GAP) {\n        top = Math.max(GAP, rect.top - size.height - GAP)\n      }\n\n      box.style.left = `${Math.round(left)}px`\n      box.style.top = `${Math.round(top)}px`\n\n      TooltipReactiveController.shown = true\n    }\n  }\n\n  private handleMouseOut = (e: Event) => {\n    /* 기다리던 것도 취소한다 — 안 그러면 떠난 뒤에 뜬다. */\n    TooltipReactiveController.cancelPending()\n\n    if (TooltipReactiveController.tooltipContainer) {\n      TooltipReactiveController.tooltipContainer.style.display = 'none'\n    }\n\n    TooltipReactiveController.shown = false\n  }\n}\n"]}

package/dist/test/has-overflow.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/has-overflow.test.js

@@ -0,0 +1,49 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { hasOverflow } from '../src/has-overflow.js';
+/**
+ * A tooltip that only expands cut text has to know when text is cut.
+ *
+ * scrollWidth answers that for a block. It does not for a flex row: flex lays its items out to
+ * fit the box, so the box reports no overflow even while the title inside it is ellipsised.
+ * Measured on the plant calendar - 25 event rows, every title visibly cut, every one reported
+ * as not overflowing, and the tooltip never appeared on any of them.
+ */
+describe('hasOverflow', () => {
+    const LONG = 'CAM-LEAK-VISUAL-INSPECTION-STATION-284-AND-THEN-SOME';
+    it('says no when the text fits', async () => {
+        const el = (await fixture(html `
+      <div style="width: 400px; overflow: hidden; white-space: nowrap">short</div>
+    `));
+        expect(hasOverflow(el)).to.be.false;
+    });
+    it('says yes for a block whose text is cut', async () => {
+        const el = (await fixture(html `
+      <div style="width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">${LONG}</div>
+    `));
+        expect(hasOverflow(el), 'a block overflows its own box, which scrollWidth reports').to.be.true;
+    });
+    it('says yes for a flex row whose title span is cut', async () => {
+        /*
+         * The shape the plant calendar draws: a flex row holding a mark and the title, with the
+         * title in its own span that clips. overflow:hidden resolves that span's min-width to 0, so
+         * it shrinks to fit and the row around it never reports overflow of its own.
+         */
+        const el = (await fixture(html `
+      <div style="display: flex; gap: 4px; width: 60px; overflow: hidden; white-space: nowrap">
+        <span style="flex: none; width: 6px; height: 6px"></span>
+        <span style="overflow: hidden; text-overflow: ellipsis">${LONG}</span>
+      </div>
+    `));
+        expect(el.scrollWidth, 'the row reports no overflow of its own — this is why the first check is not enough').to.equal(el.clientWidth);
+        expect(hasOverflow(el), 'the title is cut, so a tooltip is worth showing').to.be.true;
+    });
+    it('says no for a flex row that fits, so tooltips do not fire on everything', async () => {
+        const el = (await fixture(html `
+      <div style="display: flex; width: 400px; overflow: hidden; white-space: nowrap">
+        <span style="flex: none; width: 6px; height: 6px"></span>short
+      </div>
+    `));
+        expect(hasOverflow(el)).to.be.false;
+    });
+});
+//# sourceMappingURL=has-overflow.test.js.map

package/dist/test/has-overflow.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"has-overflow.test.js","sourceRoot":"","sources":["../../test/has-overflow.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEpD;;;;;;;GAOG;AACH,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,MAAM,IAAI,GAAG,sDAAsD,CAAA;IAEnE,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;;KAE7B,CAAC,CAAgB,CAAA;QAElB,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAA;IACrC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;QACtD,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;iGAC+D,IAAI;KAChG,CAAC,CAAgB,CAAA;QAElB,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,0DAA0D,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA;IAChG,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;QAC/D;;;;WAIG;QACH,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;;;kEAGgC,IAAI;;KAEjE,CAAC,CAAgB,CAAA;QAElB,MAAM,CACJ,EAAE,CAAC,WAAW,EACd,oFAAoF,CACrF,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;QAC1B,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,iDAAiD,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA;IACvF,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,yEAAyE,EAAE,KAAK,IAAI,EAAE;QACvF,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;;;;KAI7B,CAAC,CAAgB,CAAA;QAElB,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAA;IACrC,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import { expect, fixture, html } from '@open-wc/testing'\n\nimport { hasOverflow } from '../src/has-overflow.js'\n\n/**\n * A tooltip that only expands cut text has to know when text is cut.\n *\n * scrollWidth answers that for a block. It does not for a flex row: flex lays its items out to\n * fit the box, so the box reports no overflow even while the title inside it is ellipsised.\n * Measured on the plant calendar - 25 event rows, every title visibly cut, every one reported\n * as not overflowing, and the tooltip never appeared on any of them.\n */\ndescribe('hasOverflow', () => {\n  const LONG = 'CAM-LEAK-VISUAL-INSPECTION-STATION-284-AND-THEN-SOME'\n\n  it('says no when the text fits', async () => {\n    const el = (await fixture(html`\n      <div style=\"width: 400px; overflow: hidden; white-space: nowrap\">short</div>\n    `)) as HTMLElement\n\n    expect(hasOverflow(el)).to.be.false\n  })\n\n  it('says yes for a block whose text is cut', async () => {\n    const el = (await fixture(html`\n      <div style=\"width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap\">${LONG}</div>\n    `)) as HTMLElement\n\n    expect(hasOverflow(el), 'a block overflows its own box, which scrollWidth reports').to.be.true\n  })\n\n  it('says yes for a flex row whose title span is cut', async () => {\n    /*\n     * The shape the plant calendar draws: a flex row holding a mark and the title, with the\n     * title in its own span that clips. overflow:hidden resolves that span's min-width to 0, so\n     * it shrinks to fit and the row around it never reports overflow of its own.\n     */\n    const el = (await fixture(html`\n      <div style=\"display: flex; gap: 4px; width: 60px; overflow: hidden; white-space: nowrap\">\n        <span style=\"flex: none; width: 6px; height: 6px\"></span>\n        <span style=\"overflow: hidden; text-overflow: ellipsis\">${LONG}</span>\n      </div>\n    `)) as HTMLElement\n\n    expect(\n      el.scrollWidth,\n      'the row reports no overflow of its own — this is why the first check is not enough'\n    ).to.equal(el.clientWidth)\n    expect(hasOverflow(el), 'the title is cut, so a tooltip is worth showing').to.be.true\n  })\n\n  it('says no for a flex row that fits, so tooltips do not fire on everything', async () => {\n    const el = (await fixture(html`\n      <div style=\"display: flex; width: 400px; overflow: hidden; white-space: nowrap\">\n        <span style=\"flex: none; width: 6px; height: 6px\"></span>short\n      </div>\n    `)) as HTMLElement\n\n    expect(hasOverflow(el)).to.be.false\n  })\n})\n"]}

package/dist/test/tooltip-reactive-controller.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/tooltip-reactive-controller.test.js

@@ -0,0 +1,78 @@
+import { __decorate } from "tslib";
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import { LitElement, html as litHtml } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { TooltipReactiveController } from '../src/reactive-controllers/tooltip-reactive-controller.js';
+const LONG = 'CAM-LEAK-VISUAL-INSPECTION-STATION-284-AND-THEN-SOME';
+/**
+ * A row of the shape hosts actually draw: a marker, a prefix and the title, each in its own
+ * span. The pointer lands on one of those children, never on the row itself - on the plant
+ * calendar the title span alone covers 104 of the row's 114px.
+ */
+let TooltipHostFixture = class TooltipHostFixture extends LitElement {
+    constructor() {
+        super(...arguments);
+        /*
+         * The content function the plant calendar passes: the host writes the sentence it wants read
+         * into the attribute, which is more than the row's own cut text.
+         */
+        this.tooltip = new TooltipReactiveController(this, {
+            enterDelay: 0,
+            content: element => { var _a; return element.getAttribute('data-reactive-tooltip') || ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || ''; }
+        });
+    }
+    render() {
+        return litHtml `
+      <div
+        data-reactive-tooltip="the whole sentence"
+        style="display:flex; gap:4px; width:60px; overflow:hidden; white-space:nowrap"
+      >
+        <span mark style="flex:none; width:6px; height:6px"></span>
+        <span title-part style="overflow:hidden; text-overflow:ellipsis">${LONG}</span>
+      </div>
+    `;
+    }
+};
+TooltipHostFixture = __decorate([
+    customElement('tooltip-host-fixture')
+], TooltipHostFixture);
+function box() {
+    return document.querySelector('.ox-tooltip-container');
+}
+function hover(el) {
+    el.dispatchEvent(new MouseEvent('mouseover', { bubbles: true, composed: true }));
+}
+describe('TooltipReactiveController', () => {
+    let host;
+    beforeEach(async () => {
+        host = (await fixture(html `<tooltip-host-fixture></tooltip-host-fixture>`));
+        box().style.display = 'none';
+    });
+    it('shows when the pointer is over a child of the marked row', async () => {
+        /*
+         * The regression this file exists for. The controller read the attribute off e.target, and
+         * the pointer is over a child for all but a few pixels of the row - so the tooltip never
+         * appeared on the plant calendar, on any row.
+         */
+        hover(host.shadowRoot.querySelector('[title-part]'));
+        await waitUntil(() => box().style.display === 'block');
+        expect(box().textContent).to.equal('the whole sentence');
+    });
+    it('shows when the pointer is over the marked row itself', async () => {
+        hover(host.shadowRoot.querySelector('[data-reactive-tooltip]'));
+        await waitUntil(() => box().style.display === 'block');
+    });
+    it('reads the attribute of the marked ancestor, not the child under the pointer', async () => {
+        hover(host.shadowRoot.querySelector('[mark]'));
+        await waitUntil(() => box().style.display === 'block');
+        expect(box().textContent, 'the marker span holds no text of its own').to.equal('the whole sentence');
+    });
+    it('stays hidden when nothing in the ancestry is marked', async () => {
+        const plain = (await fixture(html `<span>${LONG}</span>`));
+        host.shadowRoot.appendChild(plain);
+        hover(plain);
+        await new Promise(resolve => setTimeout(resolve, 50));
+        expect(box().style.display).to.equal('none');
+    });
+});
+//# sourceMappingURL=tooltip-reactive-controller.test.js.map

package/dist/test/tooltip-reactive-controller.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-reactive-controller.test.js","sourceRoot":"","sources":["../../test/tooltip-reactive-controller.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture, html, waitUntil } from '@open-wc/testing'\nimport { LitElement, html as litHtml } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { TooltipReactiveController } from '../src/reactive-controllers/tooltip-reactive-controller.js'\n\nconst LONG = 'CAM-LEAK-VISUAL-INSPECTION-STATION-284-AND-THEN-SOME'\n\n/**\n * A row of the shape hosts actually draw: a marker, a prefix and the title, each in its own\n * span. The pointer lands on one of those children, never on the row itself - on the plant\n * calendar the title span alone covers 104 of the row's 114px.\n */\n@customElement('tooltip-host-fixture')\nclass TooltipHostFixture extends LitElement {\n  /*\n   * The content function the plant calendar passes: the host writes the sentence it wants read\n   * into the attribute, which is more than the row's own cut text.\n   */\n  tooltip = new TooltipReactiveController(this, {\n    enterDelay: 0,\n    content: element => element.getAttribute('data-reactive-tooltip') || element.textContent?.trim() || ''\n  })\n\n  render() {\n    return litHtml`\n      <div\n        data-reactive-tooltip=\"the whole sentence\"\n        style=\"display:flex; gap:4px; width:60px; overflow:hidden; white-space:nowrap\"\n      >\n        <span mark style=\"flex:none; width:6px; height:6px\"></span>\n        <span title-part style=\"overflow:hidden; text-overflow:ellipsis\">${LONG}</span>\n      </div>\n    `\n  }\n}\n\nfunction box(): HTMLElement {\n  return document.querySelector('.ox-tooltip-container') as HTMLElement\n}\n\nfunction hover(el: Element) {\n  el.dispatchEvent(new MouseEvent('mouseover', { bubbles: true, composed: true }))\n}\n\ndescribe('TooltipReactiveController', () => {\n  let host: TooltipHostFixture\n\n  beforeEach(async () => {\n    host = (await fixture(html`<tooltip-host-fixture></tooltip-host-fixture>`)) as TooltipHostFixture\n    box().style.display = 'none'\n  })\n\n  it('shows when the pointer is over a child of the marked row', async () => {\n    /*\n     * The regression this file exists for. The controller read the attribute off e.target, and\n     * the pointer is over a child for all but a few pixels of the row - so the tooltip never\n     * appeared on the plant calendar, on any row.\n     */\n    hover(host.shadowRoot!.querySelector('[title-part]')!)\n\n    await waitUntil(() => box().style.display === 'block')\n    expect(box().textContent).to.equal('the whole sentence')\n  })\n\n  it('shows when the pointer is over the marked row itself', async () => {\n    hover(host.shadowRoot!.querySelector('[data-reactive-tooltip]')!)\n\n    await waitUntil(() => box().style.display === 'block')\n  })\n\n  it('reads the attribute of the marked ancestor, not the child under the pointer', async () => {\n    hover(host.shadowRoot!.querySelector('[mark]')!)\n\n    await waitUntil(() => box().style.display === 'block')\n    expect(box().textContent, 'the marker span holds no text of its own').to.equal('the whole sentence')\n  })\n\n  it('stays hidden when nothing in the ancestry is marked', async () => {\n    const plain = (await fixture(html`<span>${LONG}</span>`)) as HTMLElement\n    host.shadowRoot!.appendChild(plain)\n\n    hover(plain)\n\n    await new Promise(resolve => setTimeout(resolve, 50))\n    expect(box().style.display).to.equal('none')\n  })\n})\n"]}