@croquiscom/pds 0.45.1 → 0.45.3

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @croquiscom/pds
 
+## 0.45.3
+
+### Patch Changes
+
+- f338cc7: AlertModal onClose 이벤트 resolve 누락 처리 추가
+- 5810b54: feat: FileUpload 컴포넌트 onClickUpload prop 추가, multiple 업로드시 리턴 타입 배열로 변경 #224
+
+## 0.45.2
+
+### Patch Changes
+
+- db1cbff: Modal Dismiss 이벤트 중첩 제어 추가, floating-ui 디펜던시 업데이트
+
+  ## BreakPoint
+
+  Notice Modal Event 방식이 다음과 같이 변경되었습니다.
+
+  - onClose 이벤트가 제거되었습니다.
+  - onCancel 이벤트가 추가되었습니다.
+    - 닫기 버튼 클릭시
+    - overlay 클릭시
+    - esc keyboard 이벤트 발생시
+
 ## 0.45.1
 
 ### Patch Changes

package/dist/components/bottom-sheet/BottomSheet.d.ts

@@ -14,10 +14,15 @@ export interface BottomSheetProps {
     subTitle?: ReactNode;
     content?: ReactNode | BottomSheetContentWithCloseAction;
     /**
-     * 오버레이 클릭 닫힘 사용 여부
+     * outside 영역 클릭시 닫힘 사용 여부
      * @default true
      */
     canClickOutside?: boolean;
+    /**
+     * escapeKey 키이벤트 닫힘 사용 여부
+     * @default true
+     */
+    canCloseEscapeKey?: boolean;
     /**
      * 드래그 닫힘 사용 여부
      * @default true
@@ -25,5 +30,5 @@ export interface BottomSheetProps {
     canDragClose?: boolean;
     onClose?: () => void;
 }
-export declare const BottomSheet: ({ className, zIndex, opened: openProp, canClickOutside, canDragClose, title, subTitle, content, onClose, }: BottomSheetProps) => JSX.Element;
+export declare const BottomSheet: ({ className, zIndex, opened: openProp, canClickOutside, canCloseEscapeKey, canDragClose, title, subTitle, content, onClose, }: BottomSheetProps) => JSX.Element;
 export {};

package/dist/components/bottom-sheet/BottomSheet.stories.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { BottomSheet } from './BottomSheet';
-declare const _default: ComponentMeta<({ className, zIndex, opened: openProp, canClickOutside, canDragClose, title, subTitle, content, onClose, }: import("./BottomSheet").BottomSheetProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ className, zIndex, opened: openProp, canClickOutside, canCloseEscapeKey, canDragClose, title, subTitle, content, onClose, }: import("./BottomSheet").BottomSheetProps) => JSX.Element>;
 export default _default;
 export declare const Base: any;
 export declare const MaxHeight: ComponentStory<typeof BottomSheet>;

package/dist/components/context/FloatingTree.d.ts

@@ -0,0 +1,2 @@
+import React, { ComponentType } from 'react';
+export declare const FloatingTreeContext: <T>(Component: React.ComponentType<T>) => React.ComponentType<T>;

package/dist/components/context/index.d.ts

@@ -0,0 +1 @@
+export * from './FloatingTree';

package/dist/components/date-picker/DatePicker.d.ts

@@ -24,11 +24,6 @@ export interface DatePickerBaseProps {
     opened?: boolean;
     onOpen?: () => void;
     onClose?: () => void;
-    /**
-     * Overlay 영역 클릭시 닫힘 사용 여부
-     * @default true
-     */
-    canClickOutside?: boolean;
     /**
      * 기본값으로 [ZIndexOrder](https://github.com/croquiscom/pds/blob/main/src/styles/zIndex.ts) 규칙을 적용합니다.
      * @default 1035
@@ -70,4 +65,4 @@ export interface DatePickerProps extends DatePickerBaseProps {
     showFooter?: boolean;
     onChange?: (value: Date | null) => void;
 }
-export declare const DatePicker: ({ width, error, disabled, className, placeholder, displayTimeFormat, value, disabledDays, canClickOutside, showRemoveButton, showTodayButton, showTimePicker, showFooter, zIndex, onChange, opened: openProp, onOpen, onClose, }: DatePickerProps) => JSX.Element;
+export declare const DatePicker: ({ width, error, disabled, className, placeholder, displayTimeFormat, value, disabledDays, showRemoveButton, showTodayButton, showTimePicker, showFooter, zIndex, onChange, opened: openProp, onOpen, onClose, }: DatePickerProps) => JSX.Element;

package/dist/components/date-picker/DatePicker.stories.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<({ width, error, disabled, className, placeholder, displayTimeFormat, value, disabledDays, canClickOutside, showRemoveButton, showTodayButton, showTimePicker, showFooter, zIndex, onChange, opened: openProp, onOpen, onClose, }: import("./DatePicker").DatePickerProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ width, error, disabled, className, placeholder, displayTimeFormat, value, disabledDays, showRemoveButton, showTodayButton, showTimePicker, showFooter, zIndex, onChange, opened: openProp, onOpen, onClose, }: import("./DatePicker").DatePickerProps) => JSX.Element>;
 export default _default;
 export declare const Base: any;
 export declare const Disabled: any;

package/dist/components/date-picker/DateRangePicker.d.ts

@@ -36,4 +36,4 @@ export interface DateRangePickerProps extends DatePickerBaseProps {
     numberOfMonths?: number;
     onChange?: (start: Dates['from'], end: Dates['to']) => void;
 }
-export declare const DateRangePicker: ({ width, error, disabled, className, showDatePreset, dates, maxDate, minDate, maxRange, numberOfMonths, canClickOutside, showRemoveButton, opened: openProp, customDatePreset, onOpen, onClose, onChange, }: DateRangePickerProps) => JSX.Element;
+export declare const DateRangePicker: ({ width, error, disabled, className, showDatePreset, dates, maxDate, minDate, maxRange, numberOfMonths, showRemoveButton, opened: openProp, customDatePreset, onOpen, onClose, onChange, }: DateRangePickerProps) => JSX.Element;

package/dist/components/date-picker/DateRangePicker.stories.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<({ width, error, disabled, className, showDatePreset, dates, maxDate, minDate, maxRange, numberOfMonths, canClickOutside, showRemoveButton, opened: openProp, customDatePreset, onOpen, onClose, onChange, }: import("./DateRangePicker").DateRangePickerProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ width, error, disabled, className, showDatePreset, dates, maxDate, minDate, maxRange, numberOfMonths, showRemoveButton, opened: openProp, customDatePreset, onOpen, onClose, onChange, }: import("./DateRangePicker").DateRangePickerProps) => JSX.Element>;
 export default _default;
 export declare const Base: any;
 export declare const Disabled: any;

package/dist/components/date-picker/DayPickerOverlay.d.ts

@@ -7,8 +7,6 @@ export interface DayPickerOverlayProps {
     children: React.ReactNode;
     className?: string;
     content?: ReactNode | ContentWithCloseAction;
-    /** @default true */
-    canClickOutside?: boolean;
     /** @default 1035 */
     zIndex?: number;
     opened?: boolean;
@@ -18,5 +16,5 @@ export interface DayPickerOverlayProps {
     onCloseOutsidePress?: () => void;
     setOpened: Dispatch<SetStateAction<boolean>>;
 }
-export declare const DayPickerOverlay: ({ children, className, content, canClickOutside, zIndex, opened: openProp, disabled, onClose, onOpen, onCloseOutsidePress, setOpened, }: DayPickerOverlayProps) => JSX.Element;
+export declare const DayPickerOverlay: ({ children, className, content, zIndex, opened: openProp, disabled, onClose, onOpen, onCloseOutsidePress, setOpened, }: DayPickerOverlayProps) => JSX.Element;
 export {};

package/dist/components/date-picker/styles.d.ts

@@ -6,7 +6,11 @@ export declare const range_input_default_style: {
     backgroundColor: string;
     padding: number;
     transition: string;
-    '&:hover, &:focus, &:focus-within': {
+    '&:hover': {
         borderColor: string;
     };
+    '&:focus, &:focus-within': {
+        outline: string;
+        border: string;
+    };
 };

package/dist/components/dropdown/styles.d.ts

@@ -18,3 +18,10 @@ export declare const dropdown_item_selected_style: {
 export declare const dropdown_item_focused_style: {
     backgroundColor: string;
 };
+export declare const dropdown_item_group_focus_style: {
+    outline: string;
+    zIndex: number;
+    '&:focus': {
+        outline: string;
+    };
+};

package/dist/components/file-upload/FileUpload.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading';
 export type FileType = File & {
     [key: string]: any;
@@ -36,7 +36,11 @@ export interface FileUploadProps {
      * FileList를 노출하려면 지정된 UploadFile 타입으로 전달해야합니다.
      */
     fileList?: UploadFile[];
-    onChange?: (file: File | FileList) => void;
+    onChange?: (file: File | File[]) => void;
+    /**
+     * 파일 업로드 버튼 클릭시 실행되는 이벤트
+     */
+    onClick?: React.MouseEventHandler<HTMLInputElement>;
     /**
      * FileList 클릭시 인덱스 정보와 함께 전달합니다.
      */
@@ -50,4 +54,4 @@ export interface FileUploadProps {
      */
     onClickFileRemove?: (file: UploadFile, index: number) => void;
 }
-export declare const FileUpload: ({ className, accept, label, disabled, multiple, maxCount, showRemoveButton, fileList, onChange, onClickFile, onLimitMaxCount, onClickFileRemove, }: FileUploadProps) => JSX.Element;
+export declare const FileUpload: ({ className, accept, label, disabled, multiple, maxCount, showRemoveButton, fileList, onChange, onClick, onClickFile, onLimitMaxCount, onClickFileRemove, }: FileUploadProps) => JSX.Element;

package/dist/components/file-upload/FileUpload.stories.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { FileUpload } from './FileUpload';
-declare const _default: ComponentMeta<({ className, accept, label, disabled, multiple, maxCount, showRemoveButton, fileList, onChange, onClickFile, onLimitMaxCount, onClickFileRemove, }: import("./FileUpload").FileUploadProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ className, accept, label, disabled, multiple, maxCount, showRemoveButton, fileList, onChange, onClick, onClickFile, onLimitMaxCount, onClickFileRemove, }: import("./FileUpload").FileUploadProps) => JSX.Element>;
 export default _default;
 export declare const Base: any;
 export declare const MaxCount: any;
 export declare const DisabledHideRemoveButton: any;
 export declare const OnlyJpgFileExtension: any;
+export declare const ClickUploadButton: any;
 export declare const FileStatus: ComponentStory<typeof FileUpload>;
 export declare const Disabled: ComponentStory<typeof FileUpload>;
 export declare const MultipleFileUpload: ComponentStory<typeof FileUpload>;

package/dist/components/file-upload/FileUploadButton.d.ts

@@ -4,6 +4,6 @@ export interface FileUploadButtonProps extends Omit<InputHTMLAttributes<HTMLInpu
     label: ReactNode;
     /** @default false */
     multiple?: boolean;
-    onFileUpload?: (file: File | FileList) => void;
+    onFileUpload?: (file: File | File[]) => void;
 }
 export declare const FileUploadButton: ({ accept, label, disabled, className, multiple, onFileUpload, ...props }: FileUploadButtonProps) => JSX.Element;

package/dist/components/modal/AlertModal.d.ts

@@ -7,5 +7,5 @@ export interface AlertModalProps extends Omit<ConfirmModalProps, 'cancelText' |
      */
     kind?: NotificationKind;
 }
-export declare const AlertModal: ({ width, kind, dense, fill, title, confirmText, text, subtext, zIndex, onConfirm, onExited, ...props }: AlertModalProps) => JSX.Element;
-export declare const Alert: (properties: AlertModalProps) => Promise<void>;
+export declare const AlertModal: ({ width, kind, dense, fill, title, confirmText, text, subtext, zIndex, onConfirm, onClose, onExited, ...props }: AlertModalProps) => JSX.Element;
+export declare const Alert: (properties: AlertModalProps) => Promise<boolean>;

package/dist/components/modal/AlertModal.stories.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { AlertModal, AlertModalProps } from './AlertModal';
-declare const _default: ComponentMeta<({ width, kind, dense, fill, title, confirmText, text, subtext, zIndex, onConfirm, onExited, ...props }: AlertModalProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ width, kind, dense, fill, title, confirmText, text, subtext, zIndex, onConfirm, onClose, onExited, ...props }: AlertModalProps) => JSX.Element>;
 export default _default;
 export declare const Base: ComponentStory<typeof AlertModal>;
 export declare const Dense: ComponentStory<typeof AlertModal>;

package/dist/components/modal/ConfirmModal.d.ts

@@ -11,10 +11,16 @@ export interface ConfirmModalProps extends Omit<ModalOverlayBaseProps, 'onClose'
     confirmText?: string;
     cancelText?: string;
     /**
-     * onConfirm/onCancel이 호출된 직후 onClose가 호출됩니다.
+     * confirmButton 클릭 이벤트
      */
     onConfirm?: () => void | Promise<void>;
+    /**
+     * cancelButton 클릭 이벤트
+     */
     onCancel?: () => void | Promise<void>;
+    /**
+     * onConfirm/onCancel이 호출된 직후 onClose가 호출됩니다.
+     */
     onClose?: () => void | Promise<void>;
 }
 export declare const ConfirmModal: ({ title, width, zIndex, dense, fill, text, subtext, confirmText, cancelText, onConfirm, onCancel, onClose, onExited, ...props }: ConfirmModalProps) => JSX.Element;

package/dist/components/modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { ButtonProps } from '../button';
 import { CSSValueWithLength, SpaceProps } from '../../styles';
 import { ModalOverlayBaseProps, ModalBaseCancelReason } from './ModalOverlay';
@@ -18,10 +18,10 @@ export interface ModalProps extends Omit<ModalOverlayBaseProps, 'onClose'> {
      * [ButtonProps](https://storybook.kakaostyle.in/master/pds/?path=/docs/component-button--primary)를 confirmButton에 적용할 수 있습니다.
      */
     confirmButtonProps?: ModalButtonProps;
+    cancelText?: string;
     /**
      * [ButtonProps](https://storybook.kakaostyle.in/master/pds/?path=/docs/component-button--primary)를 cancelButton에 적용할 수 있습니다.
      */
-    cancelText?: string;
     cancelButtonProps?: ModalButtonProps;
     /**
      * 헤더 영역 타이틀 좌측 backButton 사용 유무
@@ -60,14 +60,14 @@ export interface ModalProps extends Omit<ModalOverlayBaseProps, 'onClose'> {
      * reason을 포함한 cancel 이벤트를 전달합니다.
      *  - 'cancelClick' | 'escapeKeyPress' | 'overlayClick'
      */
-    onCancel?: (reason: ModalBaseCancelReason) => void;
+    onCancel?: (reason: ModalCancelReason) => void;
     /**
      * Modal Header backButton 클릭 이벤트
      */
     onClickBackButton?: () => void;
 }
 export declare const MIN_WIDTH = 480;
-export declare const Modal: ({ opened: openProp, children, title, width, zIndex, confirmText, cancelText, closeButton, backButton, dense, fill, fullScreen, footer, confirmButtonProps, cancelButtonProps, contentProps, onConfirm, onCancel, onExited, onClickBackButton, ...props }: PropsWithChildren<ModalProps>) => JSX.Element;
+export declare const Modal: React.ComponentType<React.PropsWithChildren<ModalProps>>;
 export declare const ModalContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType<any>;

package/dist/components/modal/Modal.stories.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { Modal } from './Modal';
-declare const _default: ComponentMeta<({ opened: openProp, children, title, width, zIndex, confirmText, cancelText, closeButton, backButton, dense, fill, fullScreen, footer, confirmButtonProps, cancelButtonProps, contentProps, onConfirm, onCancel, onExited, onClickBackButton, ...props }: React.PropsWithChildren<import("./Modal").ModalProps>) => JSX.Element>;
+declare const _default: ComponentMeta<React.ComponentType<React.PropsWithChildren<import("./Modal").ModalProps>>>;
 export default _default;
 export declare const Base: any;
 export declare const Dense: any;

package/dist/components/modal/ModalOverlay.d.ts

@@ -24,12 +24,12 @@ export interface ModalOverlayBaseProps {
      */
     zIndex?: number;
     /**
-     * Overlay 영역 클릭시 모달 닫힘 사용 여부
+     * outside 영역 클릭시 닫힘 사용 여부
      * @default true
      */
     canClickOutside?: boolean;
     /**
-     * escapeKey 모달 닫힘 사용 여부, 현재 모달에 focus된 경우 동작합니다.
+     * escapeKey 키이벤트 닫힘 사용 여부
      * @default true
      */
     canCloseEscapeKey?: boolean;
@@ -55,11 +55,11 @@ export interface ModalOverlayProps extends ModalOverlayBaseProps {
      */
     borderRadiusSize?: CornerRadiusSize;
     setOpened?: Dispatch<SetStateAction<boolean>>;
-    onCancelEventCallback?: (event: ModalCloseEventCallback) => void;
+    onCancelEventCallback?: (event: ModalCloseEventCallback, floatingContainerId?: string) => void;
     /**
-     * @desc esc, overlay 클릭으로 인한 모달 닫힘 상태 내부 제어 여부, Confirm/Alert 모달과 같이 함수 호출형 컴포넌트에 해당합니다.
+     * @desc esc, overlay 클릭으로 인한 모달 닫힘 상태 외부 제어 여부
      * @default false
      */
-    uncontrolledOpen?: boolean;
+    controlledOpen?: boolean;
 }
-export declare const ModalOverlay: ({ floatingPortalId, width, borderRadiusSize, fill, fullScreen, className, children, opened: openProp, zIndex, canClickOutside, canCloseEscapeKey, uncontrolledOpen, onExited, onClose, onCancelEventCallback, setOpened, }: PropsWithChildren<ModalOverlayProps>) => JSX.Element;
+export declare const ModalOverlay: ({ floatingPortalId, width, borderRadiusSize, fill, fullScreen, className, children, opened: openProp, zIndex, canClickOutside, canCloseEscapeKey, controlledOpen, onExited, onClose, onCancelEventCallback, setOpened, }: PropsWithChildren<ModalOverlayProps>) => JSX.Element;

package/dist/components/modal/ModalStoryArgTypes.d.ts

@@ -0,0 +1,240 @@
+export declare const ModalStoryArgTypes: {
+    title: {
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+    };
+    confirmText: {
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+    };
+    cancelText: {
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+    };
+    backButton: {
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+    };
+    confirmButtonProps: {
+        description: string;
+        table: {
+            type: {
+                summary: string;
+                detail: string;
+            };
+        };
+    };
+    cancelButtonProps: {
+        description: string;
+        table: {
+            type: {
+                summary: string;
+                detail: string;
+            };
+        };
+    };
+    closeButton: {
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+    };
+    dense: {
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+    };
+    contentProps: {
+        description: string;
+        table: {
+            type: {
+                summary: string;
+                detail: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+    };
+    footer: {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+    };
+    fullScreen: {
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+    };
+    onConfirm: {
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+    };
+    onCancel: {
+        description: string;
+        table: {
+            type: {
+                summary: string;
+                detail: string;
+            };
+        };
+    };
+    onClickBackButton: {
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+    };
+    className: {
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+    };
+    fill: {
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+    };
+    zIndex: {
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+    };
+    opened: {
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+    };
+    canClickOutside: {
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+    };
+    canCloseEscapeKey: {
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+    };
+    width: {
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+    };
+    onExited: {
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+    };
+};

package/dist/components/modal/NoticeModal.d.ts

@@ -1,7 +1,8 @@
-import React, { PropsWithChildren, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
+import { ModalCancelReason } from './Modal';
 import { ModalOverlayBaseProps } from './ModalOverlay';
 import { CSSValueWithLength } from '../../styles';
-export interface NoticeModalProps extends Omit<ModalOverlayBaseProps, 'fill' | 'width'> {
+export interface NoticeModalProps extends Omit<ModalOverlayBaseProps, 'fill' | 'width' | 'onClose'> {
     /**
      * 헤더 영역 상단 라벨 노출 요소
      */
@@ -23,9 +24,14 @@ export interface NoticeModalProps extends Omit<ModalOverlayBaseProps, 'fill' | '
      * @default '오늘 하루동안 이 창을 열지 않음'
      */
     checkReplayText?: string;
+    /**
+     * reason을 포함한 cancel 이벤트를 전달합니다.
+     *  - 'cancelClick' | 'escapeKeyPress' | 'overlayClick'
+     */
+    onCancel?: (reason: ModalCancelReason) => void;
     /**
      * 푸터 영역 좌측 체크박스 change 이벤트를 전달합니다.
      */
     onChangeCheckReplay?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const NoticeModal: ({ opened: openProp, children, width, zIndex, label, title, text, checkReplay, checkReplayText, onClose, onExited, onChangeCheckReplay, ...props }: PropsWithChildren<NoticeModalProps>) => JSX.Element;
+export declare const NoticeModal: React.ComponentType<React.PropsWithChildren<NoticeModalProps>>;

package/dist/components/modal/NoticeModal.stories.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<({ opened: openProp, children, width, zIndex, label, title, text, checkReplay, checkReplayText, onClose, onExited, onChangeCheckReplay, ...props }: React.PropsWithChildren<import("./NoticeModal").NoticeModalProps>) => JSX.Element>;
+declare const _default: ComponentMeta<React.ComponentType<React.PropsWithChildren<import("./NoticeModal").NoticeModalProps>>>;
 export default _default;
 export declare const Base: any;

package/dist/components/modal/useManualDismiss.d.ts

@@ -0,0 +1,26 @@
+import { FloatingTreeType, FloatingContext } from '@floating-ui/react';
+export interface DismissPayload {
+    type: 'outsidePress' | 'referencePress' | 'escapeKey' | 'mouseLeave';
+    data: {
+        returnFocus: boolean | {
+            preventScroll: boolean;
+        };
+    };
+}
+export interface UseManualDismissProps {
+    controlled?: boolean;
+    rootId: string;
+    tree: FloatingTreeType;
+    context: FloatingContext;
+    dismissEventType?: Array<Partial<DismissPayload['type']>>;
+    callbackTypeWithFn?: (type: DismissPayload['type']) => void;
+}
+/**
+ * @desc Modal dismiss event share
+ *  - [Dismiss](https://floating-ui.com/docs/useDismiss)실행시 context 이벤트를 구독하여 중첩 요소간 이벤트 순차 핸들링을 지원합니다.
+ *  - 제어 조건
+ *    - FloatingTreeContext를 통해 생성된 요소로 useFloatingNodeId를 통한 context 주입이 되어야합니다.
+ *    - 노드 구조가 자식 요소로써 중첩 호출된 케이스인 경우 자동으로 순차 호출된 dismiss 이벤트를 전달합니다.(https://github.com/floating-ui/floating-ui/pull/2114)
+ *    - 노드 구조가 형제 요소로써 중첩 호출된 케이스인 경우 현재 활성된 요소부터 dismiss 이벤트를 전달합니다.
+ */
+export declare function useManualDismiss({ controlled, rootId, tree, context, dismissEventType, callbackTypeWithFn, }: UseManualDismissProps): void;

package/dist/components/popover/Popover.d.ts

@@ -39,6 +39,11 @@ export interface PopoverProps {
     placement?: Placement;
     /** @default hover */
     openerTriggerEvent?: OpenerTriggerEvent;
+    /**
+     * outside 영역 클릭시 닫힘 사용 여부
+     * @default true
+     */
+    canClickOutside?: boolean;
 }
 export declare const Popover: React.FC<PopoverProps>;
 export {};

package/dist/components/popover/Popover.stories.d.ts

@@ -6,6 +6,7 @@ export default _default;
 export declare const Base: any;
 export declare const HoverIcon: () => JSX.Element;
 export declare const Placement: ComponentStory<typeof Popover>;
+export declare const Trigger: () => JSX.Element;
 export declare const TemplateWithCloseButton: {
     (): JSX.Element;
     parameters: {