@croquiscom/pds 0.42.0 → 0.42.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @croquiscom/pds
 
+## 0.42.2
+
+### Patch Changes
+
+- 911ddfc: FileUploadButton multiple 지원 추가, Dropdown autoPlacement, maxHeight 옵셔널 지원 추가
+
+## 0.42.1
+
+### Patch Changes
+
+- 5c01d67: LineTabs Indicator 애니메이션 버그 수정
+
 ## 0.42.0
 
 ### Minor Changes
@@ -36,7 +48,7 @@
     - closeButton(x) 버튼 클릭시
     - overlay 클릭시
     - esc keyboard 이벤트 발생시
-  - onExit
+  - onExited
     - Modal destroy시
 
   canCloseEscapeKey props 추가되었습니다.

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

@@ -8,13 +8,22 @@ export interface DropdownOption<OptionValue> {
 export interface DropdownProps<OptionValue> {
     className?: string;
     width?: CSSValueWithLength;
+    /**
+     * @desc Dropdown maxHeight값
+     * @default 400
+     */
+    maxHeight?: number;
     /** @default 1030 */
     zIndex?: number;
     disabled?: boolean;
     options: Array<DropdownOption<OptionValue>>;
     placeholder?: string;
     value?: OptionValue;
+    /**
+     * @desc floating 요소가 reference 영역을 넘어갈 경우 자동 위치 처리 사용 유무
+     */
+    autoPlacement?: boolean;
     keyExtractor?: (item: DropdownOption<OptionValue>, index: number) => string | number;
     onChange?: (value: OptionValue) => void;
 }
-export declare const Dropdown: <OptionValue extends string | number>({ className, width, zIndex, disabled, options, placeholder, value, keyExtractor, onChange, }: DropdownProps<OptionValue>) => JSX.Element;
+export declare const Dropdown: <OptionValue extends string | number>({ className, width, maxHeight, zIndex, disabled, options, placeholder, value, autoPlacement: autoPlacementProps, keyExtractor, onChange, }: DropdownProps<OptionValue>) => JSX.Element;

package/dist/components/dropdown/Dropdown.stories.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { Dropdown } from './Dropdown';
-declare const _default: ComponentMeta<(<OptionValue extends string | number>({ className, width, zIndex, disabled, options, placeholder, value, keyExtractor, onChange, }: import("./Dropdown").DropdownProps<OptionValue>) => JSX.Element)>;
+declare const _default: ComponentMeta<(<OptionValue extends string | number>({ className, width, maxHeight, zIndex, disabled, options, placeholder, value, autoPlacement: autoPlacementProps, keyExtractor, onChange, }: import("./Dropdown").DropdownProps<OptionValue>) => JSX.Element)>;
 export default _default;
 export declare const Base: any;
 export declare const Disabled: any;
 export declare const DisabledOptionItem: any;
+export declare const MaxHeight: any;
 export declare const WithIcon: ComponentStory<typeof Dropdown>;
 export declare const Controlled: ComponentStory<typeof Dropdown>;

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

@@ -16,6 +16,7 @@ export interface FileUploadProps {
     label?: ReactNode;
     accept?: HTMLInputElement['accept'];
     disabled?: boolean;
+    multiple?: boolean;
     maxCount?: number;
     /**
      * @default true
@@ -25,9 +26,9 @@ export interface FileUploadProps {
      * @desc FileUploadButton과 함께 업로드된 FileList를 노출하려면 지정된 UploadFile 타입으로 전달해야합니다.
      */
     fileList?: UploadFile[];
-    onChange?: (file: File) => void;
-    onClickFile?: (file: UploadFile) => void;
+    onChange?: (file: File | FileList) => void;
+    onClickFile?: (file: UploadFile, index: number) => void;
     onLimitMaxCount?: () => void;
-    onClickFileRemove?: (file: UploadFile) => void;
+    onClickFileRemove?: (file: UploadFile, index: number) => void;
 }
-export declare const FileUpload: ({ className, accept, label, disabled, maxCount, showRemoveButton, fileList, onChange, onClickFile, onLimitMaxCount, onClickFileRemove, }: FileUploadProps) => JSX.Element;
+export declare const FileUpload: ({ className, accept, label, disabled, multiple, maxCount, showRemoveButton, fileList, onChange, onClickFile, onLimitMaxCount, onClickFileRemove, }: FileUploadProps) => JSX.Element;

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

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { FileUpload } from './FileUpload';
-declare const _default: ComponentMeta<({ className, accept, label, disabled, 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, 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 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

@@ -2,6 +2,8 @@ import { ReactNode, InputHTMLAttributes } from 'react';
 export interface FileUploadButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'multiple'> {
     /** @default '파일 업로드' */
     label: ReactNode;
-    onFileUpload?: (file: File) => void;
+    /** @default false */
+    multiple?: boolean;
+    onFileUpload?: (file: File | FileList) => void;
 }
-export declare const FileUploadButton: ({ accept, label, disabled, className, onFileUpload, ...props }: FileUploadButtonProps) => JSX.Element;
+export declare const FileUploadButton: ({ accept, label, disabled, className, multiple, onFileUpload, ...props }: FileUploadButtonProps) => JSX.Element;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<({ accept, label, disabled, className, onFileUpload, ...props }: import("./FileUploadButton").FileUploadButtonProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ accept, label, disabled, className, multiple, onFileUpload, ...props }: import("./FileUploadButton").FileUploadButtonProps) => JSX.Element>;
 export default _default;
 export declare const Base: any;
 export declare const Disabled: any;
+export declare const Multiple: any;

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,11 +1,15 @@
 import { ReactNode } from 'react';
-import { ModalProps } from './Modal';
-export interface ConfirmModalProps extends Omit<ModalProps, 'opened' | 'closeButton' | 'onConfirm' | 'onCancel' | 'width' | 'footerAddon' | 'fullScreen' | 'onClickBackButton'> {
+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>;
-    text?: ReactNode;
-    subtext?: ReactNode;
 }
-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/ModalOverlay.d.ts

@@ -6,11 +6,6 @@ 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
@@ -42,6 +37,11 @@ export interface ModalOverlayBaseProps {
     onClose?: () => void;
 }
 export interface ModalOverlayProps extends ModalOverlayBaseProps {
+    /**
+     * @default 'pds-floating-root'
+     * @desc FloatingPortal node id, render 함수로 Floating 노드를 생성하는 경우가 아닌 경우에는 디폴트 아이디값으로 처리합니다.
+     */
+    floatingPortalId?: string;
     /**
      * @default large
      */

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>, {}>;