@croquiscom/pds 0.40.2 → 0.41.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @croquiscom/pds
 
+## 0.41.0
+
+### Minor Changes
+
+- a20ad2b: Modal Event 변경 및 중첩 사용시 유니크 ID 처리 추가
+
+  ## BreakPoint
+
+  Basic Modal Event 방식이 다음과 같이 변경되었습니다.
+
+  - onConfirm, onCancel 이벤트 발생시 동시에 전달하던 onClose 이벤트가 제거되었습니다.
+  - onClose 이벤트는 별도 외부 제어 이벤트가 없이 모달 자체의 close 트리거 발생할 경우 전달합니다.
+    - 외부 제어 이벤트(onCancel)없이 esc키 또는 오버레이 클릭등으로 닫힌 경우(canCloseEscapeKey => true, canClickOutside => true)
+  - onConfirm
+    - confirm 버튼 클릭시
+  - onCancel
+    - cancel 버튼 클릭시
+    - closeButton(x) 버튼 클릭시
+    - overlay 클릭시
+    - esc keyboard 이벤트 발생시
+  - onExit
+    - Modal destroy시
+
+  canCloseEscapeKey props 추가되었습니다.
+
+  - escapeKey 모달 닫힘 사용 여부로 현재 모달에 focus된 경우 동작합니다.
+  - onCancel 이벤트 제어가 있는 경우 내부 상태 제어를 하지 않습니다.
+
+  canClickOutside props default가 true로 변경되었습니다.
+
+  - onCancel 이벤트 제어가 있는 경우 내부 상태 제어를 하지 않습니다.
+
+## 0.40.3
+
+### Patch Changes
+
+- 13c0716: TextArea count 스타일 변경, Input maxLength count 노출 추가
+
 ## 0.40.2
 
 ### Patch Changes

package/dist/components/input/Input.stories.d.ts

@@ -8,10 +8,12 @@ export declare const Success: any;
 export declare const Disabled: any;
 export declare const EnteredDisabled: any;
 export declare const RightAlignment: any;
+export declare const MaxLength: any;
 export declare const Addon: any;
 export declare const Width: any;
 export declare const AddonWithWidth: any;
 export declare const AddonWithFormHelperText: () => JSX.Element[];
+export declare const MaxLengthWithCombined: () => JSX.Element;
 export declare const Password: () => JSX.Element;
 export declare const Search: any;
 export declare const WithButton: () => JSX.Element;

package/dist/components/input/InputBase.d.ts

@@ -16,6 +16,9 @@ export interface InputBaseType {
     /** @desc suffix */
     rightAddon?: InputAffixProps['suffix'];
     width?: CSSValueWithLength;
+    /** @default false */
+    showCounter?: boolean;
 }
 export type InputBaseProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'width'> & InputBaseType;
+export declare const controlledInputValue: (value: any) => string;
 export declare const InputBase: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "width"> & InputBaseType & React.RefAttributes<HTMLInputElement>>;

package/dist/components/input/NumericInput.d.ts

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, InputHTMLAttributes } from 'react';
 import { InputAffixProps } from './InputAffix';
 import { InputBaseType } from './InputBase';
-export interface NumericInputBaseType extends InputBaseType, InputAffixProps {
+export interface NumericInputBaseType extends Omit<InputBaseType, 'showCounter'>, InputAffixProps {
     value?: number | string | null;
     defaultValue?: number | string;
     /** @default true */

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

@@ -7,5 +7,5 @@ export interface AlertModalProps extends Omit<ConfirmModalProps, 'cancelText' |
      */
     kind?: NotificationKind;
 }
-export declare const AlertModal: ({ opened: openProp, kind, dense, fill, title, confirmText, text, subtext, onConfirm, onExited, ...props }: AlertModalProps) => JSX.Element;
+export declare const AlertModal: ({ 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,9 +1,8 @@
 /// <reference types="react" />
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { AlertModal, AlertModalProps } from './AlertModal';
-declare const _default: ComponentMeta<({ opened: openProp, kind, dense, fill, title, confirmText, text, subtext, onConfirm, onExited, ...props }: AlertModalProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ 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>;
-export declare const Fill: ComponentStory<typeof AlertModal>;
 export declare const Kind: ComponentStory<typeof AlertModal>;

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

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
 import { ModalProps } from './Modal';
-export interface ConfirmModalProps extends Omit<ModalProps, 'closeButton' | 'onConfirm' | 'onCancel' | 'onClose' | 'width' | 'footerAddon' | 'fullScreen' | 'canClickOutside'> {
+export interface ConfirmModalProps extends Omit<ModalProps, 'opened' | 'closeButton' | 'onConfirm' | 'onCancel' | 'width' | 'footerAddon' | 'fullScreen' | 'onClickBackButton'> {
     onConfirm?: () => void | Promise<void>;
     onCancel?: () => void | Promise<void>;
-    text: ReactNode;
+    text?: ReactNode;
     subtext?: ReactNode;
 }
-export declare const ConfirmModal: ({ opened: openProp, title, dense, fill, text, subtext, confirmText, cancelText, onConfirm, onCancel, onExited, ...props }: ConfirmModalProps) => JSX.Element;
+export declare const ConfirmModal: ({ title, 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,8 +1,7 @@
 /// <reference types="react" />
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { ConfirmModal } from './ConfirmModal';
-declare const _default: ComponentMeta<({ opened: openProp, title, dense, fill, text, subtext, confirmText, cancelText, onConfirm, onCancel, onExited, ...props }: import("./ConfirmModal").ConfirmModalProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ title, 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>;
-export declare const Fill: ComponentStory<typeof ConfirmModal>;

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

@@ -1,8 +1,9 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
 import { ButtonProps } from '../button';
 import { SpaceProps } from '../../styles';
-import { ModalOverlayBaseProps } from './ModalOverlay';
+import { ModalOverlayBaseProps, ModalBaseCancelReason } from './ModalOverlay';
 export type ModalButtonProps = Omit<ButtonProps, 'onClick'>;
+export type ModalCancelReason = ModalBaseCancelReason;
 export interface ModalProps extends ModalOverlayBaseProps {
     title?: ReactNode;
     confirmText?: string;
@@ -37,15 +38,19 @@ export interface ModalProps extends ModalOverlayBaseProps {
      */
     fixedFooter?: boolean;
     onConfirm?: () => void;
-    onCancel?: () => void;
+    /**
+     * @desc Modal Header backButton 클릭 이벤트
+     */
     onClickBackButton?: () => void;
-    onClickOverlay?: () => void;
 }
 export interface ModalContentProps extends Pick<ModalProps, 'fixedHeader' | 'fixedFooter' | 'dense'>, SpaceProps {
 }
 export declare const MIN_WIDTH = 480;
-export declare const Modal: ({ opened: openProp, children, title, width, confirmText, cancelText, closeButton, backButton, dense, fill, fullScreen, fixedHeader, fixedFooter, footer, confirmButtonProps, cancelButtonProps, contentProps, onConfirm, onCancel, onClose, onExited, onClickBackButton, onClickOverlay, ...props }: PropsWithChildren<ModalProps>) => JSX.Element;
+export declare const Modal: ({ opened: openProp, children, title, width, confirmText, cancelText, closeButton, backButton, dense, fill, fullScreen, fixedHeader, fixedFooter, footer, confirmButtonProps, cancelButtonProps, contentProps, onConfirm, onCancel, onExited, onClickBackButton, ...props }: PropsWithChildren<ModalProps>) => JSX.Element;
 export declare const ModalContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType<any>;
-} & ModalContentProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & ModalContentProps & {
+    headerHeight: number;
+    footerHeight: number;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1,13 +1,18 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { Modal } from './Modal';
-declare const _default: ComponentMeta<({ opened: openProp, children, title, width, confirmText, cancelText, closeButton, backButton, dense, fill, fullScreen, fixedHeader, fixedFooter, footer, confirmButtonProps, cancelButtonProps, contentProps, onConfirm, onCancel, onClose, onExited, onClickBackButton, onClickOverlay, ...props }: React.PropsWithChildren<import("./Modal").ModalProps>) => JSX.Element>;
+declare const _default: ComponentMeta<({ opened: openProp, children, title, width, confirmText, cancelText, closeButton, backButton, dense, fill, fullScreen, fixedHeader, fixedFooter, footer, confirmButtonProps, cancelButtonProps, contentProps, onConfirm, onCancel, onExited, onClickBackButton, ...props }: React.PropsWithChildren<import("./Modal").ModalProps>) => JSX.Element>;
 export default _default;
 export declare const Base: any;
 export declare const Dense: any;
 export declare const Fill: any;
-export declare const canClickOutside: 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>;
+export declare const NestingConfirm: ComponentStory<typeof Modal>;
 export declare const FullScreen: ComponentStory<typeof Modal>;
+export declare const MaxHeight: ComponentStory<typeof Modal>;

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

@@ -1,6 +1,9 @@
 import { PropsWithChildren, Dispatch, SetStateAction } from 'react';
 import { CSSValueWithLength } from '../../styles';
 import { CornerRadiusSize } from '../../foundation';
+export type ModalBaseCancelReason = 'cancelClick' | 'escapeKeyPress' | 'overlayClick';
+export declare const SAFE_TOP_BOTTOM_AREA = 120;
+export declare const SAFE_LEFT_RIGHT_AREA = 32;
 export interface ModalOverlayBaseProps {
     /**
      * @default 'pds-floating-root'
@@ -25,19 +28,26 @@ export interface ModalOverlayBaseProps {
      */
     zIndex?: number;
     /**
-     * @default false
+     * @desc Modal Overlay 영역 클릭시 모달 닫힘 사용 여부, onCancel 이벤트 제어가 있는 경우 useFloating 내부 상태 제어를 하지 않습니다.
+     * @default true
      */
     canClickOutside?: boolean;
+    /**
+     * @desc escapeKey 모달 닫힘 사용 여부, 현재 모달에 focus된 경우 동작합니다. onCancel 이벤트 제어가 있는 경우 useFloating 내부 상태 제어를 하지 않습니다.
+     * @default true
+     */
+    canCloseEscapeKey?: boolean;
     onExited?: () => void;
     onClose?: () => void;
+    onCancel?: (reason: ModalBaseCancelReason) => void;
 }
+export type ModalCloseEventCallback = Omit<ModalBaseCancelReason, 'cancelClick'>;
 export interface ModalOverlayProps extends ModalOverlayBaseProps {
-    maxWidth?: CSSValueWithLength;
     /**
      * @default large
      */
     borderRadiusSize?: CornerRadiusSize;
-    setOpened: Dispatch<SetStateAction<boolean>>;
-    onCloseOutsidePress?: () => void;
+    setOpened?: Dispatch<SetStateAction<boolean>>;
+    onCancelEventCallback?: (event: ModalCloseEventCallback) => void;
 }
-export declare const ModalOverlay: ({ floatingPortalId, width, maxWidth, borderRadiusSize, fill, fullScreen, className, children, opened: openProp, zIndex, canClickOutside, onExited, onClose, onCloseOutsidePress, setOpened, }: PropsWithChildren<ModalOverlayProps>) => JSX.Element;
+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;

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

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
 import { ModalOverlayBaseProps } from './ModalOverlay';
-export interface NoticeModalProps extends Omit<ModalOverlayBaseProps, 'fill' | 'fullScreen' | 'canClickOutside'> {
+export interface NoticeModalProps extends Omit<ModalOverlayBaseProps, 'fill' | 'fullScreen'> {
     label?: string;
     title?: ReactNode;
     text?: ReactNode;

package/dist/components/textarea/Textarea.d.ts

@@ -2,7 +2,6 @@ import React, { TextareaHTMLAttributes } from 'react';
 import { SizeProps } from '../../styles';
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, SizeProps {
     error?: boolean;
-    value?: string;
     /** @default false */
     showCounter?: boolean;
 }