sellmate-design-system-react 0.8.0 → 0.8.2

package/dist/components/SPortal/SPortal.cjs

@@ -80,6 +80,7 @@ function SPortal({
   viewportPadding = 0,
   onOpenAutoFocus,
   onCloseAutoFocus,
+  onPointerDownOutside,
   children,
   className,
   style,
@@ -108,7 +109,9 @@ function SPortal({
             onPointerDownOutside: (e) => {
               if (persistent || anchorRef.current?.contains(e.target)) {
                 e.preventDefault();
+                return;
               }
+              onPointerDownOutside?.(e);
             },
             onFocusOutside: (e) => {
               if (persistent || anchorRef.current?.contains(e.target)) {

package/dist/components/SPortal/SPortal.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/lib/floating-anim.ts","../../../src/lib/portal-container.tsx","../../../src/components/SPortal/SPortal.tsx"],"names":["extendTailwindMerge","clsx","createContext","useContext","jsxs","RPopover","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,IAAM,UAAUA,iCAAA,CAAoB;AAAA,EAClC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,aAAa,CAAC,EAAE,IAAA,EAAM,CAAC,MAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAI,GAAG;AAAA;AAC5F;AAEJ,CAAC,CAAA;AAMM,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;;;ACXO,IAAM,mBAAA,GAAsB;AAAA,EACjC,2DAAA;AAAA,EACA,mEAAA;AAAA,EACA,mEAAA;AAAA,EACA,8DAAA;AAAA,EACA,iEAAA;AAAA,EACA,yEAAA;AAAA,EACA,yEAAA;AAAA,EACA,oEAAA;AAAA,EACA,6DAAA;AAAA,EACA,qEAAA;AAAA,EACA,qEAAA;AAAA,EACA,gEAAA;AAAA,EACA,+DAAA;AAAA,EACA,uEAAA;AAAA,EACA,uEAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,GAAG,CAAA;ACdV,IAAM,sBAAA,GAAyBC,oBAAkC,IAAI,CAAA;AACrE,IAAM,kBAAA,GAAqBA,oBAAc,KAAK,CAAA;AAEP,sBAAA,CAAuB;AAC3B,kBAAA,CAAmB;AAO/C,SAAS,kBAAA,GAA8C;AAC5D,EAAA,OAAOC,gBAAA,CAAW,sBAAsB,CAAA,IAAK,MAAA;AAC/C;ACmCO,SAAS,OAAA,CAAQ;AAAA,EACtB,IAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,QAAA;AAAA,EACZ,KAAA,GAAQ,OAAA;AAAA,EACR,MAAA,GAAS,CAAA;AAAA,EACT,WAAA,GAAc,CAAA;AAAA,EACd,GAAA,GAAM,KAAA;AAAA,EACN,SAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,UAAA,GAAa,KAAA;AAAA,EACb,eAAA,GAAkB,CAAA;AAAA,EAClB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAAiB;AACf,EAAA,MAAM,kBAAkB,kBAAA,EAAmB;AAE3C,EAAA,uBACEC,eAAA;AAAA,IAAUC,mBAAA,CAAA,IAAA;AAAA,IAAT;AAAA,MACC,IAAA;AAAA,MACA,cAAc,CAAA,IAAA,KAAQ;AACpB,QAAA,YAAA,GAAe,IAAI,CAAA;AACnB,QAAA,IAAI,CAAC,MAAM,OAAA,IAAU;AAAA,MACvB,CAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAUD,mBAAA,CAAA,MAAA,EAAT,EAAgB,UAAA,EAAY,SAAA,EAAoC,CAAA;AAAA,wBACjEC,cAAA,CAAUD,mBAAA,CAAA,MAAA,EAAT,EAAgB,SAAA,EAAW,eAAA,EAC1B,QAAA,kBAAAC,cAAA;AAAA,UAAUD,mBAAA,CAAA,OAAA;AAAA,UAAT;AAAA,YACC,IAAA,EAAM,SAAA;AAAA,YACN,KAAA;AAAA,YACA,UAAA,EAAY,MAAA;AAAA,YACZ,WAAA;AAAA,YACA,gBAAA,EAAkB,eAAA;AAAA,YAClB,YAAA,EAAY,SAAA;AAAA,YAGZ,sBAAsB,CAAA,CAAA,KAAK;AACzB,cAAA,IAAI,cAAc,SAAA,CAAU,OAAA,EAAS,QAAA,CAAS,CAAA,CAAE,MAAc,CAAA,EAAG;AAC/D,gBAAA,CAAA,CAAE,cAAA,EAAe;AAAA,cACnB;AAAA,YACF,CAAA;AAAA,YAGA,gBAAgB,CAAA,CAAA,KAAK;AACnB,cAAA,IAAI,cAAc,SAAA,CAAU,OAAA,EAAS,QAAA,CAAS,CAAA,CAAE,MAAc,CAAA,EAAG;AAC/D,gBAAA,CAAA,CAAE,cAAA,EAAe;AAAA,cACnB;AAAA,YACF,CAAA;AAAA,YACA,eAAA,EAAiB,UAAA,GAAa,CAAA,CAAA,KAAK,CAAA,CAAE,gBAAe,GAAI,MAAA;AAAA,YACxD,eAAA;AAAA,YACA,gBAAA;AAAA,YACA,OAAA,EAAS,SAAA,GAAY,MAAM,OAAA,IAAU,GAAI,MAAA;AAAA,YACzC,SAAA,EAAW,EAAA;AAAA,cACT,4FAAA;AAAA,cACA,aAAa,IAAA,IAAQ,iBAAA;AAAA,cACrB,GAAA,IAAO,uCAAA;AAAA,cACP,mBAAA;AAAA,cACA;AAAA,aACF;AAAA,YACA,KAAA,EAAO,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM;AAAA,YAE5B;AAAA;AAAA,SACH,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"SPortal.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * Radix Floating(SPopover/STooltip/RTooltip) Content 의 placement 방향별 슬라이드+페이드.\n * Radix 가 붙이는 data-side(실제 렌더 방향)·data-state 에 맞춰 열림/닫힘 애니메이션을 적용한다.\n * (sd-floating-portal 의 sd-floating-slide-* 포팅 — 키프레임은 theme.css `--animate-floating-*`)\n *\n * 예: side=top 이면 아래(4px)에서 위로 올라오며 나타나고, 닫힐 때 다시 내려가며 사라진다.\n *\n * @radix-ui/react-popover · react-dropdown-menu 의 data-state 는 open/closed 지만,\n * @radix-ui/react-tooltip 은 open 대신 delayed-open/instant-open 을 쓴다 — 두 케이스 모두 커버한다.\n * Tailwind JIT는 소스에 리터럴로 등장하는 클래스명만 스캔하므로 템플릿으로 조합하지 않고 전부 나열한다.\n */\nexport const FLOATING_SLIDE_ANIM = [\n  'data-[state=open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=delayed-open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=instant-open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=closed]:data-[side=top]:animate-floating-out-top',\n  'data-[state=open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom',\n  'data-[state=open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=delayed-open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=instant-open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=closed]:data-[side=left]:animate-floating-out-left',\n  'data-[state=open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=delayed-open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=instant-open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=closed]:data-[side=right]:animate-floating-out-right',\n].join(' ');\n","'use client';\n\nimport { createContext, useContext } from 'react';\n\n/**\n * Floating 컴포넌트(STooltip/SPopover/SSelect listbox/SDropdownButton/SDatePicker 등)가\n * 자신의 Portal 을 어디로 렌더할지 결정하는 컨텍스트.\n *\n * 기본값(null)이면 각 컴포넌트는 body 로 portal 한다.\n * SModalContainer 는 모달이 열려있는 동안 이 값을 \"모달 스태킹 밴드(z-1001) 안의 전용 노드\"로\n * 채워서, 모달 안에서 열린 floating 이 모달 딤(z-1000) 뒤에 가려지지 않고 위로 뜨게 한다.\n * 반대로 모달 밖(베이스 화면)에서 열린 floating 은 여전히 body(z-50)로 나가므로,\n * 나중에 뜬 모달이 정상적으로 그 위를 덮는다. (소속에 따라 상대적으로 결정)\n */\nconst PortalContainerContext = createContext<HTMLElement | null>(null);\nconst InsideModalContext = createContext(false);\n\nexport const PortalContainerProvider = PortalContainerContext.Provider;\nexport const InsideModalProvider = InsideModalContext.Provider;\n\n/**\n * 현재 소속된 Portal 컨테이너를 반환한다.\n * Radix `*.Portal` 의 `container`, Ariakit 의 `portalElement` 에 그대로 넘기면 되며,\n * 컨테이너가 없을 때(모달 밖)는 `undefined` 를 반환해 각 라이브러리 기본값(body)을 쓴다.\n */\nexport function usePortalContainer(): HTMLElement | undefined {\n  return useContext(PortalContainerContext) ?? undefined;\n}\n\n/**\n * 현재 floating 이 모달 내부 컨텍스트에서 렌더링되는지 반환한다.\n * portal target ref 가 아직 준비되지 않은 첫 렌더에서도 true를 유지해\n * 모달 내부 전용 우회 로직이 깜빡이지 않도록 한다.\n */\nexport function useInsideModal(): boolean {\n  return useContext(InsideModalContext);\n}\n","'use client';\n\nimport { type CSSProperties, type ReactNode, type RefObject } from 'react';\nimport * as RPopover from '@radix-ui/react-popover';\nimport { cn } from '../../lib/cn';\nimport { FLOATING_SLIDE_ANIM } from '../../lib/floating-anim';\nimport { usePortalContainer } from '../../lib/portal-container';\n\nexport type SPortalPlacement = 'top' | 'bottom' | 'left' | 'right';\nexport type SPortalAlign = 'start' | 'center' | 'end';\n\n/** Radix Anchor 가 위치 계산에 쓰는 최소 인터페이스 (HTMLElement 가 충족한다). */\ntype Measurable = { getBoundingClientRect(): DOMRect };\n\nexport interface SPortalProps {\n  /** 표시 여부 (제어). onClose 와 함께 사용한다. */\n  open: boolean;\n  /** 외부 클릭 · ESC 등으로 닫힘이 요청될 때 (sd-portal `sdClose` 대응). */\n  onClose?: () => void;\n  /** 열림/닫힘 변경 전체 콜백 (선택). */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * 위치 기준이 되는 앵커 엘리먼트 ref (sd-portal `parentRef` 대응).\n   * 트리거 버튼 등에 그대로 걸면 그 엘리먼트에 붙어서 뜬다.\n   */\n  anchorRef: RefObject<HTMLElement | null>;\n  /** 표시 방향 (공간이 부족하면 자동으로 반대 방향으로 전환). */\n  placement?: SPortalPlacement;\n  /** 교차축 정렬 (start·center·end). */\n  align?: SPortalAlign;\n  /** 앵커로부터의 간격 px (sd-portal offset[1]). */\n  offset?: number;\n  /** 정렬축 오프셋 px (sd-portal offset[0]). */\n  alignOffset?: number;\n  /** 앵커 너비에 맞춰 최소 너비를 잡는다. */\n  fit?: boolean;\n  /** 콘텐츠 최대 높이 px. 넘치면 세로 스크롤. */\n  maxHeight?: number;\n  /** 콘텐츠 내부를 클릭하면 자동으로 닫는다. */\n  autoClose?: boolean;\n  /** 외부 클릭 · ESC 로 닫히지 않게 한다. */\n  persistent?: boolean;\n  /** 뷰포트 경계 여백 px (충돌 회피 패딩). */\n  viewportPadding?: number;\n  /** 열릴 때 포커스 이동 처리 (기본은 Radix가 콘텐츠로 포커스를 옮김). e.preventDefault()로 막을 수 있다. */\n  onOpenAutoFocus?: (event: Event) => void;\n  /** 닫힐 때 포커스 복귀 처리 (기본은 Radix가 앵커로 포커스를 되돌림). e.preventDefault()로 막을 수 있다. */\n  onCloseAutoFocus?: (event: Event) => void;\n  /** 본문 내용 (콘텐츠 자유). */\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n  ariaLabel?: string;\n}\n\n/**\n * SPortal — sd-portal/sd-floating-portal 의 사용성을 Radix Popover 로 옮긴 범용 앵커드 플로팅 컨테이너.\n *\n * 트리거를 감싸지 않고 `anchorRef` 로 임의의 엘리먼트에 붙는다(=sd-portal `parentRef`).\n * open/onClose 로 외부에서 제어하며, flip·collision·스크롤 재배치·외부클릭·ESC·모달 포털은\n * Radix 가 처리한다. 콘텐츠는 children 으로 완전히 자유롭다.\n */\nexport function SPortal({\n  open,\n  onClose,\n  onOpenChange,\n  anchorRef,\n  placement = 'bottom',\n  align = 'start',\n  offset = 4,\n  alignOffset = 0,\n  fit = false,\n  maxHeight,\n  autoClose = false,\n  persistent = false,\n  viewportPadding = 0,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  children,\n  className,\n  style,\n  ariaLabel,\n}: SPortalProps) {\n  const portalContainer = usePortalContainer();\n\n  return (\n    <RPopover.Root\n      open={open}\n      onOpenChange={next => {\n        onOpenChange?.(next);\n        if (!next) onClose?.();\n      }}\n    >\n      <RPopover.Anchor virtualRef={anchorRef as RefObject<Measurable>} />\n      <RPopover.Portal container={portalContainer}>\n        <RPopover.Content\n          side={placement}\n          align={align}\n          sideOffset={offset}\n          alignOffset={alignOffset}\n          collisionPadding={viewportPadding}\n          aria-label={ariaLabel}\n          // persistent: 외부 클릭·ESC 로 닫히지 않음\n          // 아니면: 앵커(트리거) 위 클릭은 소비자가 토글하므로 여기서 닫지 않는다(중복 토글 방지)\n          onPointerDownOutside={e => {\n            if (persistent || anchorRef.current?.contains(e.target as Node)) {\n              e.preventDefault();\n            }\n          }}\n          // 앵커(예: input)에 이미 포커스가 있는 상태로 열리는 경우(클릭 즉시 오픈), Radix는 포커스가\n          // 레이어 밖에 있다고 판단해 열리자마자 닫아버린다 — 앵커 내부 포커스는 outside로 취급하지 않는다.\n          onFocusOutside={e => {\n            if (persistent || anchorRef.current?.contains(e.target as Node)) {\n              e.preventDefault();\n            }\n          }}\n          onEscapeKeyDown={persistent ? e => e.preventDefault() : undefined}\n          onOpenAutoFocus={onOpenAutoFocus}\n          onCloseAutoFocus={onCloseAutoFocus}\n          onClick={autoClose ? () => onClose?.() : undefined}\n          className={cn(\n            'z-50 overflow-hidden rounded-(--cmp-listBox-radius) bg-(--cmp-listBox-bg) shadow-normal-sm',\n            maxHeight != null && 'overflow-y-auto',\n            fit && 'min-w-(--radix-popover-trigger-width)',\n            FLOATING_SLIDE_ANIM,\n            className,\n          )}\n          style={{ maxHeight, ...style }}\n        >\n          {children}\n        </RPopover.Content>\n      </RPopover.Portal>\n    </RPopover.Root>\n  );\n}\n\nSPortal.displayName = 'SPortal';\n"]}
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/lib/floating-anim.ts","../../../src/lib/portal-container.tsx","../../../src/components/SPortal/SPortal.tsx"],"names":["extendTailwindMerge","clsx","createContext","useContext","jsxs","RPopover","jsx"],"mappings":"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","file":"SPortal.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * Radix Floating(SPopover/STooltip/RTooltip) Content 의 placement 방향별 슬라이드+페이드.\n * Radix 가 붙이는 data-side(실제 렌더 방향)·data-state 에 맞춰 열림/닫힘 애니메이션을 적용한다.\n * (sd-floating-portal 의 sd-floating-slide-* 포팅 — 키프레임은 theme.css `--animate-floating-*`)\n *\n * 예: side=top 이면 아래(4px)에서 위로 올라오며 나타나고, 닫힐 때 다시 내려가며 사라진다.\n *\n * @radix-ui/react-popover · react-dropdown-menu 의 data-state 는 open/closed 지만,\n * @radix-ui/react-tooltip 은 open 대신 delayed-open/instant-open 을 쓴다 — 두 케이스 모두 커버한다.\n * Tailwind JIT는 소스에 리터럴로 등장하는 클래스명만 스캔하므로 템플릿으로 조합하지 않고 전부 나열한다.\n */\nexport const FLOATING_SLIDE_ANIM = [\n  'data-[state=open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=delayed-open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=instant-open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=closed]:data-[side=top]:animate-floating-out-top',\n  'data-[state=open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom',\n  'data-[state=open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=delayed-open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=instant-open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=closed]:data-[side=left]:animate-floating-out-left',\n  'data-[state=open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=delayed-open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=instant-open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=closed]:data-[side=right]:animate-floating-out-right',\n].join(' ');\n","'use client';\n\nimport { createContext, useContext } from 'react';\n\n/**\n * Floating 컴포넌트(STooltip/SPopover/SSelect listbox/SDropdownButton/SDatePicker 등)가\n * 자신의 Portal 을 어디로 렌더할지 결정하는 컨텍스트.\n *\n * 기본값(null)이면 각 컴포넌트는 body 로 portal 한다.\n * SModalContainer 는 모달이 열려있는 동안 이 값을 \"모달 스태킹 밴드(z-1001) 안의 전용 노드\"로\n * 채워서, 모달 안에서 열린 floating 이 모달 딤(z-1000) 뒤에 가려지지 않고 위로 뜨게 한다.\n * 반대로 모달 밖(베이스 화면)에서 열린 floating 은 여전히 body(z-50)로 나가므로,\n * 나중에 뜬 모달이 정상적으로 그 위를 덮는다. (소속에 따라 상대적으로 결정)\n */\nconst PortalContainerContext = createContext<HTMLElement | null>(null);\nconst InsideModalContext = createContext(false);\n\nexport const PortalContainerProvider = PortalContainerContext.Provider;\nexport const InsideModalProvider = InsideModalContext.Provider;\n\n/**\n * 현재 소속된 Portal 컨테이너를 반환한다.\n * Radix `*.Portal` 의 `container`, Ariakit 의 `portalElement` 에 그대로 넘기면 되며,\n * 컨테이너가 없을 때(모달 밖)는 `undefined` 를 반환해 각 라이브러리 기본값(body)을 쓴다.\n */\nexport function usePortalContainer(): HTMLElement | undefined {\n  return useContext(PortalContainerContext) ?? undefined;\n}\n\n/**\n * 현재 floating 이 모달 내부 컨텍스트에서 렌더링되는지 반환한다.\n * portal target ref 가 아직 준비되지 않은 첫 렌더에서도 true를 유지해\n * 모달 내부 전용 우회 로직이 깜빡이지 않도록 한다.\n */\nexport function useInsideModal(): boolean {\n  return useContext(InsideModalContext);\n}\n","'use client';\n\nimport { type CSSProperties, type ReactNode, type RefObject } from 'react';\nimport * as RPopover from '@radix-ui/react-popover';\nimport { cn } from '../../lib/cn';\nimport { FLOATING_SLIDE_ANIM } from '../../lib/floating-anim';\nimport { usePortalContainer } from '../../lib/portal-container';\n\nexport type SPortalPlacement = 'top' | 'bottom' | 'left' | 'right';\nexport type SPortalAlign = 'start' | 'center' | 'end';\n\n/** Radix Anchor 가 위치 계산에 쓰는 최소 인터페이스 (HTMLElement 가 충족한다). */\ntype Measurable = { getBoundingClientRect(): DOMRect };\n\nexport interface SPortalProps {\n  /** 표시 여부 (제어). onClose 와 함께 사용한다. */\n  open: boolean;\n  /** 외부 클릭 · ESC 등으로 닫힘이 요청될 때 (sd-portal `sdClose` 대응). */\n  onClose?: () => void;\n  /** 열림/닫힘 변경 전체 콜백 (선택). */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * 위치 기준이 되는 앵커 엘리먼트 ref (sd-portal `parentRef` 대응).\n   * 트리거 버튼 등에 그대로 걸면 그 엘리먼트에 붙어서 뜬다.\n   */\n  anchorRef: RefObject<HTMLElement | null>;\n  /** 표시 방향 (공간이 부족하면 자동으로 반대 방향으로 전환). */\n  placement?: SPortalPlacement;\n  /** 교차축 정렬 (start·center·end). */\n  align?: SPortalAlign;\n  /** 앵커로부터의 간격 px (sd-portal offset[1]). */\n  offset?: number;\n  /** 정렬축 오프셋 px (sd-portal offset[0]). */\n  alignOffset?: number;\n  /** 앵커 너비에 맞춰 최소 너비를 잡는다. */\n  fit?: boolean;\n  /** 콘텐츠 최대 높이 px. 넘치면 세로 스크롤. */\n  maxHeight?: number;\n  /** 콘텐츠 내부를 클릭하면 자동으로 닫는다. */\n  autoClose?: boolean;\n  /** 외부 클릭 · ESC 로 닫히지 않게 한다. */\n  persistent?: boolean;\n  /** 뷰포트 경계 여백 px (충돌 회피 패딩). */\n  viewportPadding?: number;\n  /** 열릴 때 포커스 이동 처리 (기본은 Radix가 콘텐츠로 포커스를 옮김). e.preventDefault()로 막을 수 있다. */\n  onOpenAutoFocus?: (event: Event) => void;\n  /** 닫힐 때 포커스 복귀 처리 (기본은 Radix가 앵커로 포커스를 되돌림). e.preventDefault()로 막을 수 있다. */\n  onCloseAutoFocus?: (event: Event) => void;\n  /** 바깥 영역 pointerdown 으로 닫힘이 시작될 때 (앵커 위 클릭·persistent 는 제외). */\n  onPointerDownOutside?: (event: Event) => void;\n  /** 본문 내용 (콘텐츠 자유). */\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n  ariaLabel?: string;\n}\n\n/**\n * SPortal — sd-portal/sd-floating-portal 의 사용성을 Radix Popover 로 옮긴 범용 앵커드 플로팅 컨테이너.\n *\n * 트리거를 감싸지 않고 `anchorRef` 로 임의의 엘리먼트에 붙는다(=sd-portal `parentRef`).\n * open/onClose 로 외부에서 제어하며, flip·collision·스크롤 재배치·외부클릭·ESC·모달 포털은\n * Radix 가 처리한다. 콘텐츠는 children 으로 완전히 자유롭다.\n */\nexport function SPortal({\n  open,\n  onClose,\n  onOpenChange,\n  anchorRef,\n  placement = 'bottom',\n  align = 'start',\n  offset = 4,\n  alignOffset = 0,\n  fit = false,\n  maxHeight,\n  autoClose = false,\n  persistent = false,\n  viewportPadding = 0,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onPointerDownOutside,\n  children,\n  className,\n  style,\n  ariaLabel,\n}: SPortalProps) {\n  const portalContainer = usePortalContainer();\n\n  return (\n    <RPopover.Root\n      open={open}\n      onOpenChange={next => {\n        onOpenChange?.(next);\n        if (!next) onClose?.();\n      }}\n    >\n      <RPopover.Anchor virtualRef={anchorRef as RefObject<Measurable>} />\n      <RPopover.Portal container={portalContainer}>\n        <RPopover.Content\n          side={placement}\n          align={align}\n          sideOffset={offset}\n          alignOffset={alignOffset}\n          collisionPadding={viewportPadding}\n          aria-label={ariaLabel}\n          // persistent: 외부 클릭·ESC 로 닫히지 않음\n          // 아니면: 앵커(트리거) 위 클릭은 소비자가 토글하므로 여기서 닫지 않는다(중복 토글 방지)\n          onPointerDownOutside={e => {\n            if (persistent || anchorRef.current?.contains(e.target as Node)) {\n              e.preventDefault();\n              return;\n            }\n            onPointerDownOutside?.(e);\n          }}\n          // 앵커(예: input)에 이미 포커스가 있는 상태로 열리는 경우(클릭 즉시 오픈), Radix는 포커스가\n          // 레이어 밖에 있다고 판단해 열리자마자 닫아버린다 — 앵커 내부 포커스는 outside로 취급하지 않는다.\n          onFocusOutside={e => {\n            if (persistent || anchorRef.current?.contains(e.target as Node)) {\n              e.preventDefault();\n            }\n          }}\n          onEscapeKeyDown={persistent ? e => e.preventDefault() : undefined}\n          onOpenAutoFocus={onOpenAutoFocus}\n          onCloseAutoFocus={onCloseAutoFocus}\n          onClick={autoClose ? () => onClose?.() : undefined}\n          className={cn(\n            'z-50 overflow-hidden rounded-(--cmp-listBox-radius) bg-(--cmp-listBox-bg) shadow-normal-sm',\n            maxHeight != null && 'overflow-y-auto',\n            fit && 'min-w-(--radix-popover-trigger-width)',\n            FLOATING_SLIDE_ANIM,\n            className,\n          )}\n          style={{ maxHeight, ...style }}\n        >\n          {children}\n        </RPopover.Content>\n      </RPopover.Portal>\n    </RPopover.Root>\n  );\n}\n\nSPortal.displayName = 'SPortal';\n"]}

package/dist/components/SPortal/SPortal.d.ts

@@ -35,6 +35,8 @@ export interface SPortalProps {
     onOpenAutoFocus?: (event: Event) => void;
     /** 닫힐 때 포커스 복귀 처리 (기본은 Radix가 앵커로 포커스를 되돌림). e.preventDefault()로 막을 수 있다. */
     onCloseAutoFocus?: (event: Event) => void;
+    /** 바깥 영역 pointerdown 으로 닫힘이 시작될 때 (앵커 위 클릭·persistent 는 제외). */
+    onPointerDownOutside?: (event: Event) => void;
     /** 본문 내용 (콘텐츠 자유). */
     children?: ReactNode;
     className?: string;
@@ -48,7 +50,7 @@ export interface SPortalProps {
  * open/onClose 로 외부에서 제어하며, flip·collision·스크롤 재배치·외부클릭·ESC·모달 포털은
  * Radix 가 처리한다. 콘텐츠는 children 으로 완전히 자유롭다.
  */
-export declare function SPortal({ open, onClose, onOpenChange, anchorRef, placement, align, offset, alignOffset, fit, maxHeight, autoClose, persistent, viewportPadding, onOpenAutoFocus, onCloseAutoFocus, children, className, style, ariaLabel, }: SPortalProps): import("react").JSX.Element;
+export declare function SPortal({ open, onClose, onOpenChange, anchorRef, placement, align, offset, alignOffset, fit, maxHeight, autoClose, persistent, viewportPadding, onOpenAutoFocus, onCloseAutoFocus, onPointerDownOutside, children, className, style, ariaLabel, }: SPortalProps): import("react").JSX.Element;
 export declare namespace SPortal {
     var displayName: string;
 }

package/dist/components/SPortal/SPortal.js

@@ -58,6 +58,7 @@ function SPortal({
   viewportPadding = 0,
   onOpenAutoFocus,
   onCloseAutoFocus,
+  onPointerDownOutside,
   children,
   className,
   style,
@@ -86,7 +87,9 @@ function SPortal({
             onPointerDownOutside: (e) => {
               if (persistent || anchorRef.current?.contains(e.target)) {
                 e.preventDefault();
+                return;
               }
+              onPointerDownOutside?.(e);
             },
             onFocusOutside: (e) => {
               if (persistent || anchorRef.current?.contains(e.target)) {

package/dist/components/SPortal/SPortal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/lib/floating-anim.ts","../../../src/lib/portal-container.tsx","../../../src/components/SPortal/SPortal.tsx"],"names":[],"mappings":"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","file":"SPortal.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * Radix Floating(SPopover/STooltip/RTooltip) Content 의 placement 방향별 슬라이드+페이드.\n * Radix 가 붙이는 data-side(실제 렌더 방향)·data-state 에 맞춰 열림/닫힘 애니메이션을 적용한다.\n * (sd-floating-portal 의 sd-floating-slide-* 포팅 — 키프레임은 theme.css `--animate-floating-*`)\n *\n * 예: side=top 이면 아래(4px)에서 위로 올라오며 나타나고, 닫힐 때 다시 내려가며 사라진다.\n *\n * @radix-ui/react-popover · react-dropdown-menu 의 data-state 는 open/closed 지만,\n * @radix-ui/react-tooltip 은 open 대신 delayed-open/instant-open 을 쓴다 — 두 케이스 모두 커버한다.\n * Tailwind JIT는 소스에 리터럴로 등장하는 클래스명만 스캔하므로 템플릿으로 조합하지 않고 전부 나열한다.\n */\nexport const FLOATING_SLIDE_ANIM = [\n  'data-[state=open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=delayed-open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=instant-open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=closed]:data-[side=top]:animate-floating-out-top',\n  'data-[state=open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom',\n  'data-[state=open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=delayed-open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=instant-open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=closed]:data-[side=left]:animate-floating-out-left',\n  'data-[state=open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=delayed-open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=instant-open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=closed]:data-[side=right]:animate-floating-out-right',\n].join(' ');\n","'use client';\n\nimport { createContext, useContext } from 'react';\n\n/**\n * Floating 컴포넌트(STooltip/SPopover/SSelect listbox/SDropdownButton/SDatePicker 등)가\n * 자신의 Portal 을 어디로 렌더할지 결정하는 컨텍스트.\n *\n * 기본값(null)이면 각 컴포넌트는 body 로 portal 한다.\n * SModalContainer 는 모달이 열려있는 동안 이 값을 \"모달 스태킹 밴드(z-1001) 안의 전용 노드\"로\n * 채워서, 모달 안에서 열린 floating 이 모달 딤(z-1000) 뒤에 가려지지 않고 위로 뜨게 한다.\n * 반대로 모달 밖(베이스 화면)에서 열린 floating 은 여전히 body(z-50)로 나가므로,\n * 나중에 뜬 모달이 정상적으로 그 위를 덮는다. (소속에 따라 상대적으로 결정)\n */\nconst PortalContainerContext = createContext<HTMLElement | null>(null);\nconst InsideModalContext = createContext(false);\n\nexport const PortalContainerProvider = PortalContainerContext.Provider;\nexport const InsideModalProvider = InsideModalContext.Provider;\n\n/**\n * 현재 소속된 Portal 컨테이너를 반환한다.\n * Radix `*.Portal` 의 `container`, Ariakit 의 `portalElement` 에 그대로 넘기면 되며,\n * 컨테이너가 없을 때(모달 밖)는 `undefined` 를 반환해 각 라이브러리 기본값(body)을 쓴다.\n */\nexport function usePortalContainer(): HTMLElement | undefined {\n  return useContext(PortalContainerContext) ?? undefined;\n}\n\n/**\n * 현재 floating 이 모달 내부 컨텍스트에서 렌더링되는지 반환한다.\n * portal target ref 가 아직 준비되지 않은 첫 렌더에서도 true를 유지해\n * 모달 내부 전용 우회 로직이 깜빡이지 않도록 한다.\n */\nexport function useInsideModal(): boolean {\n  return useContext(InsideModalContext);\n}\n","'use client';\n\nimport { type CSSProperties, type ReactNode, type RefObject } from 'react';\nimport * as RPopover from '@radix-ui/react-popover';\nimport { cn } from '../../lib/cn';\nimport { FLOATING_SLIDE_ANIM } from '../../lib/floating-anim';\nimport { usePortalContainer } from '../../lib/portal-container';\n\nexport type SPortalPlacement = 'top' | 'bottom' | 'left' | 'right';\nexport type SPortalAlign = 'start' | 'center' | 'end';\n\n/** Radix Anchor 가 위치 계산에 쓰는 최소 인터페이스 (HTMLElement 가 충족한다). */\ntype Measurable = { getBoundingClientRect(): DOMRect };\n\nexport interface SPortalProps {\n  /** 표시 여부 (제어). onClose 와 함께 사용한다. */\n  open: boolean;\n  /** 외부 클릭 · ESC 등으로 닫힘이 요청될 때 (sd-portal `sdClose` 대응). */\n  onClose?: () => void;\n  /** 열림/닫힘 변경 전체 콜백 (선택). */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * 위치 기준이 되는 앵커 엘리먼트 ref (sd-portal `parentRef` 대응).\n   * 트리거 버튼 등에 그대로 걸면 그 엘리먼트에 붙어서 뜬다.\n   */\n  anchorRef: RefObject<HTMLElement | null>;\n  /** 표시 방향 (공간이 부족하면 자동으로 반대 방향으로 전환). */\n  placement?: SPortalPlacement;\n  /** 교차축 정렬 (start·center·end). */\n  align?: SPortalAlign;\n  /** 앵커로부터의 간격 px (sd-portal offset[1]). */\n  offset?: number;\n  /** 정렬축 오프셋 px (sd-portal offset[0]). */\n  alignOffset?: number;\n  /** 앵커 너비에 맞춰 최소 너비를 잡는다. */\n  fit?: boolean;\n  /** 콘텐츠 최대 높이 px. 넘치면 세로 스크롤. */\n  maxHeight?: number;\n  /** 콘텐츠 내부를 클릭하면 자동으로 닫는다. */\n  autoClose?: boolean;\n  /** 외부 클릭 · ESC 로 닫히지 않게 한다. */\n  persistent?: boolean;\n  /** 뷰포트 경계 여백 px (충돌 회피 패딩). */\n  viewportPadding?: number;\n  /** 열릴 때 포커스 이동 처리 (기본은 Radix가 콘텐츠로 포커스를 옮김). e.preventDefault()로 막을 수 있다. */\n  onOpenAutoFocus?: (event: Event) => void;\n  /** 닫힐 때 포커스 복귀 처리 (기본은 Radix가 앵커로 포커스를 되돌림). e.preventDefault()로 막을 수 있다. */\n  onCloseAutoFocus?: (event: Event) => void;\n  /** 본문 내용 (콘텐츠 자유). */\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n  ariaLabel?: string;\n}\n\n/**\n * SPortal — sd-portal/sd-floating-portal 의 사용성을 Radix Popover 로 옮긴 범용 앵커드 플로팅 컨테이너.\n *\n * 트리거를 감싸지 않고 `anchorRef` 로 임의의 엘리먼트에 붙는다(=sd-portal `parentRef`).\n * open/onClose 로 외부에서 제어하며, flip·collision·스크롤 재배치·외부클릭·ESC·모달 포털은\n * Radix 가 처리한다. 콘텐츠는 children 으로 완전히 자유롭다.\n */\nexport function SPortal({\n  open,\n  onClose,\n  onOpenChange,\n  anchorRef,\n  placement = 'bottom',\n  align = 'start',\n  offset = 4,\n  alignOffset = 0,\n  fit = false,\n  maxHeight,\n  autoClose = false,\n  persistent = false,\n  viewportPadding = 0,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  children,\n  className,\n  style,\n  ariaLabel,\n}: SPortalProps) {\n  const portalContainer = usePortalContainer();\n\n  return (\n    <RPopover.Root\n      open={open}\n      onOpenChange={next => {\n        onOpenChange?.(next);\n        if (!next) onClose?.();\n      }}\n    >\n      <RPopover.Anchor virtualRef={anchorRef as RefObject<Measurable>} />\n      <RPopover.Portal container={portalContainer}>\n        <RPopover.Content\n          side={placement}\n          align={align}\n          sideOffset={offset}\n          alignOffset={alignOffset}\n          collisionPadding={viewportPadding}\n          aria-label={ariaLabel}\n          // persistent: 외부 클릭·ESC 로 닫히지 않음\n          // 아니면: 앵커(트리거) 위 클릭은 소비자가 토글하므로 여기서 닫지 않는다(중복 토글 방지)\n          onPointerDownOutside={e => {\n            if (persistent || anchorRef.current?.contains(e.target as Node)) {\n              e.preventDefault();\n            }\n          }}\n          // 앵커(예: input)에 이미 포커스가 있는 상태로 열리는 경우(클릭 즉시 오픈), Radix는 포커스가\n          // 레이어 밖에 있다고 판단해 열리자마자 닫아버린다 — 앵커 내부 포커스는 outside로 취급하지 않는다.\n          onFocusOutside={e => {\n            if (persistent || anchorRef.current?.contains(e.target as Node)) {\n              e.preventDefault();\n            }\n          }}\n          onEscapeKeyDown={persistent ? e => e.preventDefault() : undefined}\n          onOpenAutoFocus={onOpenAutoFocus}\n          onCloseAutoFocus={onCloseAutoFocus}\n          onClick={autoClose ? () => onClose?.() : undefined}\n          className={cn(\n            'z-50 overflow-hidden rounded-(--cmp-listBox-radius) bg-(--cmp-listBox-bg) shadow-normal-sm',\n            maxHeight != null && 'overflow-y-auto',\n            fit && 'min-w-(--radix-popover-trigger-width)',\n            FLOATING_SLIDE_ANIM,\n            className,\n          )}\n          style={{ maxHeight, ...style }}\n        >\n          {children}\n        </RPopover.Content>\n      </RPopover.Portal>\n    </RPopover.Root>\n  );\n}\n\nSPortal.displayName = 'SPortal';\n"]}
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/lib/floating-anim.ts","../../../src/lib/portal-container.tsx","../../../src/components/SPortal/SPortal.tsx"],"names":[],"mappings":"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","file":"SPortal.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * Radix Floating(SPopover/STooltip/RTooltip) Content 의 placement 방향별 슬라이드+페이드.\n * Radix 가 붙이는 data-side(실제 렌더 방향)·data-state 에 맞춰 열림/닫힘 애니메이션을 적용한다.\n * (sd-floating-portal 의 sd-floating-slide-* 포팅 — 키프레임은 theme.css `--animate-floating-*`)\n *\n * 예: side=top 이면 아래(4px)에서 위로 올라오며 나타나고, 닫힐 때 다시 내려가며 사라진다.\n *\n * @radix-ui/react-popover · react-dropdown-menu 의 data-state 는 open/closed 지만,\n * @radix-ui/react-tooltip 은 open 대신 delayed-open/instant-open 을 쓴다 — 두 케이스 모두 커버한다.\n * Tailwind JIT는 소스에 리터럴로 등장하는 클래스명만 스캔하므로 템플릿으로 조합하지 않고 전부 나열한다.\n */\nexport const FLOATING_SLIDE_ANIM = [\n  'data-[state=open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=delayed-open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=instant-open]:data-[side=top]:animate-floating-in-top',\n  'data-[state=closed]:data-[side=top]:animate-floating-out-top',\n  'data-[state=open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom',\n  'data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom',\n  'data-[state=open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=delayed-open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=instant-open]:data-[side=left]:animate-floating-in-left',\n  'data-[state=closed]:data-[side=left]:animate-floating-out-left',\n  'data-[state=open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=delayed-open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=instant-open]:data-[side=right]:animate-floating-in-right',\n  'data-[state=closed]:data-[side=right]:animate-floating-out-right',\n].join(' ');\n","'use client';\n\nimport { createContext, useContext } from 'react';\n\n/**\n * Floating 컴포넌트(STooltip/SPopover/SSelect listbox/SDropdownButton/SDatePicker 등)가\n * 자신의 Portal 을 어디로 렌더할지 결정하는 컨텍스트.\n *\n * 기본값(null)이면 각 컴포넌트는 body 로 portal 한다.\n * SModalContainer 는 모달이 열려있는 동안 이 값을 \"모달 스태킹 밴드(z-1001) 안의 전용 노드\"로\n * 채워서, 모달 안에서 열린 floating 이 모달 딤(z-1000) 뒤에 가려지지 않고 위로 뜨게 한다.\n * 반대로 모달 밖(베이스 화면)에서 열린 floating 은 여전히 body(z-50)로 나가므로,\n * 나중에 뜬 모달이 정상적으로 그 위를 덮는다. (소속에 따라 상대적으로 결정)\n */\nconst PortalContainerContext = createContext<HTMLElement | null>(null);\nconst InsideModalContext = createContext(false);\n\nexport const PortalContainerProvider = PortalContainerContext.Provider;\nexport const InsideModalProvider = InsideModalContext.Provider;\n\n/**\n * 현재 소속된 Portal 컨테이너를 반환한다.\n * Radix `*.Portal` 의 `container`, Ariakit 의 `portalElement` 에 그대로 넘기면 되며,\n * 컨테이너가 없을 때(모달 밖)는 `undefined` 를 반환해 각 라이브러리 기본값(body)을 쓴다.\n */\nexport function usePortalContainer(): HTMLElement | undefined {\n  return useContext(PortalContainerContext) ?? undefined;\n}\n\n/**\n * 현재 floating 이 모달 내부 컨텍스트에서 렌더링되는지 반환한다.\n * portal target ref 가 아직 준비되지 않은 첫 렌더에서도 true를 유지해\n * 모달 내부 전용 우회 로직이 깜빡이지 않도록 한다.\n */\nexport function useInsideModal(): boolean {\n  return useContext(InsideModalContext);\n}\n","'use client';\n\nimport { type CSSProperties, type ReactNode, type RefObject } from 'react';\nimport * as RPopover from '@radix-ui/react-popover';\nimport { cn } from '../../lib/cn';\nimport { FLOATING_SLIDE_ANIM } from '../../lib/floating-anim';\nimport { usePortalContainer } from '../../lib/portal-container';\n\nexport type SPortalPlacement = 'top' | 'bottom' | 'left' | 'right';\nexport type SPortalAlign = 'start' | 'center' | 'end';\n\n/** Radix Anchor 가 위치 계산에 쓰는 최소 인터페이스 (HTMLElement 가 충족한다). */\ntype Measurable = { getBoundingClientRect(): DOMRect };\n\nexport interface SPortalProps {\n  /** 표시 여부 (제어). onClose 와 함께 사용한다. */\n  open: boolean;\n  /** 외부 클릭 · ESC 등으로 닫힘이 요청될 때 (sd-portal `sdClose` 대응). */\n  onClose?: () => void;\n  /** 열림/닫힘 변경 전체 콜백 (선택). */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * 위치 기준이 되는 앵커 엘리먼트 ref (sd-portal `parentRef` 대응).\n   * 트리거 버튼 등에 그대로 걸면 그 엘리먼트에 붙어서 뜬다.\n   */\n  anchorRef: RefObject<HTMLElement | null>;\n  /** 표시 방향 (공간이 부족하면 자동으로 반대 방향으로 전환). */\n  placement?: SPortalPlacement;\n  /** 교차축 정렬 (start·center·end). */\n  align?: SPortalAlign;\n  /** 앵커로부터의 간격 px (sd-portal offset[1]). */\n  offset?: number;\n  /** 정렬축 오프셋 px (sd-portal offset[0]). */\n  alignOffset?: number;\n  /** 앵커 너비에 맞춰 최소 너비를 잡는다. */\n  fit?: boolean;\n  /** 콘텐츠 최대 높이 px. 넘치면 세로 스크롤. */\n  maxHeight?: number;\n  /** 콘텐츠 내부를 클릭하면 자동으로 닫는다. */\n  autoClose?: boolean;\n  /** 외부 클릭 · ESC 로 닫히지 않게 한다. */\n  persistent?: boolean;\n  /** 뷰포트 경계 여백 px (충돌 회피 패딩). */\n  viewportPadding?: number;\n  /** 열릴 때 포커스 이동 처리 (기본은 Radix가 콘텐츠로 포커스를 옮김). e.preventDefault()로 막을 수 있다. */\n  onOpenAutoFocus?: (event: Event) => void;\n  /** 닫힐 때 포커스 복귀 처리 (기본은 Radix가 앵커로 포커스를 되돌림). e.preventDefault()로 막을 수 있다. */\n  onCloseAutoFocus?: (event: Event) => void;\n  /** 바깥 영역 pointerdown 으로 닫힘이 시작될 때 (앵커 위 클릭·persistent 는 제외). */\n  onPointerDownOutside?: (event: Event) => void;\n  /** 본문 내용 (콘텐츠 자유). */\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n  ariaLabel?: string;\n}\n\n/**\n * SPortal — sd-portal/sd-floating-portal 의 사용성을 Radix Popover 로 옮긴 범용 앵커드 플로팅 컨테이너.\n *\n * 트리거를 감싸지 않고 `anchorRef` 로 임의의 엘리먼트에 붙는다(=sd-portal `parentRef`).\n * open/onClose 로 외부에서 제어하며, flip·collision·스크롤 재배치·외부클릭·ESC·모달 포털은\n * Radix 가 처리한다. 콘텐츠는 children 으로 완전히 자유롭다.\n */\nexport function SPortal({\n  open,\n  onClose,\n  onOpenChange,\n  anchorRef,\n  placement = 'bottom',\n  align = 'start',\n  offset = 4,\n  alignOffset = 0,\n  fit = false,\n  maxHeight,\n  autoClose = false,\n  persistent = false,\n  viewportPadding = 0,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onPointerDownOutside,\n  children,\n  className,\n  style,\n  ariaLabel,\n}: SPortalProps) {\n  const portalContainer = usePortalContainer();\n\n  return (\n    <RPopover.Root\n      open={open}\n      onOpenChange={next => {\n        onOpenChange?.(next);\n        if (!next) onClose?.();\n      }}\n    >\n      <RPopover.Anchor virtualRef={anchorRef as RefObject<Measurable>} />\n      <RPopover.Portal container={portalContainer}>\n        <RPopover.Content\n          side={placement}\n          align={align}\n          sideOffset={offset}\n          alignOffset={alignOffset}\n          collisionPadding={viewportPadding}\n          aria-label={ariaLabel}\n          // persistent: 외부 클릭·ESC 로 닫히지 않음\n          // 아니면: 앵커(트리거) 위 클릭은 소비자가 토글하므로 여기서 닫지 않는다(중복 토글 방지)\n          onPointerDownOutside={e => {\n            if (persistent || anchorRef.current?.contains(e.target as Node)) {\n              e.preventDefault();\n              return;\n            }\n            onPointerDownOutside?.(e);\n          }}\n          // 앵커(예: input)에 이미 포커스가 있는 상태로 열리는 경우(클릭 즉시 오픈), Radix는 포커스가\n          // 레이어 밖에 있다고 판단해 열리자마자 닫아버린다 — 앵커 내부 포커스는 outside로 취급하지 않는다.\n          onFocusOutside={e => {\n            if (persistent || anchorRef.current?.contains(e.target as Node)) {\n              e.preventDefault();\n            }\n          }}\n          onEscapeKeyDown={persistent ? e => e.preventDefault() : undefined}\n          onOpenAutoFocus={onOpenAutoFocus}\n          onCloseAutoFocus={onCloseAutoFocus}\n          onClick={autoClose ? () => onClose?.() : undefined}\n          className={cn(\n            'z-50 overflow-hidden rounded-(--cmp-listBox-radius) bg-(--cmp-listBox-bg) shadow-normal-sm',\n            maxHeight != null && 'overflow-y-auto',\n            fit && 'min-w-(--radix-popover-trigger-width)',\n            FLOATING_SLIDE_ANIM,\n            className,\n          )}\n          style={{ maxHeight, ...style }}\n        >\n          {children}\n        </RPopover.Content>\n      </RPopover.Portal>\n    </RPopover.Root>\n  );\n}\n\nSPortal.displayName = 'SPortal';\n"]}

package/dist/components/SSelect/SSelect.cjs

@@ -3521,6 +3521,7 @@ function SPortal({
   viewportPadding = 0,
   onOpenAutoFocus,
   onCloseAutoFocus,
+  onPointerDownOutside,
   children,
   className,
   style,
@@ -3549,7 +3550,9 @@ function SPortal({
             onPointerDownOutside: (e) => {
               if (persistent || anchorRef.current?.contains(e.target)) {
                 e.preventDefault();
+                return;
               }
+              onPointerDownOutside?.(e);
             },
             onFocusOutside: (e) => {
               if (persistent || anchorRef.current?.contains(e.target)) {
@@ -3654,6 +3657,7 @@ var SSelect = react.forwardRef(function SSelect2({
   const triggerRef = react.useRef(null);
   const searchInputRef = react.useRef(null);
   const listRef = react.useRef(null);
+  const dismissedByPointerRef = react.useRef(false);
   const flat = react.useMemo(() => flattenOptions(options), [options]);
   const selectable = react.useMemo(() => selectableOptions(flat), [flat]);
   const hasLeaf = react.useMemo(() => flat.some((o) => !o.isGroup), [flat]);
@@ -3683,7 +3687,9 @@ var SSelect = react.forwardRef(function SSelect2({
   const commitOpen = (next) => {
     setOpen(next);
     onOpenChange?.(next);
-    if (!next) {
+    if (next) {
+      dismissedByPointerRef.current = false;
+    } else {
       setPendingOpen(false);
       setSearch("");
       if (rules && rules.length > 0) {
@@ -3907,8 +3913,12 @@ var SSelect = react.forwardRef(function SSelect2({
               event.preventDefault();
               requestAnimationFrame(() => searchInputRef.current?.focus());
             },
+            onPointerDownOutside: () => {
+              dismissedByPointerRef.current = true;
+            },
             onCloseAutoFocus: (event) => {
               event.preventDefault();
+              if (dismissedByPointerRef.current) return;
               triggerRef.current?.focus();
             },
             className: "rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",