@croquiscom/pds 0.41.0 → 0.42.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @croquiscom/pds
 
+## 0.42.1
+
+### Patch Changes
+
+- 5c01d67: LineTabs Indicator 애니메이션 버그 수정
+
+## 0.42.0
+
+### Minor Changes
+
+- 4fa2b71: IconVideo24 추가
+
+### Patch Changes
+
+- 05d8c33: Basic Modal onClose 이벤트 제거
+- 6eda063: z-index 내부 정의값 위계 변경, Dropdown, Popover hideMiddleware, flip 처리 추가
+
+  ## BreakPoint
+
+  z-index 위계가 아래와 같이 변경되었습니다.
+
+  - BottomSheet 1010 => 1020
+  - Modal 1020 => 1010
+
 ## 0.41.0
 
 ### Minor Changes
@@ -11,8 +35,6 @@
   Basic Modal Event 방식이 다음과 같이 변경되었습니다.
 
   - onConfirm, onCancel 이벤트 발생시 동시에 전달하던 onClose 이벤트가 제거되었습니다.
-  - onClose 이벤트는 별도 외부 제어 이벤트가 없이 모달 자체의 close 트리거 발생할 경우 전달합니다.
-    - 외부 제어 이벤트(onCancel)없이 esc키 또는 오버레이 클릭등으로 닫힌 경우(canCloseEscapeKey => true, canClickOutside => true)
   - onConfirm
     - confirm 버튼 클릭시
   - onCancel
@@ -20,18 +42,15 @@
     - closeButton(x) 버튼 클릭시
     - overlay 클릭시
     - esc keyboard 이벤트 발생시
-  - onExit
+  - onExited
     - Modal destroy시
 
   canCloseEscapeKey props 추가되었습니다.
 
   - escapeKey 모달 닫힘 사용 여부로 현재 모달에 focus된 경우 동작합니다.
-  - onCancel 이벤트 제어가 있는 경우 내부 상태 제어를 하지 않습니다.
 
   canClickOutside props default가 true로 변경되었습니다.
 
-  - onCancel 이벤트 제어가 있는 경우 내부 상태 제어를 하지 않습니다.
-
 ## 0.40.3
 
 ### Patch Changes

package/assets/icons/Video24.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 9C3 7.34315 4.34315 6 6 6H14C15.5949 6 16.8992 7.24464 16.9944 8.81563L18.0979 7.71213C19.1689 6.64119 21 7.39968 21 8.91421V15.0858C21 16.6003 19.1689 17.3588 18.0979 16.2879L16.9944 15.1844C16.8992 16.7554 15.5949 18 14 18H6C4.34315 18 3 16.6569 3 15V9ZM6 7.4H14C14.8837 7.4 15.6 8.11634 15.6 9V15C15.6 15.8837 14.8837 16.6 14 16.6H6C5.11634 16.6 4.4 15.8837 4.4 15V9C4.4 8.11634 5.11634 7.4 6 7.4ZM19.0879 8.70208C19.2769 8.51309 19.6 8.64694 19.6 8.91421V15.0858C19.6 15.3531 19.2769 15.4869 19.0879 15.2979L17.0879 13.2979C17.0316 13.2417 17 13.1654 17 13.0858V10.9142C17 10.8346 17.0316 10.7583 17.0879 10.7021L19.0879 8.70208Z" fill="#363644"/>
+</svg>

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

@@ -5,7 +5,7 @@ type BottomSheetContentWithCloseAction = (action: {
 export interface BottomSheetProps {
     className?: string;
     opened?: boolean;
-    /** @default 1010 */
+    /** @default 1020 */
     zIndex?: number;
     title?: ReactNode;
     subTitle?: ReactNode;

package/dist/components/icons/generated/Video24.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from '.';
+declare const SvgVideo24: ({ size, color, secondaryColor, ...props }: IconProps) => JSX.Element;
+export default SvgVideo24;

package/dist/components/icons/generated/index.d.ts

@@ -164,6 +164,7 @@ export { default as IconTwo18 } from './Two18';
 export { default as IconUpload50 } from './Upload50';
 export { default as IconUser18 } from './User18';
 export { default as IconVideo16 } from './Video16';
+export { default as IconVideo24 } from './Video24';
 export { default as IconVvip18 } from './Vvip18';
 export { default as IconWarning24 } from './Warning24';
 export { default as IconWon16 } from './Won16';

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

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

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<({ kind, dense, fill, title, confirmText, text, subtext, onConfirm, onExited, ...props }: AlertModalProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ width, kind, dense, fill, title, confirmText, text, subtext, onConfirm, 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

@@ -1,10 +1,15 @@
 import { ReactNode } from 'react';
-import { ModalProps } from './Modal';
-export interface ConfirmModalProps extends Omit<ModalProps, 'opened' | 'closeButton' | 'onConfirm' | 'onCancel' | 'width' | 'footerAddon' | 'fullScreen' | 'onClickBackButton'> {
-    onConfirm?: () => void | Promise<void>;
-    onCancel?: () => void | Promise<void>;
+import { ModalOverlayBaseProps } from './ModalOverlay';
+export interface ConfirmModalProps extends Omit<ModalOverlayBaseProps, 'onClose' | 'fullScreen'> {
+    title: ReactNode;
     text?: ReactNode;
     subtext?: ReactNode;
+    dense?: boolean;
+    confirmText?: string;
+    cancelText?: string;
+    onConfirm?: () => void | Promise<void>;
+    onCancel?: () => void | Promise<void>;
+    onClose?: () => void | Promise<void>;
 }
-export declare const ConfirmModal: ({ title, dense, fill, text, subtext, confirmText, cancelText, onConfirm, onCancel, onClose, onExited, ...props }: ConfirmModalProps) => JSX.Element;
+export declare const ConfirmModal: ({ title, width, dense, fill, text, subtext, confirmText, cancelText, onConfirm, onCancel, onClose, onExited, ...props }: ConfirmModalProps) => JSX.Element;
 export declare const Confirm: (properties: ConfirmModalProps) => Promise<boolean>;

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

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

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

@@ -4,7 +4,7 @@ import { SpaceProps } from '../../styles';
 import { ModalOverlayBaseProps, ModalBaseCancelReason } from './ModalOverlay';
 export type ModalButtonProps = Omit<ButtonProps, 'onClick'>;
 export type ModalCancelReason = ModalBaseCancelReason;
-export interface ModalProps extends ModalOverlayBaseProps {
+export interface ModalProps extends Omit<ModalOverlayBaseProps, 'onClose'> {
     title?: ReactNode;
     confirmText?: string;
     confirmButtonProps?: ModalButtonProps;
@@ -38,6 +38,10 @@ export interface ModalProps extends ModalOverlayBaseProps {
      */
     fixedFooter?: boolean;
     onConfirm?: () => void;
+    /**
+     * @desc cancel 이벤트, reason('cancelClick' | 'escapeKeyPress' | 'overlayClick')을 포함하여 전달합니다.
+     */
+    onCancel?: (reason: ModalBaseCancelReason) => void;
     /**
      * @desc Modal Header backButton 클릭 이벤트
      */

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

@@ -9,7 +9,6 @@ export declare const Fill: any;
 export declare const DisabledOverlayEscape: any;
 export declare const WithBackButton: any;
 export declare const ControlledCancelEvent: ComponentStory<typeof Modal>;
-export declare const UncontrolledCancelEvent: ComponentStory<typeof Modal>;
 export declare const CustomFooter: ComponentStory<typeof Modal>;
 export declare const CustomContent: ComponentStory<typeof Modal>;
 export declare const NestingModal: ComponentStory<typeof Modal>;

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

@@ -2,14 +2,10 @@ import { PropsWithChildren, Dispatch, SetStateAction } from 'react';
 import { CSSValueWithLength } from '../../styles';
 import { CornerRadiusSize } from '../../foundation';
 export type ModalBaseCancelReason = 'cancelClick' | 'escapeKeyPress' | 'overlayClick';
+export type ModalCloseEventCallback = Omit<ModalBaseCancelReason, 'cancelClick'>;
 export declare const SAFE_TOP_BOTTOM_AREA = 120;
 export declare const SAFE_LEFT_RIGHT_AREA = 32;
 export interface ModalOverlayBaseProps {
-    /**
-     * @default 'pds-floating-root'
-     * @desc FloatingPortal node id, render 함수로 Floating 노드를 생성하는 경우가 아닌 경우에는 디폴트 아이디값으로 처리합니다.
-     */
-    floatingPortalId?: string;
     /**
      * @desc 안전여백을 포함한 100% 너비 사용, Alert 또는 Confirm Modal의 경우 최소너비(480) 범위내에서 적용됩니다.
      * @default false
@@ -24,30 +20,38 @@ export interface ModalOverlayBaseProps {
     className?: string;
     opened?: boolean;
     /**
-     * @default 1020
+     * @default 1010
      */
     zIndex?: number;
     /**
-     * @desc Modal Overlay 영역 클릭시 모달 닫힘 사용 여부, onCancel 이벤트 제어가 있는 경우 useFloating 내부 상태 제어를 하지 않습니다.
+     * @desc Modal Overlay 영역 클릭시 모달 닫힘 사용 여부
      * @default true
      */
     canClickOutside?: boolean;
     /**
-     * @desc escapeKey 모달 닫힘 사용 여부, 현재 모달에 focus된 경우 동작합니다. onCancel 이벤트 제어가 있는 경우 useFloating 내부 상태 제어를 하지 않습니다.
+     * @desc escapeKey 모달 닫힘 사용 여부, 현재 모달에 focus된 경우 동작합니다.
      * @default true
      */
     canCloseEscapeKey?: boolean;
     onExited?: () => void;
     onClose?: () => void;
-    onCancel?: (reason: ModalBaseCancelReason) => void;
 }
-export type ModalCloseEventCallback = Omit<ModalBaseCancelReason, 'cancelClick'>;
 export interface ModalOverlayProps extends ModalOverlayBaseProps {
+    /**
+     * @default 'pds-floating-root'
+     * @desc FloatingPortal node id, render 함수로 Floating 노드를 생성하는 경우가 아닌 경우에는 디폴트 아이디값으로 처리합니다.
+     */
+    floatingPortalId?: string;
     /**
      * @default large
      */
     borderRadiusSize?: CornerRadiusSize;
     setOpened?: Dispatch<SetStateAction<boolean>>;
     onCancelEventCallback?: (event: ModalCloseEventCallback) => void;
+    /**
+     * @desc esc, overlay 클릭으로 인한 모달 닫힘 상태 내부 제어 여부, Confirm/Alert 모달과 같이 함수 호출형 컴포넌트에 해당합니다.
+     * @default false
+     */
+    uncontrolledOpen?: boolean;
 }
-export declare const ModalOverlay: ({ floatingPortalId, width, borderRadiusSize, fill, fullScreen, className, children, opened: openProp, zIndex, canClickOutside, canCloseEscapeKey, onExited, onClose, onCancel, onCancelEventCallback, setOpened, }: PropsWithChildren<ModalOverlayProps>) => JSX.Element;
+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;

package/dist/components/tabs/LineTab.d.ts

@@ -8,10 +8,6 @@ export declare const LineTab: ({ id, onClick, className, children, ...props }: P
 export declare const TabItemWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType<any>;
-} & import("../stack").VStackProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme;
 } & {
     $width: TabWidth;
-    focused?: boolean;
-    selected: boolean;
-}, {}, {}>;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;