@croquiscom/pds 0.42.5 → 0.44.0

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

@@ -1,16 +1,30 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
 import { ButtonProps } from '../button';
-import { SpaceProps } from '../../styles';
+import { CSSValueWithLength, SpaceProps } from '../../styles';
 import { ModalOverlayBaseProps, ModalBaseCancelReason } from './ModalOverlay';
 export type ModalButtonProps = Omit<ButtonProps, 'onClick'>;
 export type ModalCancelReason = ModalBaseCancelReason;
+export interface ModalContentProps extends SpaceProps {
+    maxHeight?: CSSValueWithLength;
+}
+type LayoutHeightType = {
+    header: number;
+    footer: number;
+};
 export interface ModalProps extends Omit<ModalOverlayBaseProps, 'onClose'> {
     title?: ReactNode;
     confirmText?: string;
+    /**
+     * [ButtonProps](https://storybook.kakaostyle.in/master/pds/?path=/docs/component-button--primary)를 confirmButton에 적용할 수 있습니다.
+     */
     confirmButtonProps?: ModalButtonProps;
+    /**
+     * [ButtonProps](https://storybook.kakaostyle.in/master/pds/?path=/docs/component-button--primary)를 cancelButton에 적용할 수 있습니다.
+     */
     cancelText?: string;
     cancelButtonProps?: ModalButtonProps;
     /**
+     * 헤더 영역 타이틀 좌측 backButton 사용 유무
      * @default false
      */
     backButton?: boolean;
@@ -19,42 +33,46 @@ export interface ModalProps extends Omit<ModalOverlayBaseProps, 'onClose'> {
      */
     closeButton?: boolean;
     /**
+     * 좁은 간격 사용 유무
      * @default false
      */
     dense?: boolean;
-    contentProps?: ModalContentProps;
     /**
-     * @desc Footer content, 커스텀 푸터 요소 사용시 default Footer(confirmText, cancelText)는 미노출됩니다.
+     * 바디 영역 콘텐츠 ModalContentProps를 통한 커스텀이 가능합니다.
+     *  - [SpaceProps](https://github.com/croquiscom/pds/blob/main/src/styles/space.ts)
+     *  - maxHeight
      */
-    footer?: ReactNode;
+    contentProps?: ModalContentProps;
     /**
-     * @desc Modal Header position 고정 여부, fullScreen일 경우만 적용됩니다.
-     * @default false
+     * 푸터 영역을 커스텀할 수 있습니다.
+     *  - 기본 Footer(confirmText, cancelText)는 미노출됩니다.
+     *  - dense 속성이 적용되지 않습니다.
+     *  - fullScreen 속성이 true일 경우 자동 해당 영역은 fixed 처리 됩니다.
      */
-    fixedHeader?: boolean;
+    footer?: ReactNode;
     /**
-     * @desc Modal Footer position 고정 여부, fullScreen일 경우만 적용됩니다.
+     * 전체화면 사용 유무, 헤더/푸터 영역이 자동 고정됩니다.
      * @default false
      */
-    fixedFooter?: boolean;
+    fullScreen?: boolean;
     onConfirm?: () => void;
     /**
-     * @desc cancel 이벤트, reason('cancelClick' | 'escapeKeyPress' | 'overlayClick')을 포함하여 전달합니다.
+     * reason을 포함한 cancel 이벤트를 전달합니다.
+     *  - 'cancelClick' | 'escapeKeyPress' | 'overlayClick'
      */
     onCancel?: (reason: ModalBaseCancelReason) => void;
     /**
-     * @desc Modal Header backButton 클릭 이벤트
+     * Modal Header backButton 클릭 이벤트
      */
     onClickBackButton?: () => 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, onExited, onClickBackButton, ...props }: PropsWithChildren<ModalProps>) => JSX.Element;
+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 ModalContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType<any>;
 } & ModalContentProps & {
-    headerHeight: number;
-    footerHeight: number;
+    fixed: boolean;
+    layoutHeight: LayoutHeightType;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

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, 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>;
+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>;
 export default _default;
 export declare const Base: any;
 export declare const Dense: any;
@@ -15,4 +15,6 @@ export declare const NestingModal: ComponentStory<typeof Modal>;
 export declare const NestingChildModal: ComponentStory<typeof Modal>;
 export declare const NestingConfirm: ComponentStory<typeof Modal>;
 export declare const FullScreen: ComponentStory<typeof Modal>;
-export declare const MaxHeight: ComponentStory<typeof Modal>;
+export declare const CustomFooterFullScreen: ComponentStory<typeof Modal>;
+export declare const AutoMaxHeight: ComponentStory<typeof Modal>;
+export declare const CustomMaxHeight: ComponentStory<typeof Modal>;

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

@@ -7,32 +7,35 @@ export declare const SAFE_TOP_BOTTOM_AREA = 120;
 export declare const SAFE_LEFT_RIGHT_AREA = 32;
 export interface ModalOverlayBaseProps {
     /**
-     * @desc 안전여백을 포함한 100% 너비 사용, Alert 또는 Confirm Modal의 경우 최소너비(480) 범위내에서 적용됩니다.
+     * 100% 너비 사용 유무
      * @default false
      */
     fill?: boolean;
     /**
-     * @desc 전체화면 가로 세로폭 사용 유무, Alert 또는 Confirm Modal의 경우 적용되지 않습니다.
-     * @default false
+     * Modal 너비를 지정할 수 있습니다.
+     * @default 480
      */
-    fullScreen?: boolean;
     width?: CSSValueWithLength;
     className?: string;
     opened?: boolean;
     /**
+     * 기본값으로 [ZIndexOrder](https://github.com/croquiscom/pds/blob/main/src/styles/zIndex.ts) 규칙을 적용합니다.
      * @default 1010
      */
     zIndex?: number;
     /**
-     * @desc Modal Overlay 영역 클릭시 모달 닫힘 사용 여부
+     * Overlay 영역 클릭시 모달 닫힘 사용 여부
      * @default true
      */
     canClickOutside?: boolean;
     /**
-     * @desc escapeKey 모달 닫힘 사용 여부, 현재 모달에 focus된 경우 동작합니다.
+     * escapeKey 모달 닫힘 사용 여부, 현재 모달에 focus된 경우 동작합니다.
      * @default true
      */
     canCloseEscapeKey?: boolean;
+    /**
+     * Modal destroy시 전달합니다.
+     */
     onExited?: () => void;
     onClose?: () => void;
 }
@@ -42,6 +45,11 @@ export interface ModalOverlayProps extends ModalOverlayBaseProps {
      * @desc FloatingPortal node id, render 함수로 Floating 노드를 생성하는 경우가 아닌 경우에는 디폴트 아이디값으로 처리합니다.
      */
     floatingPortalId?: string;
+    /**
+     * 전체화면 사용 유무
+     * @default false
+     */
+    fullScreen?: boolean;
     /**
      * @default large
      */

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

@@ -1,17 +1,31 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
 import { ModalOverlayBaseProps } from './ModalOverlay';
-export interface NoticeModalProps extends Omit<ModalOverlayBaseProps, 'fill' | 'fullScreen'> {
+import { CSSValueWithLength } from '../../styles';
+export interface NoticeModalProps extends Omit<ModalOverlayBaseProps, 'fill' | 'width'> {
+    /**
+     * 헤더 영역 상단 라벨 노출 요소
+     */
     label?: string;
     title?: ReactNode;
     text?: ReactNode;
     /**
+     * Modal 너비를 지정할 수 있습니다.
+     * @default 500
+     */
+    width?: CSSValueWithLength;
+    /**
+     * 푸터 영역 좌측 체크박스 사용 유무
      * @default false
      */
     checkReplay?: boolean;
     /**
+     * 푸터 영역 좌측 체크박스 라벨 텍스트
      * @default '오늘 하루동안 이 창을 열지 않음'
      */
     checkReplayText?: string;
+    /**
+     * 푸터 영역 좌측 체크박스 change 이벤트를 전달합니다.
+     */
     onChangeCheckReplay?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const NoticeModal: ({ opened: openProp, children, width, label, title, text, checkReplay, checkReplayText, onClose, onExited, onChangeCheckReplay, ...props }: PropsWithChildren<NoticeModalProps>) => JSX.Element;
+export declare const NoticeModal: ({ opened: openProp, children, width, zIndex, label, title, text, checkReplay, checkReplayText, onClose, onExited, onChangeCheckReplay, ...props }: PropsWithChildren<NoticeModalProps>) => JSX.Element;

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, label, title, text, checkReplay, checkReplayText, onClose, onExited, onChangeCheckReplay, ...props }: React.PropsWithChildren<import("./NoticeModal").NoticeModalProps>) => JSX.Element>;
+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>;
 export default _default;
 export declare const Base: any;

package/dist/components/notification/Notification.d.ts

@@ -2,6 +2,12 @@ import React, { ReactNode } from 'react';
 import { MessageManager } from '../message';
 import { NotificationKind, NotificationPosition } from './types';
 export interface NotificationComponentProps {
+    /**
+     * id값을 지정할 수 있습니다.
+     *  - id값은 unique 해야합니다.
+     *  - 해당 id값으로 destroy 수동 처리가 가능합니다.
+     *  - 지정하지 않을 경우 messageManager generateMessageId를 통해 자동으로 생성되어 관리됩니다.
+     */
     id?: string;
     /** @default info */
     kind?: NotificationKind;
@@ -9,8 +15,14 @@ export interface NotificationComponentProps {
     content: ReactNode;
     confirmText?: string;
     cancelText?: string;
+    /**
+     * 하단 좌측 링크 텍스트
+     */
     linkText?: string;
-    /** @default false */
+    /**
+     * 닫힘 버튼 사용 유무
+     * @default false
+     */
     closeButton?: boolean;
     onConfirm?: () => void;
     onCancel?: () => void;

package/dist/components/pagination/Pagination.d.ts

@@ -1,19 +1,25 @@
 import { HTMLAttributes } from 'react';
 export interface PaginationProps extends HTMLAttributes<HTMLUListElement> {
     disabled?: boolean;
+    /**
+     * 전체 페이지 갯수, 음수 또는 undefined일 경우 렌더되지 않습니다.
+     */
     totalPages: number;
     currentPage: number;
     /**
-     * @desc 현재페이지 기준 좌/우 표시할 페이지 버튼 갯수
+     * 현재페이지 기준 좌/우 표시할 페이지 버튼 갯수
      * @default 4
      */
     siblingCount?: number;
     /**
-     * @desc 맨처음/맨끝 표시할 페이지 버튼 갯수
+     * 맨처음/맨끝 표시할 페이지 버튼 갯수
      * @default 1
      */
     boundaryCount?: number;
-    /** @default true */
+    /**
+     * Pagination 좌/우 화살표 인디케이터 사용 유무
+     * @default true
+     */
     showArrowButton?: boolean;
     onChangePage?: (page: number) => void;
 }

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

@@ -10,9 +10,15 @@ export interface PopoverProps {
     className?: string;
     children: ReactNode;
     content: PopoverContent | PopoverWithCloseAction;
-    /** @default false */
+    /**
+     * main app node 바깥영역으로 생성할지 여부
+     * @default false
+     */
     noUsePortal?: boolean;
-    /** @default 1060 */
+    /**
+     * 기본값으로 [ZIndexOrder](https://github.com/croquiscom/pds/blob/main/src/styles/zIndex.ts) 규칙을 적용합니다.
+     * @default 1060
+     */
     zIndex?: number;
     /** 미지정인경우 자동 배치 처리됩니다. */
     placement?: Placement;

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

@@ -10,12 +10,13 @@ export declare const useLineTabContext: () => LineTabsContextProps;
 export interface LineTabsProps {
     className?: string;
     /**
-     * @desc 'fill' 일경우 컨테이너 기준 Full Width 값, 'auto' 일경우 컨텐츠에 따라 자동 너비 계산됩니다.
+     * 'fill' 일경우 컨테이너 기준 Full Width 값, 'auto' 일경우 컨텐츠에 따라 자동 너비 계산됩니다.
      * @default 'auto'
      */
     width?: TabWidth;
     /**
-     * @desc width가 'auto' 일경우 탭아이템간 column-gap은 항상 0입니다.
+     * 좁은 간격 사용 유무
+     *  - width가 'auto' 일경우 탭아이템간 column-gap은 항상 0입니다.
      * @default false
      */
     dense?: boolean;

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

@@ -2,7 +2,10 @@ import React, { TextareaHTMLAttributes } from 'react';
 import { SizeProps } from '../../styles';
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, SizeProps {
     error?: boolean;
-    /** @default false */
+    /**
+     * 입력된 value count 노출 여부
+     * @default false
+     */
     showCounter?: boolean;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/time-picker/TimePicker.d.ts

@@ -2,14 +2,32 @@
 import { CSSValueWithLength } from '../../styles';
 export interface TimePickerProps {
     className?: string;
+    /**
+     * Input 너비를 지정할 수 있습니다.
+     */
     width?: CSSValueWithLength;
+    /**
+     * 기본값으로 [ZIndexOrder](https://github.com/croquiscom/pds/blob/main/src/styles/zIndex.ts) 규칙을 적용합니다.
+     * @default 1035
+     */
+    zIndex?: number;
     error?: boolean;
     disabled?: boolean;
     value?: Date;
     onClose?: () => void;
     onOpen?: () => void;
     onChange?: (value: Date | null) => void;
+    /**
+     * 지정된 배수 단위로 분 설정이 가능합니다.
+     * @default 1
+     */
     incrementMinute?: number;
+    /**
+     * Input 우측 입력한 value를 지울 수 있는 remove 버튼 사용 유무
+     *   - 입력된 value가 없다면 기본 시계 아이콘이 노출됩니다.
+     *   - 입력된 value가 있다면 마우스 호버시 remove 버튼이 노출됩니다.
+     * @default false
+     */
     showRemoveButton?: boolean;
 }
-export declare const TimePicker: ({ disabled, value, error, width, className, onOpen, onClose, onChange, incrementMinute, showRemoveButton, }: TimePickerProps) => JSX.Element;
+export declare const TimePicker: ({ disabled, value, error, width, zIndex, className, onOpen, onClose, onChange, incrementMinute, showRemoveButton, }: TimePickerProps) => JSX.Element;

package/dist/components/time-picker/TimePicker.stories.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<({ disabled, value, error, width, className, onOpen, onClose, onChange, incrementMinute, showRemoveButton, }: import("./TimePicker").TimePickerProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ disabled, value, error, width, zIndex, className, onOpen, onClose, onChange, incrementMinute, showRemoveButton, }: import("./TimePicker").TimePickerProps) => JSX.Element>;
 export default _default;
 export declare const Base: any;
 export declare const Disabled: any;

package/dist/components/time-picker/TimePickerOverlay.d.ts

@@ -7,7 +7,10 @@ export interface TimePickerOverlayProps {
     children: React.ReactNode;
     className?: string;
     content?: ReactNode | ContentWithCloseAction;
-    /** @default 1035 */
+    /**
+     * 기본값으로 [ZIndexOrder](https://github.com/croquiscom/pds/blob/main/src/styles/zIndex.ts) 규칙을 적용합니다.
+     * @default 1035
+     */
     zIndex?: number;
     opened?: boolean;
     disabled?: boolean;

package/dist/components/time-picker/TimeRangePicker.d.ts

@@ -5,8 +5,11 @@ type TimeRange = {
     to: Date | null;
 };
 export interface TimeRangePickerProps extends Omit<TimePickerProps, 'value' | 'onChange'> {
+    /**
+     * { from: Date | null; to: Date | null }
+     */
     value?: TimeRange;
     onChange?: (start: TimeRange['from'], end: TimeRange['to']) => void;
 }
-export declare const TimeRangePicker: ({ disabled, value, error, width, className, onOpen, onClose, onChange, incrementMinute, showRemoveButton, }: TimeRangePickerProps) => JSX.Element;
+export declare const TimeRangePicker: ({ disabled, value, error, width, className, zIndex, onOpen, onClose, onChange, incrementMinute, showRemoveButton, }: TimeRangePickerProps) => JSX.Element;
 export {};

package/dist/components/time-picker/TimeRangePicker.stories.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<({ disabled, value, error, width, className, onOpen, onClose, onChange, incrementMinute, showRemoveButton, }: import("./TimeRangePicker").TimeRangePickerProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ disabled, value, error, width, className, zIndex, onOpen, onClose, onChange, incrementMinute, showRemoveButton, }: import("./TimeRangePicker").TimeRangePickerProps) => JSX.Element>;
 export default _default;
 export declare const Base: any;
 export declare const Disabled: any;

package/dist/components/toast/Toast.d.ts

@@ -2,15 +2,20 @@ import React, { ReactNode } from 'react';
 import { MessageManager } from '../message';
 import { ToastSize, ToastKind } from './types';
 export interface ToastComponentProps {
+    /**
+     * id값을 지정할 수 있습니다.
+     *  - id값은 unique 해야합니다.
+     *  - 해당 id값으로 destroy 수동 처리가 가능합니다.
+     *  - 지정하지 않을 경우 messageManager generateMessageId를 통해 자동으로 생성되어 관리됩니다.
+     */
     id?: string;
     content: ReactNode;
     /**
-     * @desc 지속시간(ms)
+     * 지속시간(ms)
      * @default 3000
      */
     duration?: number;
     /**
-     * @desc 토스트 사이즈
      * @default medium
      */
     size?: ToastSize;

package/dist/components/tooltip/Tooltip.d.ts

@@ -6,22 +6,34 @@ type TooltipContentWithCloseAction = (action: {
     close(): void;
 }) => ReactNode;
 export interface TooltipProps extends TooltipBaseProps {
-    /** @desc reference element를 구할 수 있는 컴포넌트여야 합니다. */
+    /** reference element를 구할 수 있는 컴포넌트여야 합니다. */
     children: React.ReactNode;
     className?: string;
     content?: ReactNode | TooltipContentWithCloseAction;
-    /** @default true */
+    /**
+     * Overlay 영역 클릭시 닫힘 사용 여부
+     * @default true
+     */
     canClickOutside?: boolean;
     /** @default hover */
     openerTriggerEvent?: OpenerTriggerEvent;
     /** @default top */
     placement?: Placement;
-    /** @default 1070 */
+    /**
+     * 기본값으로 [ZIndexOrder](https://github.com/croquiscom/pds/blob/main/src/styles/zIndex.ts) 규칙을 적용합니다.
+     * @default 1070
+     */
     zIndex?: number;
-    /** @default false */
+    /**
+     * main app node 바깥영역으로 생성할지 여부
+     * @default false
+     */
     noUsePortal?: boolean;
     opened?: boolean;
-    /** @default false */
+    /**
+     * 닫힘버튼 사용 유무
+     * @default false
+     */
     closeButton?: boolean;
     onClose?: () => void;
     onOpen?: () => void;

package/dist/hooks/useResize.d.ts

@@ -0,0 +1 @@
+export declare function useResize(delay?: number): number[];