@shoplflow/base 0.46.26 → 0.46.28

package/dist/index.cjs

@@ -765,6 +765,7 @@ var MODAL_SIZE_L = 768;
 var MODAL_SIZE_XL = 1040;
 var MODAL_SIZE_XXL = 1280;
 var MODAL_SIZE_XXXL = 1600;
+var MODAL_TOP_BOTTOM_MARGIN = 64;
 var getModalWidthFromSize = (size2) => {
   switch (size2) {
     case "XXS":
@@ -816,14 +817,13 @@ var getFullScreenModal = () => {
   `;
 };
 var checkMaxHeight = (height, viewport) => {
-  const topBottomMargin = 64;
   if (height > 1200) {
-    return 1200 - topBottomMargin;
+    return 1200 - MODAL_TOP_BOTTOM_MARGIN;
   }
   if (height > viewport) {
-    return viewport - topBottomMargin;
+    return viewport - MODAL_TOP_BOTTOM_MARGIN;
   }
-  return height - topBottomMargin;
+  return height - MODAL_TOP_BOTTOM_MARGIN;
 };
 var Container = styled6__default.default.div`
   ${({ hasChangeAnimation }) => hasChangeAnimation && react$1.css`
@@ -840,9 +840,14 @@ var Container = styled6__default.default.div`
   box-shadow: ${exports.boxShadowTokens.dropShadow};
   overflow: hidden;
   flex-grow: 1;
-  height: ${({ height, viewport }) => height ? `${checkMaxHeight(height, viewport)}px` : "initial"};
+  height: ${({ height, viewport, $fillViewportHeight }) => {
+  if ($fillViewportHeight) {
+    return `${viewport - MODAL_TOP_BOTTOM_MARGIN}px`;
+  }
+  return typeof height === "number" ? `${checkMaxHeight(height, viewport)}px` : "initial";
+}};
   min-height: 180px;
-  max-height: 1200px;
+  max-height: ${({ $fillViewportHeight }) => $fillViewportHeight ? "none" : "1200px"};
 
   width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
   max-width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
@@ -934,6 +939,12 @@ var useViewportSizeObserver = () => {
   }, []);
   return size2;
 };
+exports.ModalHandlerContext = React.createContext({
+  addModal: utils.noop,
+  removeModal: utils.noop
+});
+exports.ModalContext = React.createContext([]);
+exports.ModalOutsideClickContext = React.createContext(null);
 var ModalOptionContext = React.createContext({
   topHeight: 0,
   bottomHeight: 0,
@@ -969,9 +980,11 @@ var ModalOptionContextProvider = ({ children }) => {
 var ModalContainer = (_a) => {
   var _b = _a, { children, height, outsideClick = utils.noop } = _b, rest = __objRest(_b, ["children", "height", "outsideClick"]);
   const ref = utils.useParentElementClick(outsideClick);
+  const dismissCtx = React.useContext(exports.ModalOutsideClickContext);
   const { height: windowHeight } = useViewportSizeObserver();
   const topBottomMargin = 64;
-  const heightWidthMargin = height ? height + topBottomMargin : void 0;
+  const fillViewportHeight = height === "100%" && rest.sizeVar !== "FULL";
+  const heightWidthMargin = typeof height === "number" ? height + topBottomMargin : fillViewportHeight ? windowHeight : void 0;
   const childrenArray = React__namespace.default.Children.toArray(children);
   const findHeader = childrenArray.find((child) => {
     if (!React__namespace.default.isValidElement(child)) {
@@ -989,6 +1002,14 @@ var ModalContainer = (_a) => {
       return child;
     }
   });
+  React.useEffect(() => {
+    if (!dismissCtx) {
+      return;
+    }
+    return dismissCtx.registerOutsideClick(() => {
+      outsideClick(null);
+    });
+  }, [dismissCtx, outsideClick]);
   const addPropInChildren = React__namespace.default.Children.map(childrenArray, (child) => {
     if (!React__namespace.default.isValidElement(child)) {
       return child;
@@ -997,10 +1018,24 @@ var ModalContainer = (_a) => {
       isIncludeHeader: Boolean(findHeader),
       isIncludeFooter: Boolean(findFooter),
       sizeVar: rest.sizeVar,
-      height: heightWidthMargin
+      height: heightWidthMargin,
+      fillViewportHeight
     });
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Container, __spreadProps(__spreadValues({ ref }, rest), { height: heightWidthMargin, viewport: windowHeight, "data-shoplflow": "Modal", children: /* @__PURE__ */ jsxRuntime.jsx(ModalOptionContextProvider, { children: addPropInChildren }) }));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Container,
+    __spreadProps(__spreadValues({
+      ref
+    }, rest), {
+      height: heightWidthMargin,
+      $fillViewportHeight: fillViewportHeight,
+      viewport: windowHeight,
+      "data-shoplflow": "Modal",
+      role: "dialog",
+      "aria-modal": true,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ModalOptionContextProvider, { children: addPropInChildren })
+    })
+  );
 };
 var ModalContainer_default = ModalContainer;
 var ModalFooter = ({ children, padding }) => {
@@ -1050,6 +1085,7 @@ var ModalBody = ({
   isIncludeFooter = false,
   sizeVar,
   height: modalContainerHeight,
+  fillViewportHeight = false,
   padding
 }) => {
   const { height: windowHeight } = useViewportSizeObserver();
@@ -1073,6 +1109,9 @@ var ModalBody = ({
     if (sizeVar === "FULL") {
       return windowHeight - headerFooterHeight - heightToDeduct;
     }
+    if (fillViewportHeight) {
+      return windowHeight - topBottomMargin - headerFooterHeight - heightToDeduct;
+    }
     if (modalContainerHeight) {
       if (modalContainerHeight <= 1200) {
         if (windowHeight < modalContainerHeight) {
@@ -1089,6 +1128,9 @@ var ModalBody = ({
     if (sizeVar === "FULL") {
       return windowHeight;
     }
+    if (fillViewportHeight) {
+      return windowHeight - topBottomMargin - headerFooterHeight;
+    }
     if (modalContainerHeight) {
       if (modalContainerHeight > 1200) {
         return 1200 - topBottomMargin - headerFooterHeight;
@@ -1193,13 +1235,6 @@ var ModalBottom = ({ children }) => {
   }, [bottomRef, setBottomHeight, clearBottomHeight]);
   return /* @__PURE__ */ jsxRuntime.jsx(BottomContainer, { ref: setBottomRef, children });
 };
-exports.ModalHandlerContext = React.createContext({
-  addModal: utils.noop,
-  removeModal: utils.noop
-});
-exports.ModalContext = React.createContext([]);
-
-// src/components/Modal/hooks/useModalValue.ts
 exports.useModalValue = () => {
   const modal = React.useContext(exports.ModalContext);
   return {
@@ -1215,6 +1250,27 @@ exports.useHandleModal = () => {
 };
 var ModalProvider = ({ children }) => {
   const [openedModals, setOpenedModals] = React.useState([]);
+  const dismissStackRef = React.useRef([]);
+  const registerOutsideClick = React.useCallback((fn) => {
+    dismissStackRef.current.push(fn);
+    return () => {
+      const idx = dismissStackRef.current.lastIndexOf(fn);
+      if (idx !== -1) {
+        dismissStackRef.current.splice(idx, 1);
+      }
+    };
+  }, []);
+  const requestOutsideClick = React.useCallback(() => {
+    const top = dismissStackRef.current[dismissStackRef.current.length - 1];
+    top == null ? void 0 : top();
+  }, []);
+  const dismissRegistry = React.useMemo(
+    () => ({
+      registerOutsideClick,
+      requestOutsideClick
+    }),
+    [registerOutsideClick, requestOutsideClick]
+  );
   const addModal = (component, id, zIndex) => {
     setOpenedModals((modals) => {
       if (modals) {
@@ -1262,14 +1318,17 @@ var ModalProvider = ({ children }) => {
   };
   const dispatch = React.useMemo(() => ({ addModal, removeModal }), []);
   React.useEffect(() => {
-    if (openedModals.length !== 1) {
-      return;
+    if (openedModals.length > 0) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
     }
-    document.body.style.cssText = "overflow:hidden";
+  }, [openedModals.length]);
+  React.useEffect(() => {
     return () => {
-      document.body.style.cssText = "overflow:unset";
+      document.body.style.overflow = "";
     };
-  }, [openedModals.length]);
+  }, []);
   React.useEffect(() => {
     const closeAllModals = () => {
       setOpenedModals([]);
@@ -1279,7 +1338,7 @@ var ModalProvider = ({ children }) => {
       window.removeEventListener("popstate", closeAllModals);
     };
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(exports.ModalContext.Provider, { value: openedModals, children: /* @__PURE__ */ jsxRuntime.jsx(exports.ModalHandlerContext.Provider, { value: dispatch, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(exports.ModalContext.Provider, { value: openedModals, children: /* @__PURE__ */ jsxRuntime.jsx(exports.ModalOutsideClickContext.Provider, { value: dismissRegistry, children: /* @__PURE__ */ jsxRuntime.jsx(exports.ModalHandlerContext.Provider, { value: dispatch, children }) }) });
 };
 var ModalProvider_default = ModalProvider;
 
@@ -5025,41 +5084,29 @@ var PaginationWrapper = styled6__default.default.div`
   width: 100%;
   justify-content: space-between;
 
-  /* Shopl: Figma pagenation bar — 양끝은 흐름 배치, 네비는 바 전체 기준 absolute 중앙 (node 13760:25910) */
+  /* Shopl: 좌/우 아이템 폭과 개수와 무관하게 네비를 고정 중앙에 둔다. */
   ${({ $centerNav }) => $centerNav && react$1.css`
-      position: relative;
-      justify-content: space-between;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+      align-items: center;
+      column-gap: 8px;
 
-      /* div → nav → div 이므로 nth-of-type(2)는 두 번째 div(우측)만 잡힘 → 반드시 nth-child */
       & > *:nth-child(1) {
-        position: relative;
-        z-index: 2;
-        flex-shrink: 0;
         display: flex;
         align-items: center;
         justify-content: flex-start;
+        min-width: 0;
+        overflow: hidden;
       }
       & > *:nth-child(2) {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        z-index: 1;
-        transform: translate(-50%, -50%);
-        width: max-content;
-        max-width: 100%;
-        pointer-events: none;
-
-        & > * {
-          pointer-events: auto;
-        }
+        justify-self: center;
       }
       & > *:nth-child(3) {
-        position: relative;
-        z-index: 2;
-        flex-shrink: 0;
         display: flex;
         align-items: center;
         justify-content: flex-end;
+        min-width: 0;
+        overflow: hidden;
       }
     `}
 
@@ -7779,6 +7826,24 @@ var SpaceMarginWrapper = styled6__default.default(framerMotion.motion.div)`
 `;
 var ModalPortal = () => {
   const modal = React.useContext(exports.ModalContext);
+  const dismissRegistry = React.useContext(exports.ModalOutsideClickContext);
+  React.useEffect(() => {
+    if (!dismissRegistry) {
+      return;
+    }
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") {
+        return;
+      }
+      if (modal.length === 0) {
+        return;
+      }
+      event.preventDefault();
+      dismissRegistry.requestOutsideClick();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [dismissRegistry, modal.length]);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactDom$1.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: modal.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(BackDrop_default, { zIndex: item.zIndex, children: /* @__PURE__ */ jsxRuntime.jsx(SpaceMarginWrapper, { children: item.component }) }, index)) }),
     document.body

package/dist/index.d.cts

@@ -490,11 +490,16 @@ interface ModalContainerProps extends ModalContainerOptionProps, SizeVariantProp
 interface ModalContainerOptionProps {
     /**
      * 모달의 높이를 설정합니다.
+     * - number: px 기준 높이
+     * - '100%': 뷰포트 높이에서 상하 여백(64px)을 제외한 높이
+     *   (sizeVar='FULL'에서는 적용되지 않습니다.)
      */
-    height?: number;
+    height?: number | '100%';
     /**
-     * 모달의 외부를 클릭했을 때 실행되는 함수입니다.
-     * @param args
+     * 모달 컨테이너 바깥(백드롭 등)을 클릭했을 때 실행됩니다.
+     * Escape 키를 눌렀을 때도 같은 함수가 호출됩니다. 모달이 여러 겹이면 Escape는 스택 최상단(가장 최근에 연) 모달에만 적용됩니다.
+     *
+     * @param args 바깥 클릭 시 전달되는 클릭 이벤트(`Event`).
      */
     outsideClick?: (args?: any) => void;
 }
@@ -512,6 +517,7 @@ interface ModalBodyOptionProps {
     isIncludeHeader?: boolean;
     isIncludeFooter?: boolean;
     height?: number;
+    fillViewportHeight?: boolean;
     sizeVar?: ModalSizeType;
     padding?: CSSProperties['padding'];
 }
@@ -548,6 +554,14 @@ type ModalHandlerContext = {
 declare const ModalHandlerContext: react.Context<ModalHandlerContext>;
 type ModalContext = ModalStateType[];
 declare const ModalContext: react.Context<ModalContext>;
+/** ESC 시 최상단 모달의 outsideClick과 동일한 경로를 호출하기 위한 등록소 */
+type ModalOutsideClickHandlers = {
+    /** 레이어 마운트 시 outsideClick과 동일한 닫기 동작 등록, 언마운트 시 해제 */
+    registerOutsideClick: (fn: () => void) => () => void;
+    /** ESC 시 최상단 레이어에 대해 위와 동일한 동작 실행 */
+    requestOutsideClick: () => void;
+};
+declare const ModalOutsideClickContext: react.Context<ModalOutsideClickHandlers | null>;
 
 declare const useModalValue: () => {
     modal: ModalContext;
@@ -559,10 +573,10 @@ declare const useHandleModal: () => {
 };
 
 declare const Modal: {
-    Container: ({ children, height, outsideClick, ...rest }: ModalContainerProps) => react_jsx_runtime.JSX.Element;
+    Container: ({ children, height, outsideClick, ...rest }: ModalContainerProps) => JSX.Element;
     Header: ModalHeaderType;
     Top: ({ children }: ModalTopProps) => react_jsx_runtime.JSX.Element;
-    Body: ({ children, isIncludeHeader, isIncludeFooter, sizeVar, height: modalContainerHeight, padding, }: ModalBodyProps) => react_jsx_runtime.JSX.Element;
+    Body: ({ children, isIncludeHeader, isIncludeFooter, sizeVar, height: modalContainerHeight, fillViewportHeight, padding, }: ModalBodyProps) => react_jsx_runtime.JSX.Element;
     Bottom: ({ children }: ModalBottomProps) => react_jsx_runtime.JSX.Element;
     Footer: ModalFooterType;
 };
@@ -1790,4 +1804,4 @@ type HelperTextProps = HelperTextOptionProps & Omit<TextProps, 'typography'>;
 
 declare const HelperText: ({ type, position, color, ...rest }: HelperTextProps) => react_jsx_runtime.JSX.Element;
 
-export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, BulletHelperTextOptionProps, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutIconProps, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChildrenProps, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownItem, DropdownOptionProps, DropdownOptionVariantType, DropdownOptionVariants, DropdownProps, DropdownSizeVariantType, DropdownStyleVariantType, DropdownTriggerButtonProps, FontWeightTokens, HelperText, HelperTextOptionProps, HelperTextProps, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MemoizedSearchBarComponent, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NormalHelperTextOptionProps, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, SLIDER_Z_INDEX, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SearchBar, SearchBarBaseProps, SearchBarCategoryProps, SearchBarComponent, SearchBarInputProps, SearchBarProps, SearchType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, Skeleton, SkeletonProps, Slider, SliderBounds, SliderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, SwitchSizeVariantType, SwitchSizeVariants, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
+export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, BulletHelperTextOptionProps, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutIconProps, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChildrenProps, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownItem, DropdownOptionProps, DropdownOptionVariantType, DropdownOptionVariants, DropdownProps, DropdownSizeVariantType, DropdownStyleVariantType, DropdownTriggerButtonProps, FontWeightTokens, HelperText, HelperTextOptionProps, HelperTextProps, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MemoizedSearchBarComponent, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalOutsideClickContext, ModalOutsideClickHandlers, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NormalHelperTextOptionProps, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, SLIDER_Z_INDEX, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SearchBar, SearchBarBaseProps, SearchBarCategoryProps, SearchBarComponent, SearchBarInputProps, SearchBarProps, SearchType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, Skeleton, SkeletonProps, Slider, SliderBounds, SliderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, SwitchSizeVariantType, SwitchSizeVariants, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };

package/dist/index.d.ts

@@ -490,11 +490,16 @@ interface ModalContainerProps extends ModalContainerOptionProps, SizeVariantProp
 interface ModalContainerOptionProps {
     /**
      * 모달의 높이를 설정합니다.
+     * - number: px 기준 높이
+     * - '100%': 뷰포트 높이에서 상하 여백(64px)을 제외한 높이
+     *   (sizeVar='FULL'에서는 적용되지 않습니다.)
      */
-    height?: number;
+    height?: number | '100%';
     /**
-     * 모달의 외부를 클릭했을 때 실행되는 함수입니다.
-     * @param args
+     * 모달 컨테이너 바깥(백드롭 등)을 클릭했을 때 실행됩니다.
+     * Escape 키를 눌렀을 때도 같은 함수가 호출됩니다. 모달이 여러 겹이면 Escape는 스택 최상단(가장 최근에 연) 모달에만 적용됩니다.
+     *
+     * @param args 바깥 클릭 시 전달되는 클릭 이벤트(`Event`).
      */
     outsideClick?: (args?: any) => void;
 }
@@ -512,6 +517,7 @@ interface ModalBodyOptionProps {
     isIncludeHeader?: boolean;
     isIncludeFooter?: boolean;
     height?: number;
+    fillViewportHeight?: boolean;
     sizeVar?: ModalSizeType;
     padding?: CSSProperties['padding'];
 }
@@ -548,6 +554,14 @@ type ModalHandlerContext = {
 declare const ModalHandlerContext: react.Context<ModalHandlerContext>;
 type ModalContext = ModalStateType[];
 declare const ModalContext: react.Context<ModalContext>;
+/** ESC 시 최상단 모달의 outsideClick과 동일한 경로를 호출하기 위한 등록소 */
+type ModalOutsideClickHandlers = {
+    /** 레이어 마운트 시 outsideClick과 동일한 닫기 동작 등록, 언마운트 시 해제 */
+    registerOutsideClick: (fn: () => void) => () => void;
+    /** ESC 시 최상단 레이어에 대해 위와 동일한 동작 실행 */
+    requestOutsideClick: () => void;
+};
+declare const ModalOutsideClickContext: react.Context<ModalOutsideClickHandlers | null>;
 
 declare const useModalValue: () => {
     modal: ModalContext;
@@ -559,10 +573,10 @@ declare const useHandleModal: () => {
 };
 
 declare const Modal: {
-    Container: ({ children, height, outsideClick, ...rest }: ModalContainerProps) => react_jsx_runtime.JSX.Element;
+    Container: ({ children, height, outsideClick, ...rest }: ModalContainerProps) => JSX.Element;
     Header: ModalHeaderType;
     Top: ({ children }: ModalTopProps) => react_jsx_runtime.JSX.Element;
-    Body: ({ children, isIncludeHeader, isIncludeFooter, sizeVar, height: modalContainerHeight, padding, }: ModalBodyProps) => react_jsx_runtime.JSX.Element;
+    Body: ({ children, isIncludeHeader, isIncludeFooter, sizeVar, height: modalContainerHeight, fillViewportHeight, padding, }: ModalBodyProps) => react_jsx_runtime.JSX.Element;
     Bottom: ({ children }: ModalBottomProps) => react_jsx_runtime.JSX.Element;
     Footer: ModalFooterType;
 };
@@ -1790,4 +1804,4 @@ type HelperTextProps = HelperTextOptionProps & Omit<TextProps, 'typography'>;
 
 declare const HelperText: ({ type, position, color, ...rest }: HelperTextProps) => react_jsx_runtime.JSX.Element;
 
-export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, BulletHelperTextOptionProps, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutIconProps, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChildrenProps, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownItem, DropdownOptionProps, DropdownOptionVariantType, DropdownOptionVariants, DropdownProps, DropdownSizeVariantType, DropdownStyleVariantType, DropdownTriggerButtonProps, FontWeightTokens, HelperText, HelperTextOptionProps, HelperTextProps, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MemoizedSearchBarComponent, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NormalHelperTextOptionProps, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, SLIDER_Z_INDEX, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SearchBar, SearchBarBaseProps, SearchBarCategoryProps, SearchBarComponent, SearchBarInputProps, SearchBarProps, SearchType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, Skeleton, SkeletonProps, Slider, SliderBounds, SliderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, SwitchSizeVariantType, SwitchSizeVariants, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
+export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, BulletHelperTextOptionProps, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutIconProps, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChildrenProps, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownItem, DropdownOptionProps, DropdownOptionVariantType, DropdownOptionVariants, DropdownProps, DropdownSizeVariantType, DropdownStyleVariantType, DropdownTriggerButtonProps, FontWeightTokens, HelperText, HelperTextOptionProps, HelperTextProps, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MemoizedSearchBarComponent, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalOutsideClickContext, ModalOutsideClickHandlers, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NormalHelperTextOptionProps, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, SLIDER_Z_INDEX, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SearchBar, SearchBarBaseProps, SearchBarCategoryProps, SearchBarComponent, SearchBarInputProps, SearchBarProps, SearchType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, Skeleton, SkeletonProps, Slider, SliderBounds, SliderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, SwitchSizeVariantType, SwitchSizeVariants, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };

package/dist/index.js

@@ -738,6 +738,7 @@ var MODAL_SIZE_L = 768;
 var MODAL_SIZE_XL = 1040;
 var MODAL_SIZE_XXL = 1280;
 var MODAL_SIZE_XXXL = 1600;
+var MODAL_TOP_BOTTOM_MARGIN = 64;
 var getModalWidthFromSize = (size2) => {
   switch (size2) {
     case "XXS":
@@ -789,14 +790,13 @@ var getFullScreenModal = () => {
   `;
 };
 var checkMaxHeight = (height, viewport) => {
-  const topBottomMargin = 64;
   if (height > 1200) {
-    return 1200 - topBottomMargin;
+    return 1200 - MODAL_TOP_BOTTOM_MARGIN;
   }
   if (height > viewport) {
-    return viewport - topBottomMargin;
+    return viewport - MODAL_TOP_BOTTOM_MARGIN;
   }
-  return height - topBottomMargin;
+  return height - MODAL_TOP_BOTTOM_MARGIN;
 };
 var Container = styled6.div`
   ${({ hasChangeAnimation }) => hasChangeAnimation && css`
@@ -813,9 +813,14 @@ var Container = styled6.div`
   box-shadow: ${boxShadowTokens.dropShadow};
   overflow: hidden;
   flex-grow: 1;
-  height: ${({ height, viewport }) => height ? `${checkMaxHeight(height, viewport)}px` : "initial"};
+  height: ${({ height, viewport, $fillViewportHeight }) => {
+  if ($fillViewportHeight) {
+    return `${viewport - MODAL_TOP_BOTTOM_MARGIN}px`;
+  }
+  return typeof height === "number" ? `${checkMaxHeight(height, viewport)}px` : "initial";
+}};
   min-height: 180px;
-  max-height: 1200px;
+  max-height: ${({ $fillViewportHeight }) => $fillViewportHeight ? "none" : "1200px"};
 
   width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
   max-width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
@@ -907,6 +912,12 @@ var useViewportSizeObserver = () => {
   }, []);
   return size2;
 };
+var ModalHandlerContext = createContext({
+  addModal: noop,
+  removeModal: noop
+});
+var ModalContext = createContext([]);
+var ModalOutsideClickContext = createContext(null);
 var ModalOptionContext = createContext({
   topHeight: 0,
   bottomHeight: 0,
@@ -942,9 +953,11 @@ var ModalOptionContextProvider = ({ children }) => {
 var ModalContainer = (_a) => {
   var _b = _a, { children, height, outsideClick = noop } = _b, rest = __objRest(_b, ["children", "height", "outsideClick"]);
   const ref = useParentElementClick(outsideClick);
+  const dismissCtx = useContext(ModalOutsideClickContext);
   const { height: windowHeight } = useViewportSizeObserver();
   const topBottomMargin = 64;
-  const heightWidthMargin = height ? height + topBottomMargin : void 0;
+  const fillViewportHeight = height === "100%" && rest.sizeVar !== "FULL";
+  const heightWidthMargin = typeof height === "number" ? height + topBottomMargin : fillViewportHeight ? windowHeight : void 0;
   const childrenArray = React__default.Children.toArray(children);
   const findHeader = childrenArray.find((child) => {
     if (!React__default.isValidElement(child)) {
@@ -962,6 +975,14 @@ var ModalContainer = (_a) => {
       return child;
     }
   });
+  useEffect(() => {
+    if (!dismissCtx) {
+      return;
+    }
+    return dismissCtx.registerOutsideClick(() => {
+      outsideClick(null);
+    });
+  }, [dismissCtx, outsideClick]);
   const addPropInChildren = React__default.Children.map(childrenArray, (child) => {
     if (!React__default.isValidElement(child)) {
       return child;
@@ -970,10 +991,24 @@ var ModalContainer = (_a) => {
       isIncludeHeader: Boolean(findHeader),
       isIncludeFooter: Boolean(findFooter),
       sizeVar: rest.sizeVar,
-      height: heightWidthMargin
+      height: heightWidthMargin,
+      fillViewportHeight
     });
   });
-  return /* @__PURE__ */ jsx(Container, __spreadProps(__spreadValues({ ref }, rest), { height: heightWidthMargin, viewport: windowHeight, "data-shoplflow": "Modal", children: /* @__PURE__ */ jsx(ModalOptionContextProvider, { children: addPropInChildren }) }));
+  return /* @__PURE__ */ jsx(
+    Container,
+    __spreadProps(__spreadValues({
+      ref
+    }, rest), {
+      height: heightWidthMargin,
+      $fillViewportHeight: fillViewportHeight,
+      viewport: windowHeight,
+      "data-shoplflow": "Modal",
+      role: "dialog",
+      "aria-modal": true,
+      children: /* @__PURE__ */ jsx(ModalOptionContextProvider, { children: addPropInChildren })
+    })
+  );
 };
 var ModalContainer_default = ModalContainer;
 var ModalFooter = ({ children, padding }) => {
@@ -1023,6 +1058,7 @@ var ModalBody = ({
   isIncludeFooter = false,
   sizeVar,
   height: modalContainerHeight,
+  fillViewportHeight = false,
   padding
 }) => {
   const { height: windowHeight } = useViewportSizeObserver();
@@ -1046,6 +1082,9 @@ var ModalBody = ({
     if (sizeVar === "FULL") {
       return windowHeight - headerFooterHeight - heightToDeduct;
     }
+    if (fillViewportHeight) {
+      return windowHeight - topBottomMargin - headerFooterHeight - heightToDeduct;
+    }
     if (modalContainerHeight) {
       if (modalContainerHeight <= 1200) {
         if (windowHeight < modalContainerHeight) {
@@ -1062,6 +1101,9 @@ var ModalBody = ({
     if (sizeVar === "FULL") {
       return windowHeight;
     }
+    if (fillViewportHeight) {
+      return windowHeight - topBottomMargin - headerFooterHeight;
+    }
     if (modalContainerHeight) {
       if (modalContainerHeight > 1200) {
         return 1200 - topBottomMargin - headerFooterHeight;
@@ -1166,13 +1208,6 @@ var ModalBottom = ({ children }) => {
   }, [bottomRef, setBottomHeight, clearBottomHeight]);
   return /* @__PURE__ */ jsx(BottomContainer, { ref: setBottomRef, children });
 };
-var ModalHandlerContext = createContext({
-  addModal: noop,
-  removeModal: noop
-});
-var ModalContext = createContext([]);
-
-// src/components/Modal/hooks/useModalValue.ts
 var useModalValue = () => {
   const modal = useContext(ModalContext);
   return {
@@ -1188,6 +1223,27 @@ var useHandleModal = () => {
 };
 var ModalProvider = ({ children }) => {
   const [openedModals, setOpenedModals] = useState([]);
+  const dismissStackRef = useRef([]);
+  const registerOutsideClick = useCallback((fn) => {
+    dismissStackRef.current.push(fn);
+    return () => {
+      const idx = dismissStackRef.current.lastIndexOf(fn);
+      if (idx !== -1) {
+        dismissStackRef.current.splice(idx, 1);
+      }
+    };
+  }, []);
+  const requestOutsideClick = useCallback(() => {
+    const top = dismissStackRef.current[dismissStackRef.current.length - 1];
+    top == null ? void 0 : top();
+  }, []);
+  const dismissRegistry = useMemo(
+    () => ({
+      registerOutsideClick,
+      requestOutsideClick
+    }),
+    [registerOutsideClick, requestOutsideClick]
+  );
   const addModal = (component, id, zIndex) => {
     setOpenedModals((modals) => {
       if (modals) {
@@ -1235,14 +1291,17 @@ var ModalProvider = ({ children }) => {
   };
   const dispatch = useMemo(() => ({ addModal, removeModal }), []);
   useEffect(() => {
-    if (openedModals.length !== 1) {
-      return;
+    if (openedModals.length > 0) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
     }
-    document.body.style.cssText = "overflow:hidden";
+  }, [openedModals.length]);
+  useEffect(() => {
     return () => {
-      document.body.style.cssText = "overflow:unset";
+      document.body.style.overflow = "";
     };
-  }, [openedModals.length]);
+  }, []);
   useEffect(() => {
     const closeAllModals = () => {
       setOpenedModals([]);
@@ -1252,7 +1311,7 @@ var ModalProvider = ({ children }) => {
       window.removeEventListener("popstate", closeAllModals);
     };
   }, []);
-  return /* @__PURE__ */ jsx(ModalContext.Provider, { value: openedModals, children: /* @__PURE__ */ jsx(ModalHandlerContext.Provider, { value: dispatch, children }) });
+  return /* @__PURE__ */ jsx(ModalContext.Provider, { value: openedModals, children: /* @__PURE__ */ jsx(ModalOutsideClickContext.Provider, { value: dismissRegistry, children: /* @__PURE__ */ jsx(ModalHandlerContext.Provider, { value: dispatch, children }) }) });
 };
 var ModalProvider_default = ModalProvider;
 
@@ -4998,41 +5057,29 @@ var PaginationWrapper = styled6.div`
   width: 100%;
   justify-content: space-between;
 
-  /* Shopl: Figma pagenation bar — 양끝은 흐름 배치, 네비는 바 전체 기준 absolute 중앙 (node 13760:25910) */
+  /* Shopl: 좌/우 아이템 폭과 개수와 무관하게 네비를 고정 중앙에 둔다. */
   ${({ $centerNav }) => $centerNav && css`
-      position: relative;
-      justify-content: space-between;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+      align-items: center;
+      column-gap: 8px;
 
-      /* div → nav → div 이므로 nth-of-type(2)는 두 번째 div(우측)만 잡힘 → 반드시 nth-child */
       & > *:nth-child(1) {
-        position: relative;
-        z-index: 2;
-        flex-shrink: 0;
         display: flex;
         align-items: center;
         justify-content: flex-start;
+        min-width: 0;
+        overflow: hidden;
       }
       & > *:nth-child(2) {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        z-index: 1;
-        transform: translate(-50%, -50%);
-        width: max-content;
-        max-width: 100%;
-        pointer-events: none;
-
-        & > * {
-          pointer-events: auto;
-        }
+        justify-self: center;
       }
       & > *:nth-child(3) {
-        position: relative;
-        z-index: 2;
-        flex-shrink: 0;
         display: flex;
         align-items: center;
         justify-content: flex-end;
+        min-width: 0;
+        overflow: hidden;
       }
     `}
 
@@ -7752,6 +7799,24 @@ var SpaceMarginWrapper = styled6(motion.div)`
 `;
 var ModalPortal = () => {
   const modal = useContext(ModalContext);
+  const dismissRegistry = useContext(ModalOutsideClickContext);
+  useEffect(() => {
+    if (!dismissRegistry) {
+      return;
+    }
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") {
+        return;
+      }
+      if (modal.length === 0) {
+        return;
+      }
+      event.preventDefault();
+      dismissRegistry.requestOutsideClick();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [dismissRegistry, modal.length]);
   return /* @__PURE__ */ jsx(Fragment, { children: createPortal(
     /* @__PURE__ */ jsx(AnimatePresence, { children: modal.map((item, index) => /* @__PURE__ */ jsx(BackDrop_default, { zIndex: item.zIndex, children: /* @__PURE__ */ jsx(SpaceMarginWrapper, { children: item.component }) }, index)) }),
     document.body
@@ -7793,4 +7858,4 @@ classnames/index.js:
   *)
 */
 
-export { AnnualDatepicker_default as AnnualDatepicker, Avatar_default as Avatar, AvatarSizeVariants, Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, DayDatepicker_default as DayDatepicker, DayDatepickerSizeVariants, Dropdown_default as Dropdown, DropdownButton_default as DropdownButton, DropdownButtonContext, DropdownButtonSizeVariants, DropdownButtonStyleVariants, DropdownOptionVariants, HelperText_default as HelperText, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, InputSizeVariants, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalContext, ModalHandlerContext, ModalPortal_default as ModalProvider, ModalSize, MonthDatepicker_default as MonthDatepicker, MotionStack, MotionStackContainer, NumberCombobox_default as NumberCombobox, NumberComboboxSizeVariants, Pagination_default as Pagination, Popper_default as Popper, PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, SLIDER_Z_INDEX, ScrollArea_default as ScrollArea, SearchBar2 as SearchBar, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, Skeleton_default as Skeleton, Slider_default as Slider, SplitButton_default as SplitButton, SplitButtonContext, SplitButtonSizeVariants, SplitButtonStyleVariants, Stack_default as Stack, StackContainer_default as StackContainer, StyledIcon, StyledStack, StyledStackContainer, Switch_default as Switch, SwitchSizeVariants, TREE_SYMBOL_KEY, TabSizeVariants, TabStyleVariants, Tabs_default as Tabs, TabsContext, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, ToggleButton_default as ToggleButton, ToggleButtonSizeVariants, Tooltip_default as Tooltip, Tree_default as Tree, TreeItem, WeekDatepicker_default as WeekDatepicker, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
+export { AnnualDatepicker_default as AnnualDatepicker, Avatar_default as Avatar, AvatarSizeVariants, Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, DayDatepicker_default as DayDatepicker, DayDatepickerSizeVariants, Dropdown_default as Dropdown, DropdownButton_default as DropdownButton, DropdownButtonContext, DropdownButtonSizeVariants, DropdownButtonStyleVariants, DropdownOptionVariants, HelperText_default as HelperText, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, InputSizeVariants, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalContext, ModalHandlerContext, ModalOutsideClickContext, ModalPortal_default as ModalProvider, ModalSize, MonthDatepicker_default as MonthDatepicker, MotionStack, MotionStackContainer, NumberCombobox_default as NumberCombobox, NumberComboboxSizeVariants, Pagination_default as Pagination, Popper_default as Popper, PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, SLIDER_Z_INDEX, ScrollArea_default as ScrollArea, SearchBar2 as SearchBar, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, Skeleton_default as Skeleton, Slider_default as Slider, SplitButton_default as SplitButton, SplitButtonContext, SplitButtonSizeVariants, SplitButtonStyleVariants, Stack_default as Stack, StackContainer_default as StackContainer, StyledIcon, StyledStack, StyledStackContainer, Switch_default as Switch, SwitchSizeVariants, TREE_SYMBOL_KEY, TabSizeVariants, TabStyleVariants, Tabs_default as Tabs, TabsContext, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, ToggleButton_default as ToggleButton, ToggleButtonSizeVariants, Tooltip_default as Tooltip, Tree_default as Tree, TreeItem, WeekDatepicker_default as WeekDatepicker, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.46.26",
+  "version": "0.46.28",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {
@@ -92,9 +92,9 @@
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
-    "@shoplflow/hada-assets": "^0.1.10",
     "@shoplflow/shopl-assets": "^0.12.43",
-    "@shoplflow/utils": "^0.8.0"
+    "@shoplflow/utils": "^0.8.0",
+    "@shoplflow/hada-assets": "^0.1.10"
   },
   "homepage": "https://github.com/shopl/shoplflow#readme",
   "scripts": {