@sellmate/design-system 0.0.41 → 0.0.42

package/dist/esm/sd-button_15.entry.js

@@ -3332,7 +3332,8 @@ const SdTooltipPortal = class {
     }
     // 외부 클릭 감지
     handleMouseDown(e) {
-        this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target));
+        this.isInsideClick = !!((this.wrapper && this.wrapper.contains(e.target)) ||
+            (this.parentRef && this.parentRef.contains(e.target)));
     }
     handleWindowClick(e) {
         if (this.isInsideClick) {
@@ -3344,7 +3345,7 @@ const SdTooltipPortal = class {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: '1b2a35d58c663c18354bdf4fae5e8a1d18433273' });
+        return h("slot", { key: '918c09f6f9b248a6ba08e622c375b63adb36d0c3' });
     }
 };
 

package/hydrate/index.js

@@ -9151,7 +9151,8 @@ class SdTooltipPortal {
     }
     // 외부 클릭 감지
     handleMouseDown(e) {
-        this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target));
+        this.isInsideClick = !!((this.wrapper && this.wrapper.contains(e.target)) ||
+            (this.parentRef && this.parentRef.contains(e.target)));
     }
     handleWindowClick(e) {
         if (this.isInsideClick) {
@@ -9163,7 +9164,7 @@ class SdTooltipPortal {
         this.sdClose.emit();
     }
     render() {
-        return hAsync("slot", { key: '1b2a35d58c663c18354bdf4fae5e8a1d18433273' });
+        return hAsync("slot", { key: '918c09f6f9b248a6ba08e622c375b63adb36d0c3' });
     }
     static get cmpMeta() { return {
         "$flags$": 777,

package/hydrate/index.mjs

@@ -9149,7 +9149,8 @@ class SdTooltipPortal {
     }
     // 외부 클릭 감지
     handleMouseDown(e) {
-        this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target));
+        this.isInsideClick = !!((this.wrapper && this.wrapper.contains(e.target)) ||
+            (this.parentRef && this.parentRef.contains(e.target)));
     }
     handleWindowClick(e) {
         if (this.isInsideClick) {
@@ -9161,7 +9162,7 @@ class SdTooltipPortal {
         this.sdClose.emit();
     }
     render() {
-        return hAsync("slot", { key: '1b2a35d58c663c18354bdf4fae5e8a1d18433273' });
+        return hAsync("slot", { key: '918c09f6f9b248a6ba08e622c375b63adb36d0c3' });
     }
     static get cmpMeta() { return {
         "$flags$": 777,

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system",
- "version": "0.0.41",
+ "version": "0.0.42",
  "description": "Sellmate Design System - Web Components Library built with Stencil",
  "keywords": [
   "web-components",
@@ -92,5 +92,5 @@
   "@stencil/react-output-target": "^1.2.0",
   "@stencil/vue-output-target": "^0.11.8"
  },
- "gitHead": "d19b973626ad91ca4b28f0bb569bf4088a9b4706"
+ "gitHead": "419ad125f8b1563468d4d3598a12584c215efbc5"
 }

package/dist/components/p-CO0qaUid.js.map

@@ -1 +0,0 @@
-{"file":"p-CO0qaUid.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tooltip-portal/sd-tooltip-portal.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-tooltip-portal',\r\n shadow: true,\r\n})\r\nexport class SdTooltipPortal {\r\n @Element() el!: HTMLElement;\r\n @Prop() to: HTMLElement | string = 'body';\r\n @Prop() parentRef: HTMLElement | null = null;\r\n @Prop() offset: [number, number] = [0, 0];\r\n @Prop() zIndex: number = 9999;\r\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\r\n @Prop() open: boolean = false;\r\n\r\n @Event() sdClose!: EventEmitter<void>;\r\n\r\n private container?: HTMLElement;\r\n private wrapper?: HTMLElement;\r\n private rafId?: number;\r\n private isInsideClick = false;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n private mutationObserver?: MutationObserver;\r\n\r\n private static readonly ARROW_SIZE = 11.2;\r\n\r\n componentDidLoad() {\r\n  this.container = this.resolveContainer();\r\n  this.createWrapper();\r\n  this.moveSlotContent();\r\n\r\n  // DOM이 완전히 렌더링된 후 위치 계산\r\n  requestAnimationFrame(() => {\r\n   this.updatePosition();\r\n   if (this.wrapper) {\r\n    this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시\r\n   }\r\n  });\r\n\r\n  this.observeParent();\r\n }\r\n\r\n componentDidRender() {\r\n  if (!this.wrapper) return;\r\n\r\n  // this.wrapper.style.display = this.open ? 'block' : 'none';\r\n  // if (this.open) this.updatePosition();\r\n\r\n  if (this.open) {\r\n   this.wrapper.style.display = 'block';\r\n   // RAF를 사용해서 다음 프레임에 위치 업데이트\r\n   requestAnimationFrame(() => {\r\n    this.updatePosition();\r\n    if (this.wrapper) {\r\n     this.wrapper.style.visibility = 'visible';\r\n    }\r\n   });\r\n  } else {\r\n   this.wrapper.style.display = 'none';\r\n   this.wrapper.style.visibility = 'hidden';\r\n  }\r\n }\r\n\r\n disconnectedCallback() {\r\n  if (this.rafId) cancelAnimationFrame(this.rafId);\r\n  this.unobserveParent();\r\n  this.wrapper?.remove();\r\n }\r\n\r\n private resolveContainer(): HTMLElement {\r\n  const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\r\n  return el instanceof HTMLElement ? el : document.body;\r\n }\r\n\r\n private createWrapper() {\r\n  this.wrapper = document.createElement('div');\r\n  Object.assign(this.wrapper.style, {\r\n   position: 'absolute',\r\n   zIndex: this.zIndex.toString(),\r\n   transition: 'opacity 0.4s',\r\n   top: '-9999px',\r\n   left: '-9999px',\r\n  });\r\n  this.container!.appendChild(this.wrapper);\r\n }\r\n\r\n private moveSlotContent() {\r\n  if (!this.wrapper) return;\r\n  const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\r\n  nodes.forEach(n => this.wrapper!.appendChild(n));\r\n }\r\n\r\n // 위치 갱신 (scroll / resize)\r\n @Listen('scroll', { target: 'window' })\r\n @Listen('resize', { target: 'window' })\r\n updatePosition() {\r\n  if (this.rafId) cancelAnimationFrame(this.rafId);\r\n\r\n  this.rafId = requestAnimationFrame(() => {\r\n   if (!this.parentRef || !this.wrapper) return;\r\n\r\n   const rect = this.parentRef.getBoundingClientRect();\r\n   if (!rect.width && !rect.height) return; // 요소가 보이지 않는 경우\r\n\r\n   const [offsetX, offsetY] = this.offset;\r\n   const ARROW_SIZE = SdTooltipPortal.ARROW_SIZE;\r\n\r\n   let top = 0;\r\n   let left = 0;\r\n\r\n   switch (this.placement) {\r\n    case 'top':\r\n     top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;\r\n     left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n     break;\r\n\r\n    case 'bottom':\r\n     top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;\r\n     left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n     break;\r\n\r\n    case 'left':\r\n     top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n     left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;\r\n     break;\r\n\r\n    case 'right':\r\n     top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n     left = rect.right + window.scrollX + offsetX + ARROW_SIZE;\r\n     break;\r\n   }\r\n\r\n   Object.assign(this.wrapper!.style, {\r\n    top: `${top}px`,\r\n    left: `${left}px`,\r\n   });\r\n  });\r\n }\r\n\r\n // parentRef의 이동 / 크기변경 감지\r\n private observeParent() {\r\n  if (!this.parentRef) return;\r\n\r\n  this.resizeObserver = new ResizeObserver(() => this.updatePosition());\r\n  this.resizeObserver.observe(this.parentRef);\r\n\r\n  this.mutationObserver = new MutationObserver(() => this.updatePosition());\r\n  this.mutationObserver.observe(document.body, {\r\n   childList: true,\r\n   subtree: true,\r\n  });\r\n }\r\n\r\n private unobserveParent() {\r\n  this.resizeObserver?.disconnect();\r\n  this.mutationObserver?.disconnect();\r\n }\r\n\r\n // 외부 클릭 감지\r\n @Listen('mousedown', { target: 'window' })\r\n handleMouseDown(e: MouseEvent) {\r\n  this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target as Node));\r\n }\r\n\r\n @Listen('click', { target: 'window' })\r\n handleWindowClick(e: MouseEvent) {\r\n  if (this.isInsideClick) {\r\n   this.isInsideClick = false;\r\n   return;\r\n  }\r\n  if (this.wrapper?.contains(e.target as Node)) return;\r\n  this.sdClose.emit();\r\n }\r\n\r\n render() {\r\n  return <slot></slot>;\r\n }\r\n}\r\n"],"version":3}