@croquiscom/pds 9.2.0 → 9.3.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @croquiscom/pds
 
+## 9.3.1
+
+### Patch Changes
+
+- 7bc3625: DatePicker value값 변경 시 라벨 미갱신 오류 수정
+
+## 9.3.0
+
+### Minor Changes
+
+- c8b890c: FloatingButton, FloatingModal 컴포넌트 추가
+- 8345d24: Toast inline으로 사용가능하도록 수정
+- c9e312a: BottomSheet inline 사용가능하도록 수정
+
 ## 9.2.0
 
 ### Minor Changes

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

@@ -7,6 +7,7 @@ export interface BottomSheetContentProps extends SpaceProps {
     maxHeight?: number;
 }
 export interface BottomSheetProps {
+    noUsePortal?: boolean;
     className?: string;
     opened?: boolean;
     /**

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

@@ -9,3 +9,4 @@ export declare const DisabledCloseDimClick: Story;
 export declare const DisabledCloseDrag: Story;
 export declare const ContentWithCloseAction: Story;
 export declare const BottomSheetWithModal: Story;
+export declare const NoUsePortalBottomSheet: Story;

package/dist/components/button/FloatingButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ButtonProps } from './Button';
+export interface FloatingButtonProps extends Omit<ButtonProps, 'fill' | 'kind' | 'size' | 'type'> {
+    opened?: boolean;
+}
+export declare const FloatingButton: React.ForwardRefExoticComponent<FloatingButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/button/FloatingButton.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/button/FloatingButton.stories.d.ts

@@ -0,0 +1,6 @@
+import { FloatingButton } from './FloatingButton';
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof FloatingButton>;
+export default meta;
+type Story = StoryObj<typeof FloatingButton>;
+export declare const Base: Story;

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

@@ -4,3 +4,4 @@ export * from './TextButton';
 export * from './PopoverButton';
 export * from './CloseButton';
 export * from './AccordionButton';
+export * from './FloatingButton';

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

@@ -12,3 +12,5 @@ export declare const text_button_size_css: Record<TextButtonSize, string>;
 export declare const getTextButtonStyle: (kind: TextButtonKind, fixed_color: string) => import("@emotion/utils").SerializedStyles;
 export declare const accordion_button_css: import("@emotion/utils").SerializedStyles;
 export declare const accordion_button_size_css: Record<AccordionButtonSize, string>;
+export declare const floating_button_css: import("@emotion/utils").SerializedStyles;
+export declare const getFloatingButtonCss: (opened: boolean, width?: number) => string;

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

@@ -18,3 +18,4 @@ export declare const ShowTimeHourMinuteSecond: Story;
 export declare const DisableDays: Story;
 export declare const BottomSheetPicker: Story;
 export declare const BottomSheetPickerWithTimePicker: Story;
+export declare const ForceChangedDateWithButton: Story;

package/dist/components/message/MessageManager.d.ts

@@ -29,10 +29,14 @@ export interface MessageContainerProps {
      * @default 'column'
      */
     direction?: MessageDirection;
+    /**
+     * @default false
+     */
+    use_inline?: boolean;
 }
 type MessageContainerType = 'toast' | 'notification';
-type MessageContainerKey = `${MessagePositionType}_${MessageDirection}_${number}_${number}`;
 type MessageComponentTypes = ToastComponentProps | NotificationComponentProps;
+export type MessageContainerKey = `${MessagePositionType}_${MessageDirection}_${number}_${number}`;
 export type MessageOptions<T extends MessageComponentTypes> = Omit<T, 'destroy' | 'position'> & Partial<MessageContainerProps>;
 export declare class MessageManager<T extends MessageComponentTypes> {
     private root;
@@ -45,8 +49,9 @@ export declare class MessageManager<T extends MessageComponentTypes> {
     private default_direction;
     private container_keys;
     private messages;
+    private use_inline;
     private static instance;
-    constructor({ component, type, z_index, default_max_count, default_offset, default_position, default_direction, }: {
+    constructor({ component, type, z_index, default_max_count, default_offset, default_position, default_direction, root_container, }: {
         component: FunctionComponent<T>;
         type: MessageContainerType;
         z_index?: number;
@@ -54,6 +59,7 @@ export declare class MessageManager<T extends MessageComponentTypes> {
         default_offset?: number;
         default_position?: MessagePositionType;
         default_direction?: MessageDirection;
+        root_container?: HTMLElement;
     });
     static getInstance(type: MessageContainerType): MessageManager<MessageComponentTypes>;
     set setInstance({ default_max_count, default_offset, default_position, }: {

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

@@ -0,0 +1,9 @@
+import React, { PropsWithChildren } from 'react';
+import { FloatingModalContainerProps } from './FloatingModalContainer';
+import { FloatingModalContentProps } from './FloatingModalContent';
+export interface FloatingModalProps extends FloatingModalContentProps, Omit<FloatingModalContainerProps, 'setOpened'> {
+    opened: boolean;
+    onClose?: () => void;
+    onOpen?: () => void;
+}
+export declare const FloatingModal: ({ canClickOutside, canCloseEscapeKey, openerTriggerEvent, trigger, onClose, onOpen, ...props }: PropsWithChildren<FloatingModalProps>) => React.JSX.Element;

package/dist/components/modal/FloatingModal.figma.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FloatingModal } from './FloatingModal';
+declare const meta: Meta<typeof FloatingModal>;
+export default meta;
+type Story = StoryObj<typeof FloatingModal>;
+export declare const BottomRight: Story;
+export declare const BottomLeft: Story;
+export declare const TopLeft: Story;
+export declare const TopRight: Story;

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

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+export interface FloatingModalContainerProps {
+    position?: 'bottom-right' | 'top-right' | 'bottom-left' | 'top-left';
+    canClickOutside?: boolean;
+    canCloseEscapeKey?: boolean;
+    openerTriggerEvent?: 'click' | 'none';
+    className?: string;
+    children: ReactNode;
+    trigger: ReactNode;
+    opened?: boolean;
+    setOpened: (opened: boolean) => void;
+}
+export declare const FloatingModalContainer: React.FC<FloatingModalContainerProps>;

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

@@ -0,0 +1,77 @@
+import React, { ReactNode } from 'react';
+import { CSSValueWithLength } from '../../styles';
+import { ModalActionButtonType } from './ModalActionButton';
+import { ModalButtonProps, ModalContentProps } from './Modal';
+type LayoutHeightType = {
+    header: number;
+    footer: number;
+};
+export interface FloatingModalContentProps {
+    opened: boolean;
+    width?: CSSValueWithLength;
+    /**
+     * @default 'bottom-right'
+     */
+    position?: 'bottom-right' | 'top-right' | 'bottom-left' | 'top-left';
+    title?: ReactNode;
+    /**
+     * 기본적으로 open transition delay가 0.15s가 있습니다. delay를 제거하려면 false로 설정합니다.
+     * @default true
+     */
+    hasTransitionDelay?: boolean;
+    confirmText?: string;
+    /**
+     * [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에 적용할 수 있습니다.
+     */
+    cancelButtonProps?: ModalButtonProps;
+    /**
+     * autofocus 지정할 기본 버튼 요소
+     * @default null
+     */
+    autoFocusButton?: ModalActionButtonType | null;
+    /**
+     * 헤더 영역 타이틀 좌측 backButton 사용 유무
+     * @default false
+     */
+    backButton?: boolean;
+    /**
+     * @default true
+     */
+    closeButton?: boolean;
+    /**
+     * 바디 영역 콘텐츠 ModalContentProps를 통한 커스텀이 가능합니다.
+     *  - [SpaceProps](https://github.com/croquiscom/pds/blob/main/src/styles/space.ts)
+     *  - maxHeight: 콘텐츠 영역 maxHeight을 커스텀할 수 있습니다. 지정하지 않을 경우 안전여백내에서 계산된 자동 최대 maxHeight값이 적용됩니다.
+     *  - scrollable: true일 경우 콘텐츠 영역에 overflow-y: auto값이 적용됩니다.
+     */
+    contentProps?: ModalContentProps;
+    /**
+     * 푸터 영역을 커스텀할 수 있습니다.
+     *  - 기본 Footer(confirmText, cancelText)는 미노출됩니다.
+     */
+    footer?: ReactNode;
+    onConfirm?: () => void;
+    /**
+     * reason을 포함한 cancel 이벤트를 전달합니다.
+     *  - 'cancelClick' | 'escapeKeyPress' | 'overlayClick'
+     */
+    onCancel?: () => void;
+    /**
+     * Modal Header backButton 클릭 이벤트
+     */
+    onClickBackButton?: () => void;
+}
+export declare const FloatingModalContent: React.ComponentType<React.PropsWithChildren<FloatingModalContentProps>>;
+export declare const FloatingModalBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
+} & ModalContentProps & {
+    layoutHeight: LayoutHeightType;
+    contentOverflow: boolean;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

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

@@ -0,0 +1,23 @@
+import React, { PropsWithChildren, ReactNode } from 'react';
+export interface ModalHeaderProps {
+    title?: ReactNode;
+    /**
+     * 헤더 영역 타이틀 좌측 backButton 사용 유무
+     * @default false
+     */
+    backButton?: boolean;
+    /**
+     * @default true
+     */
+    closeButton?: boolean;
+    /**
+     * reason을 포함한 cancel 이벤트를 전달합니다.
+     *  - 'cancelClick' | 'escapeKeyPress' | 'overlayClick'
+     */
+    onCancel?: () => void;
+    /**
+     * Modal Header backButton 클릭 이벤트
+     */
+    onClickBackButton?: () => void;
+}
+export declare const ModalHeader: ({ title, backButton, closeButton, onCancel, onClickBackButton, }: PropsWithChildren<ModalHeaderProps>) => React.JSX.Element;

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

@@ -2,3 +2,4 @@ export * from './Modal';
 export * from './AlertModal';
 export * from './ConfirmModal';
 export * from './NoticeModal';
+export * from './FloatingModal';

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

@@ -10,3 +10,4 @@ export declare const Position: Story;
 export declare const Direction: Story;
 export declare const FullWidth: Story;
 export declare const HandleDestroy: Story;
+export declare const Inline: Story;

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

@@ -1,3 +1,10 @@
-import { MessageManager } from '../message';
+import { MessageContainerKey, MessageOptions } from '../message';
 import { ToastComponentProps } from './Toast';
-export declare function useToast(): MessageManager<ToastComponentProps>;
+interface ToastShowProps extends MessageOptions<ToastComponentProps> {
+    root?: HTMLElement | null;
+}
+export declare function useToast(): {
+    show(props: ToastShowProps): void;
+    destroy(id: string, key?: MessageContainerKey): void;
+};
+export {};