@tide-tds/components 0.3.1 → 0.5.0

package/dist/listbox.js

@@ -0,0 +1,90 @@
+"use client";
+
+import { cn } from "./cn.js";
+import { listHeadingClass, listItemClass, listSeparatorClass } from "./list-style.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef } from "react";
+import { CheckIcon } from "@tide-tds/icons";
+import { mergeProps, mergeRefs, useListBoxSection, useOption } from "react-aria";
+
+// src/listbox.tsx
+/**
+* 고른 옵션 끝의 체크 아이콘. 장식용이다(선택은 `aria-selected`가 알린다). 배경(subtle-active)이 지워지는 고대비
+* 모드에서도 고른 옵션이 보이게 한다. 글자와의 간격은 항목의 gap(8px)이고 `ms-auto`로 오른쪽 끝에 붙는다.
+*/
+const checkClass = "ms-auto";
+/**
+* 목록 상태의 옵션·묶음을 그린다. 묶음과 이웃한 옵션·묶음 사이에 장식용 구분선을 둔다. 목록의 처음·끝과 이어진
+* 구분선은 그리지 않는다(Menu와 같다). listbox의 자식은 option·group만 될 수 있어(WAI-ARIA, axe
+* aria-required-children) Menu와 달리 구분선은 `separator` 역할 없이 보조기술에서 숨긴다. 묶음 경계는 group이 알린다.
+*/
+function ListBoxNodes({ state }) {
+	const nodes = [...state.collection];
+	return nodes.map((node, index) => {
+		const previous = nodes[index - 1];
+		const separator = previous !== void 0 && (node.type === "section" || previous.type === "section");
+		const element = node.type === "section" ? /* @__PURE__ */ jsx(ListBoxSectionView, {
+			node,
+			state
+		}, node.key) : /* @__PURE__ */ jsx(ListBoxOptionView, {
+			node,
+			state
+		}, node.key);
+		if (!separator) return element;
+		return [/* @__PURE__ */ jsx("div", {
+			role: "presentation",
+			"aria-hidden": "true",
+			className: listSeparatorClass
+		}, `${String(node.key)}-separator`), element];
+	});
+}
+/** 옵션 하나를 그린다. node.props는 앱이 옵션에 준 props(와 컬렉션이 더한 isDisabled)다. */
+function ListBoxOptionView({ node, state }) {
+	const optionRef = useRef(null);
+	const { ref, className, value: _value, disabled: _disabled, textValue: _textValue, isDisabled: _isDisabled, children: _children, id: _id, ...props } = node.props;
+	const { optionProps, isFocused, isSelected, isDisabled } = useOption({
+		key: node.key,
+		"aria-label": props["aria-label"]
+	}, state, optionRef);
+	const mergedRef = useMemo(() => mergeRefs(ref, optionRef), [ref, optionRef]);
+	const merged = mergeProps(props, optionProps);
+	return /* @__PURE__ */ jsxs("div", {
+		...merged,
+		ref: mergedRef,
+		"aria-labelledby": props["aria-labelledby"],
+		"aria-describedby": props["aria-describedby"],
+		"data-highlighted": isFocused ? "" : void 0,
+		"data-selected": isSelected ? "" : void 0,
+		"data-disabled": isDisabled ? "" : void 0,
+		className: cn(listItemClass, className),
+		children: [node.rendered, isSelected ? /* @__PURE__ */ jsx(CheckIcon, {
+			size: 16,
+			className: checkClass
+		}) : null]
+	});
+}
+/** 묶음 하나를 그린다. 제목은 보조기술에서 숨기고(`presentation`) 묶음의 이름으로만 쓴다(useListBoxSection). */
+function ListBoxSectionView({ node, state }) {
+	const { className } = node.props;
+	const { itemProps, headingProps, groupProps } = useListBoxSection({
+		heading: node.rendered,
+		"aria-label": node["aria-label"]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...itemProps,
+		className,
+		children: [node.rendered != null && /* @__PURE__ */ jsx("div", {
+			...headingProps,
+			className: "px-2 pt-1.5 pb-1 text-label-sm text-muted select-none",
+			children: node.rendered
+		}), /* @__PURE__ */ jsx("div", {
+			...groupProps,
+			children: [...node.childNodes].map((child) => /* @__PURE__ */ jsx(ListBoxOptionView, {
+				node: child,
+				state
+			}, child.key))
+		})]
+	});
+}
+
+export { ListBoxNodes };

package/dist/overlay-style.js

@@ -31,5 +31,54 @@ const popoverMotionClass = [
 	"motion-safe:data-[placement=bottom]:starting:-translate-y-1 motion-safe:data-[placement=top]:starting:translate-y-1",
 	"motion-safe:data-[placement=right]:starting:-translate-x-1 motion-safe:data-[placement=left]:starting:translate-x-1"
 ].join(" ");
+/**
+* 「자주 씀」 오버레이(Tooltip, Menu, Select·Combobox 목록)의 등장·퇴장(spec 「motion 적용」, 티켓 26).
+* 요소에 `data-open`(열림)이 있어야 한다.
+*
+* - 등장: 바로 나타난다. 열린 동안은 `transition-none`이라 퇴장 중에 다시 열려도 바로 불투명해진다.
+*   새로 넣은 요소는 이전 스타일이 없어 전환이 생기지 않으므로 `starting:`도 두지 않는다.
+* - 퇴장: `data-open`이 빠지면 opacity만 `fast`(150ms), out으로 사라진다. 전환 대상은 opacity와 display다.
+*   duration·전환 대상은 도착 상태의 값을 쓰므로 닫힌 상태에서만 전환이 있다.
+* - 닫힌 상태는 `display: none`(`hidden`)이고 `transition-discrete`로 퇴장이 끝날 때 사라진다(popoverMotionClass와 같다).
+*   DOM에서 빼는 시점은 `useOverlayPresence`가 정한다. 퇴장 중에는 `pointer-events-none`이다.
+* - reduced-motion: 이동·blur·확대가 없으므로 바꿀 것이 없다. opacity 전환은 그대로 둔다.
+*/
+const frequentMotionClass = ["transition-[opacity,display] transition-discrete duration-fast ease-out data-open:transition-none", "not-data-open:pointer-events-none not-data-open:hidden not-data-open:opacity-0"].join(" ");
+/**
+* Dialog류(Dialog, AlertDialog) 표면(spec radius·Elevation, 티켓 30). 가운데에 뜨는 모달이라 트리거에 붙는
+* 오버레이보다 한 단계 높다. raised 표면(`bg-raised`), `shadow-lg`, radius `xl`, 경계 `border-raised`.
+* 글자·경계·forced-colors 처리는 `overlaySurfaceClass`와 같다(`text-default × bg-raised` 4.5:1 등록, `border-raised`는 장식용).
+*/
+const dialogSurfaceClass = "rounded-xl border border-raised bg-raised text-default shadow-lg";
+/**
+* 모달 뒤를 가리는 반투명 막(backdrop, `bg-overlay`)의 등장·퇴장(티켓 30). 요소에 `data-open`이 있어야 한다.
+*
+* - 등장: `starting:`에서 opacity 0으로 시작해 `normal`(300ms)로 나타난다. 퇴장: `data-open`이 빠지면 `fast`(150ms)로 사라진다.
+* - 닫힌 상태는 `display: none`(`hidden`) + `transition-discrete`로 퇴장이 끝날 때 사라지고, 퇴장 중에는
+*   `pointer-events-none`이다(popoverMotionClass와 같은 구조). 안의 Dialog도 이 값을 물려받아 눌리지 않는다.
+* - opacity만 바뀌므로 움직임 줄이기에서도 같다.
+* - `useOverlayPresence`는 이 요소(막)의 전환이 끝나기를 기다린다. 안의 Dialog 전환(`dialogMotionClass`)도 같은
+*   duration이라 함께 끝난다.
+*/
+const backdropMotionClass = [
+	"transition-[opacity,display] transition-discrete duration-fast ease-out data-open:duration-normal",
+	"not-data-open:pointer-events-none not-data-open:hidden not-data-open:opacity-0",
+	"starting:opacity-0"
+].join(" ");
+/**
+* Dialog류의 등장·퇴장(spec 「motion 적용」 「가끔 씀」 Dialog류, 티켓 30). 요소에 `data-open`이 있어야 한다.
+*
+* - 등장: `starting:`에서 opacity 0 + scale 0.96(`scale-96`)으로 시작해 `normal`(300ms), out으로 제자리에 온다.
+* - 퇴장: `data-open`이 빠지면 같은 조합을 약하게(scale 0.98, `scale-98`) `fast`(150ms)로 사라진다.
+*   duration은 도착 상태의 값을 쓰므로 기본 `duration-fast`에 열림만 `data-open:duration-normal`이다.
+* - 화면에서 빼는 일(display)은 바깥 막(`backdropMotionClass`)이 한다. 이 요소는 opacity·scale만 전환한다.
+* - reduced-motion: 확대(scale)와 그 전환 대상은 `motion-safe:`일 때만 둔다. 움직임 줄이기에서는 opacity만 바뀐다.
+* - `transition-all`은 쓰지 않는다.
+*/
+const dialogMotionClass = [
+	"transition-[opacity] duration-fast ease-out data-open:duration-normal motion-safe:transition-[opacity,scale]",
+	"not-data-open:opacity-0 motion-safe:not-data-open:scale-98",
+	"starting:opacity-0 motion-safe:starting:scale-96"
+].join(" ");
 
-export { overlaySurfaceClass, popoverMotionClass };
+export { backdropMotionClass, dialogMotionClass, dialogSurfaceClass, frequentMotionClass, overlaySurfaceClass, popoverMotionClass };

package/dist/overlay.js

@@ -1,7 +1,7 @@
 "use client";
 
 import { jsx } from "react/jsx-runtime";
-import { useLayoutEffect, useState } from "react";
+import { useEffect, useLayoutEffect, useState } from "react";
 import { Overlay, usePopover } from "react-aria";
 
 // src/overlay.tsx
@@ -92,15 +92,39 @@ function useOverlayTheme(triggerRef, overlayRef) {
 	}, [triggerRef, overlayRef]);
 }
 /**
+* 오버레이 안에서 Tab을 누르면 기본 동작을 막고 닫는다(포커스는 `OverlayPortal`의 FocusScope가 트리거로 돌린다).
+* 목록 오버레이(Menu, Select)가 쓴다(WAI-ARIA APG Menu Button·Select-Only Combobox: Tab은 목록을 닫는다).
+*
+* React Aria 목록 hook(useMenu·useListBox)은 Tab으로 닫지 않고, 항목의 keydown 처리가 전파를 멈추며 FocusScope가
+* document capture에서 Tab을 먼저 다룬다. 열린 동안 바깥은 inert라 브라우저 기본 Tab은 갈 곳이 없다. 그래서 그보다
+* 앞인 window capture에서 받는다(티켓 27에서 Menu 안에 두었다가 티켓 28에서 이곳으로 옮겼다).
+* 전파도 멈춘다. listbox(useListBox 안의 useSelectableCollection)는 Tab에서 포커스를 목록 안 요소로 옮기는데, 그러면
+* 닫힌 뒤 포커스가 트리거로 돌아오지 않았다(Select 테스트로 확인).
+*/
+function useCloseOnTab(overlayRef, close) {
+	useEffect(() => {
+		const onKeyDown = (event) => {
+			if (event.key !== "Tab" || !overlayRef.current?.contains(event.target)) return;
+			event.preventDefault();
+			event.stopPropagation();
+			close();
+		};
+		window.addEventListener("keydown", onKeyDown, true);
+		return () => window.removeEventListener("keydown", onKeyDown, true);
+	}, [close, overlayRef]);
+}
+/**
 * 오버레이를 `document.body`에 portal한다(React Aria `Overlay`). top-layer(`<dialog>`, popover API)는 쓰지 않는다.
 * 안을 `FocusScope`(`restoreFocus`)로 감싸서, DOM에서 빠질 때 포커스가 열기 전 요소(보통 트리거)로 돌아간다.
 * 역할 hook이 포커스 가두기를 요청하면(`useDialog` 등) Tab이 안에서 돈다. 서버 렌더에서는 아무것도 그리지 않는다.
+* `focusManagement={false}`면 FocusScope 없이 portal만 한다(Tooltip).
 */
-function OverlayPortal({ isExiting, children }) {
+function OverlayPortal({ isExiting, focusManagement = true, children }) {
 	return /* @__PURE__ */ jsx(Overlay, {
 		isExiting,
+		disableFocusManagement: !focusManagement,
 		children
 	});
 }
 
-export { OverlayPortal, overlayPositionProps, useOverlayPresence, useOverlayTheme, usePopoverOverlay };
+export { OverlayPortal, overlayPositionProps, useCloseOnTab, useOverlayPresence, useOverlayTheme, usePopoverOverlay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tide-tds/components",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "description": "Tide 디자인 시스템의 React Component",
   "license": "MIT",
   "repository": {
@@ -23,8 +23,8 @@
     "./styles.css": "./dist/styles.css"
   },
   "dependencies": {
-    "@tide-tds/foundation": "0.3.1",
-    "@tide-tds/icons": "0.3.1",
+    "@tide-tds/foundation": "0.5.0",
+    "@tide-tds/icons": "0.5.0",
     "clsx": "^2.1.1",
     "react-aria": "^3.53.1",
     "react-stately": "^3.51.0",