@x-plat/design-system 0.14.14 → 0.14.16

package/guidelines/MIGRATION.md

@@ -284,44 +284,38 @@ Dropdown · PopOver · TimePicker 가 전부 애니메이션 없이 툭 튀어
 **올리기만 하면 된다. 쓰는 쪽에서 고칠 것은 없다.** `.repositioning` 클래스를
 직접 잡는 CSS 를 쓰고 있었다면 그 규칙만 지우면 된다.
 
-## 0.14.6 → 0.14.7 — 안쪽 상자가 스크롤되면 오버레이가 닫힌다
+## 0.14.7 ~ 0.14.15 — 스크롤하면 오버레이가 닫혔다 (0.14.16 에서 되돌림)
 
-**동작 변경이다.** `Select` · `Dropdown` · `PopOver` · `TimePicker` 를 열어 둔
-채 **페이지가 아닌 안쪽 상자**(`overflow: auto`)를 스크롤하면 닫힌다.
+**이 구간을 쓰고 있었다면** `Select` · `Dropdown` · `PopOver` · `TimePicker`
+를 열어 둔 채 스크롤하면 닫혔다. **0.14.16 부터는 안 닫힌다** — 따라간다.
 
-닫지 않는 경우:
+두 번에 걸쳐 걷어냈다.
 
-- **페이지(문서) 스크롤** — 팝업이 `absolute` + 문서 좌표라 브라우저가 함께
-  옮겨 준다. 지연도 겹침도 없으므로 닫을 이유가 없다.
-- **팝업 자기 목록 스크롤** — 셀렉트 목록은 `max-height` 안에서 스스로
-  스크롤한다. 그걸로 닫히면 고를 수가 없다.
+    0.14.7   스크롤이 나면 바로 닫는다
+    0.14.15  트리거가 그릇 밖으로 나가면 닫는다
+    0.14.16  안 닫는다 (포커스가 패널 안에 있을 때만 예외)
 
-### 왜
+0.14.7 의 땜질은 팝업이 스크롤을 **제때 못 따라가고**(JS 로 옮기느라 한 프레임
+늦었다) 그릇 밖으로 나가도 안 잘려 헤더를 덮었기 때문이다. 어차피 어긋나
+보이니 닫는 쪽이 나았다. 그 전제는 0.14.3~0.14.6(지연 제거)과
+0.14.9~0.14.14(그릇 기준 자리 + `clip-path`)로 무너졌다.
 
-팝업은 `body` 밑 포털에 있고 트리거는 상자 안에 있다. 둘을 이어 주는 것이
-브라우저에 없으므로 JS 가 매번 다시 붙여야 하는데, **스크롤은 컴포지터가
-먼저 그리고 `scroll` 이벤트는 그 뒤에 메인 스레드로 온다.** 그래서 JS 로
-옮기는 한 항상 한 프레임 이상 늦는다. 0.12.0 부터 0.14.6 까지 네 번에 걸쳐
-줄여 봤지만(rAF 묶기 → DOM 직접 쓰기 → 문서 좌표 → rAF 제거) 원리가 그대로라
-남았다.
+0.14.15 는 "안 보이는데 열린 상태" 를 걱정해 남겨 둔 것인데, 쓰는 사람에게는
+**굴리다가 목록이 툭 사라지는 쪽**이 더 거슬렸다. 목록은 트리거에 딸린
+것이라 **트리거가 돌아오면 목록도 돌아오는 것**이 맞는 그림이다. 잠깐
+지나쳤다는 이유로 고르던 것이 없어질 이유가 없다.
 
-두 번째 증상도 같은 뿌리다. 팝업이 상자 **바깥**에 있어 그 상자에 잘리지
-않으므로, 트리거가 헤더 밑으로 지나가도 팝업만 헤더 위에 남는다. **위치가
-틀린 것이지 순서가 틀린 게 아니라서 `z-index` 로는 못 고친다** — 헤더를
-올리면 이번엔 목록 윗부분이 잘린다.
+### 예외 하나 — 포커스가 패널 안에 있을 때
 
-닫으면 둘 다 없어진다.
+그때는 **보이지 않는 곳에 커서가 있는** 상태가 된다. 패널이 통째로 잘려
+있는데 거기 포커스가 살아 있고, 자리가 `absolute` 라 브라우저가 스크롤로
+되돌려 주지도 않는다. 이때만 닫고 포커스를 트리거로 돌린다
+(`preventScroll: true` — 사용자가 굴린 자리를 빼앗지 않는다).
 
-> **DS `Layout` 을 쓰면 이 조건에 기본으로 들어간다.**
-> `.lib-xplat-layout` 이 `overflow: hidden` 이고 `.lib-xplat-layout-content`
-> 만 `overflow: auto` 라 페이지가 아예 스크롤되지 않는다.
+키보드로 열어 항목을 오르내리다 굴리는 경우라 흔하지 않다. 마우스로 쓰면
+겪을 일이 없다.
 
-### 쓰는 쪽에서 할 일
-
-**없다.** 다만 「열어 둔 채 스크롤하며 고르는」 흐름이 있었다면 그것만 막힌다.
-목록이 길어 스크롤이 필요하다면 `Select` 의 `searchable` 로 걸러내는 쪽이 낫다.
-
----
+**쓰는 쪽에서 할 일은 없다.**
 
 ## Next.js App Router 에서 반드시 걸리는 것
 
@@ -395,11 +389,28 @@ export { Button, Input, Select, SideBar /* 쓰는 것만 */ } from "@x-plat/desi
 | 안쪽 상자 스크롤 시 닫힘 (0.14.7) | **사람이 화면에서 확인함** |
 | 팝업 목록 안에서 휠 → 안 닫힘 (0.14.7) | **사람이 화면에서 확인함** |
 | 긴 항목 줄바꿈 (0.14.8) | **사람이 화면에서 확인함** — 두세 줄로 떨어진다 |
+| 자리·간격·여는 동안 (0.14.14) | **프레임 단위로 측정함** — 멈춘 상태 간격 8px, 여는 동안 4→8 로 벌어짐, 포커스 링 여유가 한 프레임도 음수가 아님 |
+| 열린 채 스크롤 (0.14.15) | **프레임 단위로 측정함** — 간격이 8px 에서 한 번도 안 흔들림(지연 없음), 헤더 침범 0.0px(경계에 닿되 안 넘음), 트리거가 29px 걸쳤을 때는 열려 있고 0 이 된 뒤 닫힘 |
 | 페이지(문서) 스크롤 시 안 닫힘 (0.14.7) | **확인 안 됨.** 규칙상 맞지만 그 조건의 화면에 고르개가 없어 볼 자리가 없었다 |
 | `Layout` 타입 (0.14.2) | 소비자 흉내 프로젝트로 타입 검사 통과 |
 | `ToggleChip` 커서·초점 테두리 | 마크업·CSS 만 확인. 눌러 본 사람 없음 |
 | Editor | 아래 |
 
+> **재는 범위가 화면과 같은지 먼저 볼 것.** `getBoundingClientRect` 는
+> `outline` 도 `box-shadow` 도 안 친다. 상자만 재면 "겹침 0" 이 나오는데
+> 눈에는 포커스 링이 덮여 보인다 — 0.14.14 가 그 건이다. 상자·링·그림자를
+> 같이 재야 한다.
+>
+> 그리고 포커스 링을 볼 때는 **키보드로 열 것**(`Tab` → `Enter`). 트리거가
+> `div[tabindex]` 라 마우스 클릭에는 `:focus-visible` 이 안 걸린다. 마우스로만
+> 열면 링이 아예 안 떠서 그 항목이 **늘 통과한다.**
+>
+> **읽는 시점이 화면보다 빠르면 그것도 거짓말이다.** 스크롤 뒤 32ms 만에
+> 읽었더니 헤더 침범이 −1.6 → −2.8 → −3.5 로 나왔고 끝까지 안 닫혔다.
+> `clip-path` 갱신과 `IntersectionObserver` 가 아직 안 돈 것이다. 120ms 로
+> 늘리니 침범 0, 제때 닫힘이었다. 재는 **범위**만이 아니라 **시점**도 맞아야
+> 한다.
+>
 > 확인할 때는 **배포가 앉은 뒤에** 볼 것. 한 번은 "안 닫힌다" 로 나왔다가
 > 다시 보니 닫혔다 — 반쯤 배포된 화면이었다. 그리고 버전 번호가 아니라
 > 받은 파일 안을 열어 확인하는 편이 낫다(0.14.1 은 번호만 올라가고 내용이

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.14.14",
+  "version": "0.14.16",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",