@shoplflow/base 0.13.9 → 0.15.0

package/dist/index.d.cts

@@ -8,9 +8,11 @@ import { IconSource as IconSource$1 } from '@shoplflow/hada-assets';
 import * as _emotion_styled from '@emotion/styled';
 import * as _emotion_react from '@emotion/react';
 import { $Values } from '@shoplflow/utils';
-import { Middleware } from '@floating-ui/react-dom';
 import { AutoPlacementOptions, Placement } from '@floating-ui/react';
+export { arrow, flip, hide, inline, offset, shift, size } from '@floating-ui/react';
+import { Middleware } from '@floating-ui/react-dom';
 import { OffsetOptions } from '@floating-ui/core';
+import { positionValues } from 'react-custom-scrollbars-2';
 
 declare type DomainType = 'SHOPL' | 'HADA';
 
@@ -568,8 +570,8 @@ interface PopperTriggerProps extends ChildrenProps, HTMLAttributes<HTMLDivElemen
      * popper가 열려있는지 여부를 결정합니다.
      */
     isOpen?: boolean;
-    width?: string;
-    height?: string;
+    width?: CSSProperties['width'];
+    height?: CSSProperties['height'];
 }
 interface PopperPortalProps extends ChildrenProps, HTMLAttributes<HTMLDivElement> {
     /**
@@ -596,6 +598,93 @@ declare const StyledPopper: _emotion_styled.StyledComponent<{
     as?: React$1.ElementType<any> | undefined;
 } & Pick<PopperTriggerProps, "height" | "width">, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
+interface ScrollAreaProps extends ScrollAreaOptionProps, ChildrenProps {
+}
+interface ScrollAreaOptionProps {
+    id?: string;
+    /**
+     * (Function) 스크롤 이벤트 핸들러
+     */
+    onScroll?: React$1.UIEventHandler<any>;
+    /**
+     * (Function) 애니메이션 프레임 내에서 실행됩니다.
+     */
+    onScrollFrame?: (values: positionValues) => void;
+    /**
+     * 스크롤이 시작될 때 호출됩니다.
+     */
+    onScrollStart?: () => void;
+    /**
+     * 스크롤이 멈출 때 호출됩니다.
+     */
+    onScrollStop?: () => void;
+    /**
+     * 컴포넌트가 업데이트될 때마다 호출됩니다. 애니메이션 프레임 내에서 실행됩니다.
+     */
+    onUpdate?: (values: positionValues) => void;
+    /**
+     * 콘텐츠가 렌더링될 요소
+     */
+    renderView?: React$1.ComponentType<any>;
+    /**
+     * 수평 트랙 요소
+     */
+    renderTrackHorizontal?: React$1.ComponentType<any>;
+    /**
+     * 수직 트랙 요소
+     */
+    renderTrackVertical?: React$1.ComponentType<any>;
+    /**
+     * 수평 스크롤 바 요소
+     */
+    renderThumbHorizontal?: React$1.ComponentType<any>;
+    /**
+     * 수직 스크롤 바 요소
+     */
+    renderThumbVertical?: React$1.ComponentType<any>;
+    tagName?: string;
+    /**
+     * 컨테이너가 오버플로되지 않을 때 트랙을 숨깁니다
+     */
+    hideTracksWhenNotNeeded?: boolean;
+    autoHide?: boolean;
+    /**
+     * 숨김 지연 시간(ms). (기본값: 1000)
+     */
+    autoHideTimeout?: number;
+    /**
+     * 숨김 지속 시간(ms). (기본값: 200)
+     */
+    autoHideDuration?: number;
+    /**
+     * 스크롤 바의 고정 크기를 px 단위로 설정합니다.
+     */
+    thumbSize?: number;
+    /**
+     * 최소 스크롤 바 크기를 px 단위로 설정합니다. (기본값: 30)
+     */
+    thumbMinSize?: number;
+    /**
+     * 범용 렌더링 활성화 (기본값: false)
+     */
+    universal?: boolean;
+    /**
+     * 자동 높이 모드 활성화. (기본값: true)
+     */
+    autoHeight?: boolean;
+    /**
+     * 자동 높이 모드의 최소 높이 설정 (기본값: 0)
+     */
+    autoHeightMin?: number | string;
+    /**
+     * 자동 높이 모드의 최대 높이 설정 (기본값: 200)
+     */
+    autoHeightMax?: number | string;
+    style?: React$1.CSSProperties;
+}
+
+declare const ScrollArea: ({ children, ...rest }: ScrollAreaProps) => react_jsx_runtime.JSX.Element;
+
 declare const dropdownOptionVar: {
     readonly CLICK: "CLICK";
     readonly OUTSIDE_CLICK: "OUTSIDE_CLICK";
@@ -609,8 +698,8 @@ interface DropdownOptionProps {
      * 외부에서 `isOpen`을 제어할 수 있습니다.
      */
     isOpen?: boolean;
-    content: ReactNode;
-    trigger: ReactNode;
+    trigger?: ReactNode;
+    popper?: ReactNode;
     /**
      * 드롭다운이 어떻게 닫힐 수 있는지 옵션을 설정합니다.
      *
@@ -620,8 +709,9 @@ interface DropdownOptionProps {
      * NONE: 클릭으로 닫히지 않습니다.
      */
     option?: DropdownOptionVar;
+    width?: CSSProperties['width'];
 }
-interface DropdownContentProps extends ChildrenProps, HTMLAttributes<HTMLDivElement> {
+interface DropdownContentProps extends HTMLAttributes<HTMLDivElement>, ChildrenProps {
     /**
      * 컨텐츠가 부모 `width`를 따라갈지, 고정될지 결정합니다.
      */
@@ -642,9 +732,6 @@ interface DropdownButtonProps extends HTMLAttributes<HTMLButtonElement>, Disable
      * placeholder를 설정합니다.
      */
     placeholder?: string;
-    /**
-     * 선택된 값을 노출합니다.
-     */
     value?: string;
     /**
      * width를 설정합니다.
@@ -653,9 +740,9 @@ interface DropdownButtonProps extends HTMLAttributes<HTMLButtonElement>, Disable
 }
 
 declare const Dropdown: {
-    ({ isOpen: initialIsOpen, trigger, content, option }: DropdownProps): react_jsx_runtime.JSX.Element;
+    ({ isOpen: initialIsOpen, trigger, popper, option, width, }: DropdownProps): react_jsx_runtime.JSX.Element;
     Button: React__default.ForwardRefExoticComponent<DropdownButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
-    Content: React__default.ForwardRefExoticComponent<DropdownContentProps & React__default.RefAttributes<HTMLDivElement>>;
+    Content: ({ children, width: initialWidth, type, onClick, ...rest }: DropdownContentProps) => react_jsx_runtime.JSX.Element;
 };
 
 declare const getDropdownHeightBySizeVar: (size: DropdownSizeVariantType) => "40px" | "32px";
@@ -665,6 +752,8 @@ declare const getDropdownIconSizeBySizeVar: (size: DropdownSizeVariantType) => _
 declare const StyledDropdown: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
     as?: React$1.ElementType<any> | undefined;
+} & {
+    width: CSSProperties['width'];
 }, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const StyledDropdownContent: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
@@ -1038,4 +1127,4 @@ interface MinusBoxOptionProps {
 
 declare const MinusButton: React__default.ForwardRefExoticComponent<MinusBoxProps & React__default.RefAttributes<HTMLButtonElement>>;
 
-export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVar, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledPopper, StyledStack, Switch, SwitchOptionProps, SwitchProps, Text, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVar, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledPopper, StyledStack, Switch, SwitchOptionProps, SwitchProps, Text, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };

package/dist/index.d.ts

@@ -8,9 +8,11 @@ import { IconSource as IconSource$1 } from '@shoplflow/hada-assets';
 import * as _emotion_styled from '@emotion/styled';
 import * as _emotion_react from '@emotion/react';
 import { $Values } from '@shoplflow/utils';
-import { Middleware } from '@floating-ui/react-dom';
 import { AutoPlacementOptions, Placement } from '@floating-ui/react';
+export { arrow, flip, hide, inline, offset, shift, size } from '@floating-ui/react';
+import { Middleware } from '@floating-ui/react-dom';
 import { OffsetOptions } from '@floating-ui/core';
+import { positionValues } from 'react-custom-scrollbars-2';
 
 declare type DomainType = 'SHOPL' | 'HADA';
 
@@ -568,8 +570,8 @@ interface PopperTriggerProps extends ChildrenProps, HTMLAttributes<HTMLDivElemen
      * popper가 열려있는지 여부를 결정합니다.
      */
     isOpen?: boolean;
-    width?: string;
-    height?: string;
+    width?: CSSProperties['width'];
+    height?: CSSProperties['height'];
 }
 interface PopperPortalProps extends ChildrenProps, HTMLAttributes<HTMLDivElement> {
     /**
@@ -596,6 +598,93 @@ declare const StyledPopper: _emotion_styled.StyledComponent<{
     as?: React$1.ElementType<any> | undefined;
 } & Pick<PopperTriggerProps, "height" | "width">, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
+interface ScrollAreaProps extends ScrollAreaOptionProps, ChildrenProps {
+}
+interface ScrollAreaOptionProps {
+    id?: string;
+    /**
+     * (Function) 스크롤 이벤트 핸들러
+     */
+    onScroll?: React$1.UIEventHandler<any>;
+    /**
+     * (Function) 애니메이션 프레임 내에서 실행됩니다.
+     */
+    onScrollFrame?: (values: positionValues) => void;
+    /**
+     * 스크롤이 시작될 때 호출됩니다.
+     */
+    onScrollStart?: () => void;
+    /**
+     * 스크롤이 멈출 때 호출됩니다.
+     */
+    onScrollStop?: () => void;
+    /**
+     * 컴포넌트가 업데이트될 때마다 호출됩니다. 애니메이션 프레임 내에서 실행됩니다.
+     */
+    onUpdate?: (values: positionValues) => void;
+    /**
+     * 콘텐츠가 렌더링될 요소
+     */
+    renderView?: React$1.ComponentType<any>;
+    /**
+     * 수평 트랙 요소
+     */
+    renderTrackHorizontal?: React$1.ComponentType<any>;
+    /**
+     * 수직 트랙 요소
+     */
+    renderTrackVertical?: React$1.ComponentType<any>;
+    /**
+     * 수평 스크롤 바 요소
+     */
+    renderThumbHorizontal?: React$1.ComponentType<any>;
+    /**
+     * 수직 스크롤 바 요소
+     */
+    renderThumbVertical?: React$1.ComponentType<any>;
+    tagName?: string;
+    /**
+     * 컨테이너가 오버플로되지 않을 때 트랙을 숨깁니다
+     */
+    hideTracksWhenNotNeeded?: boolean;
+    autoHide?: boolean;
+    /**
+     * 숨김 지연 시간(ms). (기본값: 1000)
+     */
+    autoHideTimeout?: number;
+    /**
+     * 숨김 지속 시간(ms). (기본값: 200)
+     */
+    autoHideDuration?: number;
+    /**
+     * 스크롤 바의 고정 크기를 px 단위로 설정합니다.
+     */
+    thumbSize?: number;
+    /**
+     * 최소 스크롤 바 크기를 px 단위로 설정합니다. (기본값: 30)
+     */
+    thumbMinSize?: number;
+    /**
+     * 범용 렌더링 활성화 (기본값: false)
+     */
+    universal?: boolean;
+    /**
+     * 자동 높이 모드 활성화. (기본값: true)
+     */
+    autoHeight?: boolean;
+    /**
+     * 자동 높이 모드의 최소 높이 설정 (기본값: 0)
+     */
+    autoHeightMin?: number | string;
+    /**
+     * 자동 높이 모드의 최대 높이 설정 (기본값: 200)
+     */
+    autoHeightMax?: number | string;
+    style?: React$1.CSSProperties;
+}
+
+declare const ScrollArea: ({ children, ...rest }: ScrollAreaProps) => react_jsx_runtime.JSX.Element;
+
 declare const dropdownOptionVar: {
     readonly CLICK: "CLICK";
     readonly OUTSIDE_CLICK: "OUTSIDE_CLICK";
@@ -609,8 +698,8 @@ interface DropdownOptionProps {
      * 외부에서 `isOpen`을 제어할 수 있습니다.
      */
     isOpen?: boolean;
-    content: ReactNode;
-    trigger: ReactNode;
+    trigger?: ReactNode;
+    popper?: ReactNode;
     /**
      * 드롭다운이 어떻게 닫힐 수 있는지 옵션을 설정합니다.
      *
@@ -620,8 +709,9 @@ interface DropdownOptionProps {
      * NONE: 클릭으로 닫히지 않습니다.
      */
     option?: DropdownOptionVar;
+    width?: CSSProperties['width'];
 }
-interface DropdownContentProps extends ChildrenProps, HTMLAttributes<HTMLDivElement> {
+interface DropdownContentProps extends HTMLAttributes<HTMLDivElement>, ChildrenProps {
     /**
      * 컨텐츠가 부모 `width`를 따라갈지, 고정될지 결정합니다.
      */
@@ -642,9 +732,6 @@ interface DropdownButtonProps extends HTMLAttributes<HTMLButtonElement>, Disable
      * placeholder를 설정합니다.
      */
     placeholder?: string;
-    /**
-     * 선택된 값을 노출합니다.
-     */
     value?: string;
     /**
      * width를 설정합니다.
@@ -653,9 +740,9 @@ interface DropdownButtonProps extends HTMLAttributes<HTMLButtonElement>, Disable
 }
 
 declare const Dropdown: {
-    ({ isOpen: initialIsOpen, trigger, content, option }: DropdownProps): react_jsx_runtime.JSX.Element;
+    ({ isOpen: initialIsOpen, trigger, popper, option, width, }: DropdownProps): react_jsx_runtime.JSX.Element;
     Button: React__default.ForwardRefExoticComponent<DropdownButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
-    Content: React__default.ForwardRefExoticComponent<DropdownContentProps & React__default.RefAttributes<HTMLDivElement>>;
+    Content: ({ children, width: initialWidth, type, onClick, ...rest }: DropdownContentProps) => react_jsx_runtime.JSX.Element;
 };
 
 declare const getDropdownHeightBySizeVar: (size: DropdownSizeVariantType) => "40px" | "32px";
@@ -665,6 +752,8 @@ declare const getDropdownIconSizeBySizeVar: (size: DropdownSizeVariantType) => _
 declare const StyledDropdown: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
     as?: React$1.ElementType<any> | undefined;
+} & {
+    width: CSSProperties['width'];
 }, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const StyledDropdownContent: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
@@ -1038,4 +1127,4 @@ interface MinusBoxOptionProps {
 
 declare const MinusButton: React__default.ForwardRefExoticComponent<MinusBoxProps & React__default.RefAttributes<HTMLButtonElement>>;
 
-export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVar, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledPopper, StyledStack, Switch, SwitchOptionProps, SwitchProps, Text, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVar, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledPopper, StyledStack, Switch, SwitchOptionProps, SwitchProps, Text, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };

package/dist/index.js

@@ -7,8 +7,9 @@ import { createPortal } from 'react-dom';
 import { noop, OutSideClick, useParentElementClick, useResizeObserver, isNullOrUndefined } from '@shoplflow/utils';
 import { css } from '@emotion/react';
 import Scrollbars from 'react-custom-scrollbars-2';
-import { useFloating } from '@floating-ui/react-dom';
 import { FloatingPortal, autoUpdate, offset, autoPlacement } from '@floating-ui/react';
+export { arrow, flip, hide, inline, offset, shift, size } from '@floating-ui/react';
+import { useFloating } from '@floating-ui/react-dom';
 import * as ShoplAssets from '@shoplflow/shopl-assets';
 import { DownArrowSolidXsmallIcon } from '@shoplflow/shopl-assets';
 import * as HadaAssets from '@shoplflow/hada-assets';
@@ -552,8 +553,8 @@ var MODAL_SIZE_M = 640;
 var MODAL_SIZE_L = 768;
 var MODAL_SIZE_XL = 1040;
 var MODAL_SIZE_XXL = 1280;
-var getModalWidthFromSize = (size) => {
-  switch (size) {
+var getModalWidthFromSize = (size2) => {
+  switch (size2) {
     case "XXS":
       return MODAL_SIZE_XXS;
     case "XS":
@@ -619,14 +620,21 @@ var BodyContainer = styled5.div`
   flex: 1;
   ${({ isIncludeHeader }) => getModalBodyTopBottomPadding(isIncludeHeader)}
 `;
+var ModalBodyContainerInner = styled5.div`
+  display: grid;
+  align-self: stretch;
+  flex-direction: column;
+  flex-grow: 1;
+  //스크롤 생성시 하단 padding 적용하기 위한 설정
+  height: calc(100%);
+  box-sizing: border-box;
+`;
 var ModalBodyContent = styled5.div`
   display: flex;
   flex-direction: column;
-  width: 100%;
-  max-width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
+  height: 100%;
   box-sizing: border-box;
   padding: 0 24px;
-  overflow: hidden;
   background: ${colorTokens.neutral0};
 `;
 var FooterContainer = styled5.div`
@@ -692,6 +700,11 @@ var ModalFooter = ({ children }) => {
 };
 ModalFooter[MODAL_FOOTER_KEY] = true;
 var ModalFooter_default = ModalFooter;
+var ScrollArea = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx(Scrollbars, __spreadProps(__spreadValues({ autoHide: true, autoHideTimeout: 1e3, autoHideDuration: 200 }, rest), { "data-shoplflow": "ScrollArea", children }));
+};
+var ScrollArea_default = ScrollArea;
 var ModalBody = ({
   children,
   isIncludeHeader = false,
@@ -726,20 +739,18 @@ var ModalBody = ({
   const heightUnderMaxHeight = windowHeight - topBottomMargin - headerFooterHeight;
   const heightOverMaxHeight = 1200 - topBottomMargin - headerFooterHeight;
   return /* @__PURE__ */ jsx(BodyContainer, { isIncludeHeader, height: setAutoHeightMin(), children: /* @__PURE__ */ jsx(
-    Scrollbars,
+    ScrollArea_default,
     {
       id: `scrollbar`,
+      universal: true,
       autoHeight: !modalContainerHeight,
       autoHeightMin: setAutoHeightMin(),
       autoHeightMax: windowHeight > 1200 ? heightOverMaxHeight : heightUnderMaxHeight,
-      autoHide: true,
-      autoHideTimeout: 1e3,
-      autoHideDuration: 200,
       style: {
         height: "100%",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ jsx(ModalBodyContent, { isIncludeHeader, sizeVar, children })
+      children: /* @__PURE__ */ jsx(ModalBodyContainerInner, { children: /* @__PURE__ */ jsx(ModalBodyContent, { isIncludeHeader, sizeVar, children }) })
     }
   ) });
 };
@@ -1400,10 +1411,8 @@ var CalloutTypes = {
   ALERT: "ALERT"
 };
 var StyledPopper = styled5.div`
-  display: flex;
-  flex-direction: row;
   width: ${({ width }) => width != null ? width : "fit-content"};
-  height: ${({ height }) => height != null ? height : "fit-content"};
+  height: ${({ height }) => height && height};
 `;
 var PopperContext = createContext(null);
 var usePopper = () => {
@@ -1492,8 +1501,8 @@ var PopperPortal2 = forwardRef(
 Popper.Trigger = PopperTrigger;
 Popper.Portal = PopperPortal2;
 var Popper_default = Popper;
-var getDropdownHeightBySizeVar = (size) => {
-  switch (size) {
+var getDropdownHeightBySizeVar = (size2) => {
+  switch (size2) {
     case "M":
       return "40px";
     case "S":
@@ -1502,8 +1511,8 @@ var getDropdownHeightBySizeVar = (size) => {
       return "40px";
   }
 };
-var getDropdownFontSizeBySizeVar = (size) => {
-  switch (size) {
+var getDropdownFontSizeBySizeVar = (size2) => {
+  switch (size2) {
     case "M":
       return "body1_400";
     case "S":
@@ -1512,8 +1521,8 @@ var getDropdownFontSizeBySizeVar = (size) => {
       return "body1_400";
   }
 };
-var getDropdownStyleBySizeVar = (size) => {
-  switch (size) {
+var getDropdownStyleBySizeVar = (size2) => {
+  switch (size2) {
     case "M":
       return css`
         padding: 4px 4px 4px 12px;
@@ -1528,8 +1537,8 @@ var getDropdownStyleBySizeVar = (size) => {
       `;
   }
 };
-var getDropdownIconSizeBySizeVar = (size) => {
-  switch (size) {
+var getDropdownIconSizeBySizeVar = (size2) => {
+  switch (size2) {
     case "S":
       return css`
         height: 24px;
@@ -1554,10 +1563,7 @@ var getDropdownIconSizeBySizeVar = (size) => {
   }
 };
 var StyledDropdown = styled5.div`
-  display: flex;
-  width: fit-content;
-  height: fit-content;
-  flex-direction: row;
+  width: ${({ width }) => width};
 `;
 var StyledDropdownContent = styled5.div`
   display: flex;
@@ -1638,8 +1644,8 @@ var IconSizeVariants = {
 };
 
 // src/components/Icon/Icon.styled.ts
-var getIconSize = (size) => {
-  switch (size) {
+var getIconSize = (size2) => {
+  switch (size2) {
     case IconSizeVariants.XS:
       return "12px";
     case IconSizeVariants.S:
@@ -1735,32 +1741,37 @@ var DropdownButton = forwardRef(
     );
   }
 );
-var DropdownContent = forwardRef(
-  ({ children, width: initialWidth, onClick, type = "FIXED" }, ref) => {
-    const { width, setIsOpen, option } = useDropdown();
-    const isFillType = type === "FILL";
-    const contentWidth = isFillType ? `${width}px` : initialWidth;
-    const returnCallbackByOption = () => {
-      if (option === "OUTSIDE_CLICK") {
-        return () => setIsOpen(false);
-      }
-      if (option === "CLICK") {
-        return () => setIsOpen(false);
-      }
-      return noop;
-    };
-    const handleClick = (e) => {
-      onClick && onClick(e);
-      if (option === "CLICK") {
-        setIsOpen(false);
-      }
-    };
-    return /* @__PURE__ */ jsx(OutSideClick, { outsideClick: returnCallbackByOption(), children: /* @__PURE__ */ jsx(StyledDropdownContent, { ref, width: contentWidth, onClick: handleClick, children }) });
-  }
-);
-var Dropdown = ({ isOpen: initialIsOpen, trigger, content, option = "OUTSIDE_CLICK" }) => {
+var DropdownContent = (_a) => {
+  var _b = _a, { children, width: initialWidth, type, onClick } = _b, rest = __objRest(_b, ["children", "width", "type", "onClick"]);
+  const { width, setIsOpen, option } = useDropdown();
+  const isFillType = type === "FILL";
+  const contentWidth = isFillType ? `${width}px` : initialWidth;
+  const returnCallbackByOption = () => {
+    if (option === "OUTSIDE_CLICK") {
+      return () => setIsOpen(false);
+    }
+    if (option === "CLICK") {
+      return () => setIsOpen(false);
+    }
+    return noop;
+  };
+  const handleClick = (e) => {
+    onClick && onClick(e);
+    if (option === "CLICK") {
+      setIsOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(OutSideClick, { outsideClick: returnCallbackByOption(), children: /* @__PURE__ */ jsx(StyledDropdownContent, __spreadProps(__spreadValues({ width: contentWidth, onClick: handleClick }, rest), { children })) });
+};
+var Dropdown = ({
+  isOpen: initialIsOpen = false,
+  trigger,
+  popper,
+  option = "CLICK",
+  width = "100%"
+}) => {
   const [triggerRef, setTriggerRef] = useState(null);
-  const [size, setSize] = useState({ width: 0, height: 0 });
+  const [size2, setSize] = useState({ width: 0, height: 0 });
   const [isOpen, setIsOpen] = useState(false);
   useEffect(() => {
     if (triggerRef) {
@@ -1776,15 +1787,16 @@ var Dropdown = ({ isOpen: initialIsOpen, trigger, content, option = "OUTSIDE_CLI
     }
     setIsOpen(initialIsOpen);
   }, [initialIsOpen]);
-  return /* @__PURE__ */ jsx(StyledDropdown, { "data-shoplflow": "Dropdown", children: /* @__PURE__ */ jsx(DropdownContext.Provider, { value: __spreadProps(__spreadValues({}, size), { isOpen, setIsOpen, option }), children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(StyledDropdown, { "data-shoplflow": "Dropdown", width, children: /* @__PURE__ */ jsx(DropdownContext.Provider, { value: __spreadProps(__spreadValues({}, size2), { isOpen, setIsOpen, option }), children: /* @__PURE__ */ jsxs(
     Popper_default,
     {
+      offset: 4,
       autoPlacement: {
         allowedPlacements: ["bottom-start", "top-start"]
       },
       children: [
-        /* @__PURE__ */ jsx(Popper_default.Trigger, { ref: setTriggerRef, isOpen, children: trigger }),
-        /* @__PURE__ */ jsx(Popper_default.Portal, { children: content })
+        /* @__PURE__ */ jsx(Popper_default.Trigger, { ref: setTriggerRef, isOpen, width, children: trigger }),
+        /* @__PURE__ */ jsx(Popper_default.Portal, { children: popper })
       ]
     }
   ) }) });
@@ -2266,6 +2278,6 @@ var MinusButton = forwardRef((_a, ref) => {
 });
 var MinusButton_default = MinusButton;
 
-export { Button_default as Button, Callout_default as Callout, CalloutTypes, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Dropdown_default as Dropdown, DropdownButtonIcon, Icon_default as Icon, IconButton_default as IconButton, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MinusButton_default as MinusButton, Modal, ModalPortal_default as ModalProvider, ModalSize, MotionStack, Popper_default as Popper, PopperPortal2 as PopperPortal, PopperTrigger, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledPopper, StyledStack, Switch_default as Switch, Text_default as Text, TextArea_default as TextArea, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { Button_default as Button, Callout_default as Callout, CalloutTypes, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Dropdown_default as Dropdown, DropdownButtonIcon, Icon_default as Icon, IconButton_default as IconButton, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MinusButton_default as MinusButton, Modal, ModalPortal_default as ModalProvider, ModalSize, MotionStack, Popper_default as Popper, PopperPortal2 as PopperPortal, PopperTrigger, ScrollArea_default as ScrollArea, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledPopper, StyledStack, Switch_default as Switch, Text_default as Text, TextArea_default as TextArea, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map