@bigtablet/design-system 3.17.3 → 3.18.0

package/dist/index.css

@@ -1060,8 +1060,7 @@ body:has(.bottom_nav) {
   display: inline-flex;
 }
 .menu {
-  position: absolute;
-  top: calc(100% + 4px);
+  position: fixed;
   z-index: 1000;
   min-width: 180px;
   background: var(--bt-color-bg-solid);
@@ -1079,12 +1078,6 @@ body:has(.bottom_nav) {
     background: var(--bt-color-bg-solid-dim);
   }
 }
-.menu_align_start {
-  left: 0;
-}
-.menu_align_end {
-  right: 0;
-}
 .menu_item {
   display: flex;
   align-items: center;
@@ -2868,7 +2861,7 @@ body:has(.bottom_nav) {
   background: color-mix(in srgb, var(--bt-color-status-error) 76%, #121212);
 }
 .button_danger.button_variant_outline {
-  color: var(--bt-color-status-error);
+  color: var(--bt-color-status-error-on-surface);
   border-color: var(--bt-color-status-error);
 }
 .button_danger.button_variant_outline:hover:not(:disabled) {
@@ -2879,13 +2872,13 @@ body:has(.bottom_nav) {
 }
 .button_danger.button_variant_tonal {
   background: color-mix(in srgb, var(--bt-color-status-error) 12%, transparent);
-  color: var(--bt-color-status-error);
+  color: var(--bt-color-status-error-on-surface);
 }
 .button_danger.button_variant_tonal:hover:not(:disabled) {
   background: color-mix(in srgb, var(--bt-color-status-error) 18%, transparent);
 }
 .button_danger.button_variant_text {
-  color: var(--bt-color-status-error);
+  color: var(--bt-color-status-error-on-surface);
 }
 .button_danger.button_variant_text:hover:not(:disabled) {
   background: color-mix(in srgb, var(--bt-color-status-error) 8%, transparent);
@@ -4769,13 +4762,9 @@ body:has(.bottom_nav) {
   padding: 12px 16px;
 }
 .combobox_panel {
-  position: absolute;
+  position: fixed;
   z-index: 1000;
-  top: 100%;
-  left: 0;
-  width: 100%;
   box-sizing: border-box;
-  margin-top: 4px;
   background: var(--bt-color-bg-solid);
   border: 1px solid var(--bt-color-border-default);
   border-radius: 12px;
@@ -4790,12 +4779,6 @@ body:has(.bottom_nav) {
     background: var(--bt-color-bg-solid-dim);
   }
 }
-.combobox_panel_up {
-  top: auto;
-  bottom: 100%;
-  margin-top: 0;
-  margin-bottom: 4px;
-}
 .combobox_list {
   max-height: 18rem;
   overflow-y: auto;
@@ -5024,13 +5007,9 @@ body:has(.bottom_nav) {
   transform: rotate(180deg);
 }
 .dropdown_list {
-  position: absolute;
+  position: fixed;
   z-index: 1000;
-  top: 100%;
-  left: 0;
-  width: 100%;
   box-sizing: border-box;
-  margin-top: 4px;
   background: var(--bt-color-bg-solid);
   border: 1px solid var(--bt-color-border-default);
   border-radius: 12px;
@@ -5048,12 +5027,6 @@ body:has(.bottom_nav) {
 .dropdown_list {
   will-change: transform, opacity;
 }
-.dropdown_list_up {
-  top: auto;
-  bottom: 100%;
-  margin-top: 0;
-  margin-bottom: 4px;
-}
 .dropdown_search {
   display: flex;
   align-items: center;

package/dist/index.d.ts

@@ -121,13 +121,15 @@ declare function useSpringHover({ scale, lift, }?: {
  * return <animated.div style={style}>...</animated.div>;
  * ```
  */
-declare function useSpringPresence({ visible, from, onExitComplete, }: {
+declare function useSpringPresence({ visible, from, onExitComplete, onProgress, }: {
     /** 보이는 상태인지 - false면 사라짐 모션 */
     visible: boolean;
     /** 진입 시 시작 transform (기본: 아래에서 살짝 올라옴) */
     from?: string;
     /** exit 모션 완료 시 호출 - 부모에서 unmount 트리거용 */
     onExitComplete?: () => void;
+    /** 프레임마다 현재 opacity(0~1). 오버레이가 잠금에 딤 진행도를 보고할 때 쓴다(#583). */
+    onProgress?: (progress: number) => void;
 }): {
     opacity: _react_spring_web.SpringValue<number>;
     transform: _react_spring_web.SpringValue<string>;
@@ -156,12 +158,37 @@ interface UseListboxPopupArgs<T extends ListboxItem> {
 interface UseListboxPopupResult {
     isOpen: boolean;
     setIsOpen: React$1.Dispatch<React$1.SetStateAction<boolean>>;
-    /** 위로 열릴지 - 아래 공간이 모자랄 때만 true */
+    /** 위로 열릴지 - 배치가 `top` 으로 flip 됐을 때 true */
     dropUp: boolean;
+    /**
+     * 팝업을 **포탈로** 띄울 때 쓰는 fixed 좌표·폭. 목록을 트리거 옆에 `position: absolute` 로
+     * 두면 `overflow: hidden` 인 조상(카드·표 래퍼)이 잘라낸다 - `z-index` 로는 넘지 못한다.
+     * 실측(#586) - `overflow: hidden` 카드 안에서 170px 목록 중 46px 만 보였다.
+     */
+    position: {
+        /** fixed left(px) */
+        x: number;
+        /** fixed top(px) */
+        y: number;
+        /** 트리거 폭(px) - 포탈에서는 `width: 100%` 가 트리거를 가리키지 않는다 */
+        width: number;
+        /**
+         * 뷰포트 가용 폭 상한(px). 트리거가 뷰포트보다 넓으면(좁은 화면의 넓은 폼) 배치는
+         * 이 값으로 좌표를 잡는데 패널 폭을 트리거 폭으로 두면 오른쪽이 잘린다.
+         */
+        maxWidth: number;
+        /** 최초 측정 전에는 false - 이때 숨겨 (0,0) 깜빡임을 막는다 */
+        ready: boolean;
+    };
     activeIndex: number;
     setActiveIndex: React$1.Dispatch<React$1.SetStateAction<number>>;
     /** 바깥 클릭 감지 기준. 트리거와 패널을 함께 감싸는 요소에 붙인다 */
     wrapperRef: React$1.RefObject<HTMLDivElement | null>;
+    /**
+     * 팝업 패널 전체. 배치 계산이 이 요소를 잰다 - `listRef` 는 스크롤 컨테이너라 검색바를
+     * 빼고 재게 되고, 그러면 flip 판정과 `top` 배치가 그만큼 어긋난다.
+     */
+    panelRef: React$1.RefObject<HTMLDivElement | null>;
     /** 트리거 요소. 닫을 때 포커스를 되돌릴 대상 */
     triggerRef: React$1.RefObject<HTMLButtonElement | null>;
     /**
@@ -526,6 +553,17 @@ interface BreadcrumbItem {
     href?: string;
     /** 클릭 콜백 (href 없이 사용 가능) */
     onClick?: (e: React$1.MouseEvent<HTMLElement>) => void;
+    /**
+     * 링크를 렌더할 요소. 라우터 `Link`(`next/link` 등)를 끼울 때 쓴다.
+     *
+     * `onClick` 에서 `preventDefault` + `router.push` 로도 되지만, 그러면 수정자 클릭
+     * (`cmd`/`ctrl`/`shift`)과 새 탭 열기가 죽어 소비처마다 그 검사를 다시 써야 하고
+     * 프리페치·이동 가드처럼 `Link` 만 아는 것들은 표현할 수 없다.
+     *
+     * 마지막 항목(현재 페이지)에는 적용되지 않는다 - 그건 링크가 아니라 `aria-current` 텍스트다.
+     * `href` 없이 주면 무시된다(그 항목은 `<button>` 이다).
+     */
+    as?: React$1.ElementType;
 }
 interface BreadcrumbProps extends React$1.HTMLAttributes<HTMLElement> {
     /** 경로 아이템 배열. 마지막은 현재 페이지로 간주 */
@@ -567,21 +605,6 @@ interface MenuProps {
     /** 정렬 (기본 "start") */
     align?: "start" | "end";
 }
-/**
- * 컨텍스트 메뉴. trigger 클릭 시 아래에 메뉴 표시. 외부 클릭/Esc로 닫힘.
- * Form Dropdown과 다름 - 액션 메뉴 (Edit/Delete 등).
- *
- * @example
- * ```tsx
- * <Menu
- *   trigger={<IconButton icon={<MoreIcon />} aria-label="더보기" />}
- *   items={[
- *     { key: "edit", label: "편집", onSelect: handleEdit },
- *     { key: "del", label: "삭제", onSelect: handleDel, destructive: true },
- *   ]}
- * />
- * ```
- */
 declare const Menu: ({ items, trigger, align }: MenuProps) => React$1.JSX.Element;
 
 type NavBarVariant = "default" | "transparent" | "accent";
@@ -654,11 +677,17 @@ interface NavBarProps extends React$1.HTMLAttributes<HTMLElement> {
  * ```
  */
 declare const NavBar: ({ brand, searchSlot, actions, locale, profile, divider, variant, layout, sticky, className, children, ...props }: NavBarProps) => React$1.JSX.Element;
-interface NavLinkProps extends React$1.AnchorHTMLAttributes<HTMLAnchorElement> {
+interface NavLinkCommon {
     /** 현재 활성 페이지 여부 */
     active?: boolean;
 }
-declare const NavLink: ({ active, className, children, ...props }: NavLinkProps) => React$1.JSX.Element;
+/**
+ * `AnchorHTMLAttributes` 고정이던 것을 다형성으로 열었다 - 라우터 `Link`(`next/link` 등)를
+ * 끼우려면 `onClick` 우회로는 부족하다(수정자 클릭·프리페치·이동 가드). Button·SidebarItem 과
+ * 같은 `as` 계약이다. 기본값은 `"a"` 라 기존 사용처는 그대로다.
+ */
+type NavLinkProps<T extends React$1.ElementType = "a"> = PolymorphicProps<T, NavLinkCommon>;
+declare const NavLink: <T extends React$1.ElementType = "a">(props: NavLinkProps<T>) => React$1.JSX.Element;
 
 type SidebarMode = "auto" | "static";
 interface SidebarProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onChange"> {