@croquiscom/pds 5.2.0 → 5.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @croquiscom/pds
 
+## 5.3.0
+
+### Minor Changes
+
+- 1a7267e: Confirm, Alert, Basic Modal 컴포넌트 autoFocusButton, returnFocus props 추가
+
 ## 5.2.0
 
 ### Minor Changes

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

@@ -1,11 +1,17 @@
 /// <reference types="react" />
 import { ConfirmModalProps } from './ConfirmModal';
 import { NotificationKind } from '../notification';
-export interface AlertModalProps extends Omit<ConfirmModalProps, 'cancelText' | 'onCancel'> {
+import { ModalActionButtonType } from './ModalActionButton';
+export interface AlertModalProps extends Omit<ConfirmModalProps, 'cancelText' | 'onCancel' | 'autoFocusButton'> {
     /**
      * @default info
      */
     kind?: NotificationKind;
+    /**
+     * autofocus 지정할 기본 버튼 요소
+     * @default confirm
+     */
+    autoFocusButton?: Extract<ModalActionButtonType, 'confirm'> | null;
 }
-export declare const AlertModal: ({ width, kind, dense, fill, title, confirmText, text, subtext, zIndex, onConfirm, onClose, onExited, ...props }: AlertModalProps) => JSX.Element;
+export declare const AlertModal: ({ width, kind, dense, fill, title, confirmText, autoFocusButton, text, subtext, zIndex, onConfirm, onClose, onExited, ...props }: AlertModalProps) => JSX.Element;
 export declare const Alert: (properties: AlertModalProps) => Promise<boolean>;

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { AlertModal, AlertModalProps } from './AlertModal';
-declare const _default: ComponentMeta<({ width, kind, dense, fill, title, confirmText, text, subtext, zIndex, onConfirm, onClose, onExited, ...props }: AlertModalProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ width, kind, dense, fill, title, confirmText, autoFocusButton, text, subtext, zIndex, onConfirm, onClose, 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 Kind: ComponentStory<typeof AlertModal>;
+export declare const DisabledAutoFocusButton: ComponentStory<typeof AlertModal>;

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

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { ModalOverlayBaseProps } from './ModalOverlay';
+import { ModalActionButtonType } from './ModalActionButton';
 export interface ConfirmModalProps extends Omit<ModalOverlayBaseProps, 'onClose'> {
     title: ReactNode;
     text?: ReactNode;
@@ -10,6 +11,11 @@ export interface ConfirmModalProps extends Omit<ModalOverlayBaseProps, 'onClose'
     dense?: boolean;
     confirmText?: string;
     cancelText?: string;
+    /**
+     * autofocus 지정할 기본 버튼 요소
+     * @default confirm
+     */
+    autoFocusButton?: ModalActionButtonType | null;
     /**
      * confirmButton 클릭 이벤트
      */
@@ -23,7 +29,7 @@ export interface ConfirmModalProps extends Omit<ModalOverlayBaseProps, 'onClose'
      */
     onClose?: () => void | Promise<void>;
 }
-export declare const ConfirmModal: ({ title, width, zIndex, dense, fill, text, subtext, confirmText, cancelText, onConfirm, onCancel, onClose, onExited, ...props }: ConfirmModalProps) => JSX.Element;
+export declare const ConfirmModal: ({ title, width, zIndex, dense, fill, text, subtext, confirmText, cancelText, autoFocusButton, onConfirm, onCancel, onClose, onExited, ...props }: ConfirmModalProps) => JSX.Element;
 export declare const StyledText: import("@emotion/styled").StyledComponent<(import("../text").BaseTextProps & (React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> | React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>)) & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

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

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { ConfirmModal } from './ConfirmModal';
-declare const _default: ComponentMeta<({ title, width, zIndex, dense, fill, text, subtext, confirmText, cancelText, onConfirm, onCancel, onClose, onExited, ...props }: import("./ConfirmModal").ConfirmModalProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ title, width, zIndex, dense, fill, text, subtext, confirmText, cancelText, autoFocusButton, 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 ContinuosOpen: ComponentStory<typeof ConfirmModal>;
+export declare const AutoFocusButtonCustom: ComponentStory<typeof ConfirmModal>;
+export declare const DisabledAutoFocusButton: ComponentStory<typeof ConfirmModal>;

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

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import { ButtonProps } from '../button';
 import { CSSValueWithLength, SpaceProps } from '../../styles';
 import { ModalOverlayBaseProps, ModalBaseCancelReason } from './ModalOverlay';
+import { ModalActionButtonType } from './ModalActionButton';
 export type ModalButtonProps = Omit<ButtonProps, 'onClick'>;
 export type ModalCancelReason = ModalBaseCancelReason;
 export interface ModalContentProps extends SpaceProps {
@@ -24,6 +25,11 @@ export interface ModalProps extends Omit<ModalOverlayBaseProps, 'onClose'> {
      * [ButtonProps](https://storybook.kakaostyle.in/master/pds/?path=/docs/component-button--primary)를 cancelButton에 적용할 수 있습니다.
      */
     cancelButtonProps?: ModalButtonProps;
+    /**
+     * autofocus 지정할 기본 버튼 요소
+     * @default null
+     */
+    autoFocusButton?: ModalActionButtonType | null;
     /**
      * 헤더 영역 타이틀 좌측 backButton 사용 유무
      * @default false

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

@@ -19,3 +19,4 @@ export declare const CustomFooterFullScreen: ComponentStory<typeof Modal>;
 export declare const AutoMaxHeight: ComponentStory<typeof Modal>;
 export declare const CustomMaxHeight: ComponentStory<typeof Modal>;
 export declare const Scrollable: ComponentStory<typeof Modal>;
+export declare const AutoFocusButton: any;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ButtonProps } from '../button/Button';
+export type ModalActionButtonType = 'confirm' | 'cancel';
+export declare const ModalActionButton: React.FC<ButtonProps>;

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

@@ -33,6 +33,11 @@ export interface ModalOverlayBaseProps {
      * @default true
      */
     canCloseEscapeKey?: boolean;
+    /**
+     * reference 요소로 포커스 반환 여부
+     * @default true
+     */
+    returnFocus?: boolean;
     /**
      * Modal destroy시 전달합니다.
      */
@@ -61,5 +66,10 @@ export interface ModalOverlayProps extends ModalOverlayBaseProps {
      * @default false
      */
     controlledOpen?: boolean;
+    /**
+     * autofocus 지정 콘텐츠 요소 여부, true일 경우 FloatingFocusManager initialFocus는 자체 포커스 관리 충돌 방지를 위해 -1, false일 경우 기본값 0으로 처리됩니다.
+     * @default false
+     */
+    autoFocus?: boolean;
 }
-export declare const ModalOverlay: ({ floatingPortalId, width, borderRadiusSize, fill, fullScreen, className, children, opened: openProp, zIndex, canClickOutside, canCloseEscapeKey, controlledOpen, onExited, onClose, onCancelEventCallback, setOpened, }: PropsWithChildren<ModalOverlayProps>) => JSX.Element;
+export declare const ModalOverlay: ({ floatingPortalId, width, borderRadiusSize, fill, fullScreen, className, children, opened: openProp, zIndex, canClickOutside, canCloseEscapeKey, controlledOpen, autoFocus, returnFocus, onExited, onClose, onCancelEventCallback, setOpened, }: PropsWithChildren<ModalOverlayProps>) => JSX.Element;

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

@@ -231,4 +231,30 @@ export declare const ModalStoryArgTypes: {
             };
         };
     };
+    autoFocusButton: {
+        description: string;
+        table: {
+            type: {
+                summary: string;
+                detail: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    returnFocus: {
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+    };
 };