@team-monolith/cds 1.69.1 → 1.70.0

package/dist/components/AlertDialog/AlertDialogTitle.js

@@ -17,6 +17,7 @@ import SquareButton from "../SquareButton";
 import { CloseFillIcon } from "../../icons";
 import AlertDialogContext from "./AlertDialogContext";
 import { MOBILE } from "../../foundation/breakpoints";
+// eslint-disable-next-line react/display-name, @typescript-eslint/no-explicit-any
 export const AlertDialogTitle = React.forwardRef((props, ref) => {
     const { className, component: Component = "div", onClose, children } = props, other = __rest(props, ["className", "component", "onClose", "children"]);
     const { icon } = React.useContext(AlertDialogContext);
@@ -51,5 +52,7 @@ export const AlertDialogTitle = React.forwardRef((props, ref) => {
                       height: 32px;
                     }
                   `)}
-                ` }, { children: icon }))), children] })), onClose && (_jsx(SquareButton, { color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })) }));
+                ` }, { children: icon }))), children] })), onClose && (_jsx(SquareButton, { color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose, buttonProps: {
+                        "aria-label": "닫기",
+                    } }))] })) }));
 });

package/dist/components/Banner.js

@@ -47,6 +47,7 @@ const COLOR_PALETTE = (theme, color) => ({
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=44-2847&t=bhnL1ombbddld3RQ-0)
  */
+// eslint-disable-next-line react/display-name, @typescript-eslint/no-explicit-any
 const Banner = React.forwardRef((props, ref) => {
     const { className, component: Component = "div", headline, content, icon, color, buttonLabel, buttonClassName, onButtonClick, buttonProps, close, onClose, fullWidth } = props, other = __rest(props, ["className", "component", "headline", "content", "icon", "color", "buttonLabel", "buttonClassName", "onButtonClick", "buttonProps", "close", "onClose", "fullWidth"]);
     const theme = useTheme();
@@ -80,7 +81,9 @@ const Banner = React.forwardRef((props, ref) => {
               > button {
                 color: ${COLOR_PALETTE(theme, color).content};
               }
-            `, color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })));
+            `, color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose, buttonProps: {
+                    "aria-label": "닫기",
+                } }))] })));
 });
 const IconDiv = styled.div `
   display: flex;

package/dist/components/SquareButton.d.ts

@@ -24,8 +24,10 @@ export interface SquareButtonOwnProps<RootComponentType extends React.ElementTyp
     loading?: boolean;
     /** 버튼 클릭 시 호출될 콜백 함수 */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    /** 버튼에 전달될 Props */
-    buttonProps?: Omit<ButtonProps, "disabled" | "color" | "type" | "size" | "icon" | "label" | "loading" | "fullWidth" | "onClick">;
+    /** 버튼에 전달될 Props. 접근성을 위해 aria-label이 필수로 들어가야 합니다. */
+    buttonProps: {
+        "aria-label": string;
+    } & Partial<Omit<ButtonProps, "disabled" | "color" | "type" | "size" | "icon" | "label" | "loading" | "fullWidth" | "onClick" | "aria-label">>;
 }
 export type SquareButtonProps<RootComponentType extends React.ElementType = SquareButtonTypeMap["defaultComponent"]> = PolymorphicProps<SquareButtonTypeMap<RootComponentType>, RootComponentType>;
 export interface SquareButtonTypeMap<RootComponentType extends React.ElementType = "span"> {

package/dist/patterns/LexicalEditor/nodes/ImageNode/ImageComponent.js

@@ -158,6 +158,8 @@ export default function ImageComponent({ src, altText, nodeKey, width, height, m
                                     ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}`
                                     : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth }) })) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setOpen(true);
+                        }, buttonProps: {
+                            "aria-label": "이미지 수정하기",
                         } })] }), _jsx(InsertImageDialog, { open: open, title: "\uC774\uBBF8\uC9C0 \uC218\uC815\uD558\uAE30", onClose: () => setOpen(false), imageProps: {
                     src,
                     altText,

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/InputComponent.js

@@ -64,6 +64,8 @@ export function InputComponent(props) {
           gap: 4px;
         ` }, { children: [_jsx(VirtualInput, Object.assign({ onClick: () => setSettingOpen(true) }, { children: "\uC8FC\uAD00\uC2DD \uC785\uB825 \uCE78" })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setSettingOpen(true);
+                        }, buttonProps: {
+                            "aria-label": "입력 칸 설정",
                         } })] })), settingOpen && (_jsx(SettingForm, Object.assign({}, settingFormProps, { onClose: () => setSettingOpen(false) })))] }));
 }
 const VirtualInput = styled.div(({ theme }) => css `

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SettingForm/FormSolution.d.ts

@@ -2,7 +2,7 @@ import { Control } from "react-hook-form";
 import { ProblemInputPayload } from "../ProblemInputNode";
 export interface FormSolutionProps {
     index: number;
-    control: Control<ProblemInputPayload, any>;
+    control: Control<ProblemInputPayload>;
     rules?: any;
     onDelete?: () => void;
 }

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SettingForm/FormSolution.js

@@ -19,6 +19,10 @@ export function FormSolution(props) {
             `, startIcon: _jsx(TextTypeDropdown, { index: index, control: control, disabled: disabled }), endIcon: _jsxs("div", Object.assign({ css: css `
                   display: flex;
                   gap: 4px;
-                ` }, { children: [onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete })), disabled && (_jsx(Tooltip, Object.assign({ text: _jsxs("span", { children: ["\uC785\uB825 \uCE78 \uC124\uC815\uC774 '\uAE00\uC790 \uC218\uB300\uB85C'\uC778 \uACBD\uC6B0", _jsx("br", {}), "\uC815\uB2F5\uC744 \uD558\uB098\uB9CC \uB4F1\uB85D\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4."] }) }, { children: _jsx(SquareButton, { color: "danger", size: "xsmall", icon: _jsx(AlertFillIcon, { color: theme.color.foreground.neutralAlt }), disabled: true }) })))] })) }));
+                ` }, { children: [onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete, buttonProps: {
+                                "aria-label": "삭제",
+                            } })), disabled && (_jsx(Tooltip, Object.assign({ text: _jsxs("span", { children: ["\uC785\uB825 \uCE78 \uC124\uC815\uC774 '\uAE00\uC790 \uC218\uB300\uB85C'\uC778 \uACBD\uC6B0", _jsx("br", {}), "\uC815\uB2F5\uC744 \uD558\uB098\uB9CC \uB4F1\uB85D\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4."] }) }, { children: _jsx(SquareButton, { color: "danger", size: "xsmall", icon: _jsx(AlertFillIcon, { color: theme.color.foreground.neutralAlt }), disabled: true, buttonProps: {
+                                    "aria-label": "정답 등록 불가",
+                                } }) })))] })) }));
         } }));
 }

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectComponent.js

@@ -69,6 +69,8 @@ export function SelectComponent(props) {
                                 ? `${index + 1}번 선택지`
                                 : selection.show.text, onClick: () => setSettingOpen(true) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setSettingOpen(true);
+                        }, buttonProps: {
+                            "aria-label": "선택지 설정",
                         } })] })), settingOpen && (_jsx(SettingForm, { selections: selections, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
 }
 const Alert = styled.div(({ theme }) => css `

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/FormSelection.d.ts

@@ -2,7 +2,7 @@ import { Control, RegisterOptions } from "react-hook-form";
 import { SettingFormData } from "./SettingForm";
 export interface FormSelectionProps {
     index: number;
-    control: Control<SettingFormData, any>;
+    control: Control<SettingFormData>;
     rules?: Omit<RegisterOptions<SettingFormData, `selections.${number}`>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs">;
     onDelete?: () => void;
 }

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/FormSelection.js

@@ -39,10 +39,10 @@ export function FormSelection(props) {
                             : inputFocused
                                 ? "activePrimary"
                                 : "default", value: value.show.text, onChange: (e) => onChange(Object.assign(Object.assign({}, value), { show: Object.assign(Object.assign({}, value.show), { text: e.target.value }) })), inputProps: {
-                            onFocus: (_e) => {
+                            onFocus: () => {
                                 setInputFocused(true);
                             },
-                            onBlur: (_e) => {
+                            onBlur: () => {
                                 setInputFocused(false);
                             },
                         }, placeholder: `${index + 1}번 선택지`, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, multiline: true, fullWidth: true, css: css `
@@ -54,9 +54,15 @@ export function FormSelection(props) {
           align-items: center;
         ` }, { children: [_jsx(SquareButton, { color: "icon", size: "xsmall", icon: value.show.image ? _jsx(ImageEditFillIcon, {}) : _jsx(ImageAddFillIcon, {}), onClick: () => {
                             setImageOpen(true);
+                        }, buttonProps: {
+                            "aria-label": value.show.image
+                                ? "이미지 바꾸기"
+                                : "이미지 삽입하기",
                         } }), _jsxs(Answer, Object.assign({ onClick: () => {
                             onChange(Object.assign(Object.assign({}, value), { isAnswer: !value.isAnswer }));
-                        } }, { children: ["\uC815\uB2F5", _jsx(Switch, { checked: Boolean(value.isAnswer), size: "small" })] })), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }))] }));
+                        } }, { children: ["\uC815\uB2F5", _jsx(Switch, { checked: Boolean(value.isAnswer), size: "small" })] })), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete, buttonProps: {
+                            "aria-label": "삭제",
+                        } }))] }))] }));
 }
 const Container = styled.div(({ theme }) => css `
     display: flex;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormQuestion.d.ts

@@ -4,6 +4,6 @@ import { SettingFormData } from "./SettingForm";
 /** 평가 항목을 설정하는 Form입니다. */
 export declare function FormQuestion(props: {
     index: number;
-    control: Control<SettingFormData, any>;
+    control: Control<SettingFormData>;
     onDelete?: () => void;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormQuestion.js

@@ -8,7 +8,9 @@ export function FormQuestion(props) {
     const { control, index, onDelete } = props;
     return (_jsxs(Item, { children: [_jsx(Index, { children: index + 1 }), _jsx(FormInput, { control: control, name: `evaluations.${index}.question.text`, rules: {
                     required: "필수 입력 항목입니다.",
-                }, size: "small", placeholder: `${index + 1}번 평가 항목`, multiline: true, fullWidth: true }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }));
+                }, size: "small", placeholder: `${index + 1}번 평가 항목`, multiline: true, fullWidth: true }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete, buttonProps: {
+                    "aria-label": "삭제",
+                } }))] }));
 }
 const Item = styled.div(({ theme }) => css `
     display: flex;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/EvaluationComponent.js

@@ -51,6 +51,8 @@ export function EvaluationComponent(props) {
             width: ${EVALUATION_EDIT_WIDTH}px;
           `, data: data, evaluations: evaluations, onClick: () => setSettingOpen((open) => !open) }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setSettingOpen((open) => !open);
+                        }, buttonProps: {
+                            "aria-label": "평가 칸 설정",
                         } })] })), settingOpen && (_jsx(SettingForm, { css: css `
             width: ${EVALUATION_EDIT_WIDTH}px;
           `, iconType: iconType, labels: labels, evaluations: evaluations, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));

package/dist/patterns/LexicalEditor/nodes/SheetInputNode/InputComponent.js

@@ -58,7 +58,9 @@ export function InputComponent(props) {
         ` }, { children: [_jsx(VirtualInput, Object.assign({ onClick: () => setSettingOpen((open) => !open), css: multiline &&
                             css `
               height: ${TEXTAREA_HEIGHT + 2 * INPUT_VERTICAL_PADDING}px;
-            ` }, { children: multiline ? "서술형 입력 칸" : "단답형 입력 칸" })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => setSettingOpen((open) => !open) })] })), settingOpen && (_jsx(SettingForm, { multiline: multiline, placeholder: placeholder, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
+            ` }, { children: multiline ? "서술형 입력 칸" : "단답형 입력 칸" })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => setSettingOpen((open) => !open), buttonProps: {
+                            "aria-label": "입력 칸 설정",
+                        } })] })), settingOpen && (_jsx(SettingForm, { multiline: multiline, placeholder: placeholder, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
 }
 const VirtualInput = styled.div(({ theme }) => css `
     box-sizing: border-box;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectComponent.js

@@ -64,6 +64,8 @@ export function SelectComponent(props) {
                                 ? `${index + 1}번 선택지`
                                 : selection.show.text, onClick: () => setSettingOpen((open) => !open) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setSettingOpen((open) => !open);
+                        }, buttonProps: {
+                            "aria-label": "선택지 설정",
                         } })] })), settingOpen && (_jsx(SettingForm, { data: {
                     selections,
                     allowMultipleAnswers,

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SettingForm/FormSelection.d.ts

@@ -4,7 +4,7 @@ import { SettingFormData } from "./SettingForm";
 /** SheetSelectNode SettingForm의 단일 선택지 폼입니다. */
 export default function FormSelection(props: {
     index: number;
-    control: Control<SettingFormData, any>;
+    control: Control<SettingFormData>;
     rules?: Omit<RegisterOptions<SettingFormData, `selections.${number}.show`>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs">;
     onDelete?: () => void;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SettingForm/FormSelection.js

@@ -5,7 +5,7 @@ import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { useState } from "react";
 import { DeleteBinLineIcon, ErrorWarningFillIcon, ImageAddFillIcon, ImageEditFillIcon, Input, SquareButton, } from "../../../../../..";
-import { InsertImageDialog, } from "../../../../components/InsertImageDialog";
+import { InsertImageDialog } from "../../../../components/InsertImageDialog";
 /** SheetSelectNode SettingForm의 단일 선택지 폼입니다. */
 export default function FormSelection(props) {
     var _a;
@@ -37,10 +37,10 @@ export default function FormSelection(props) {
                             : inputFocused
                                 ? "activePrimary"
                                 : "default", value: value.text, onChange: (e) => onChange(Object.assign(Object.assign({}, value), { text: e.target.value })), inputProps: {
-                            onFocus: (_e) => {
+                            onFocus: () => {
                                 setInputFocused(true);
                             },
-                            onBlur: (_e) => {
+                            onBlur: () => {
                                 setInputFocused(false);
                             },
                         }, placeholder: `${index + 1}번 선택지`, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, multiline: true, fullWidth: true, css: css `
@@ -53,7 +53,11 @@ export default function FormSelection(props) {
           align-items: center;
         ` }, { children: [_jsx(SquareButton, { color: "icon", size: "xsmall", icon: value.image ? _jsx(ImageEditFillIcon, {}) : _jsx(ImageAddFillIcon, {}), onClick: () => {
                             setImageOpen(true);
-                        } }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }))] }));
+                        }, buttonProps: {
+                            "aria-label": value.image ? "이미지 바꾸기" : "이미지 삽입하기",
+                        } }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete, buttonProps: {
+                            "aria-label": "삭제",
+                        } }))] }))] }));
 }
 const Container = styled.div(({ theme }) => css `
     display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.69.1",
+  "version": "1.70.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,