@team-monolith/cds 1.55.0 → 1.55.2

package/dist/patterns/LexicalEditor/nodes/Form/FormInput.d.ts

@@ -0,0 +1,11 @@
+import { DistributiveOmit } from "@emotion/react";
+import { InputProps } from "../../../..";
+export type FormInputProps = DistributiveOmit<InputProps, "color" | "onChange" | "value" | "hintIcon" | "hintText"> & {
+    name: string;
+    control: any;
+    baseColor?: "default" | "base";
+    rules?: any;
+    /** html event에서 얻은 value를 form에 주입하기 전에 변환합니다. */
+    transform?: (value: string) => any;
+};
+export declare function FormInput(props: FormInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/Form/FormInput.js

@@ -0,0 +1,51 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ErrorWarningFillIcon, Input } from "../../../..";
+import { Controller } from "react-hook-form";
+import { useState } from "react";
+export function FormInput(props) {
+    const { name, control, rules, baseColor = "default", transform = (value) => value } = props, inputComponentProps = __rest(props, ["name", "control", "rules", "baseColor", "transform"]);
+    const [inputFocused, setInputFocused] = useState(false);
+    return (_jsx(Controller, { name: name, control: control, rules: rules, render: ({ field: { onChange, value }, fieldState: { invalid, error }, }) => {
+            const onChangeHandler = (e) => {
+                onChange(transform(e.target.value));
+            };
+            // multiline 여부에 따라 inputProps의 type이 변경되므로 (union type)
+            // type-safety를 보장하기 위해 if 문을 분기하여 inputProps에 `name` 을 추가합니다.
+            // 코드 반복 없이 가능할까요?
+            if (inputComponentProps.multiline) {
+                const { inputProps } = inputComponentProps, other = __rest(inputComponentProps, ["inputProps"]);
+                return (_jsx(Input, Object.assign({ color: invalid
+                        ? "activeDanger"
+                        : inputFocused
+                            ? "activePrimary"
+                            : baseColor, onChange: onChangeHandler, value: value !== null && value !== void 0 ? value : "", hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, inputProps: Object.assign(Object.assign({ name }, inputProps), { onFocus: () => {
+                            setInputFocused(true);
+                        }, onBlur: () => {
+                            setInputFocused(false);
+                        } }) }, other)));
+            }
+            else {
+                const { inputProps } = inputComponentProps, other = __rest(inputComponentProps, ["inputProps"]);
+                return (_jsx(Input, Object.assign({ color: invalid
+                        ? "activeDanger"
+                        : inputFocused
+                            ? "activePrimary"
+                            : baseColor, onChange: onChangeHandler, value: value !== null && value !== void 0 ? value : "", hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, inputProps: Object.assign(Object.assign({ name }, inputProps), { onFocus: () => {
+                            setInputFocused(true);
+                        }, onBlur: () => {
+                            setInputFocused(false);
+                        } }) }, other)));
+            }
+        } }));
+}

package/dist/patterns/LexicalEditor/nodes/Form/index.d.ts

@@ -0,0 +1 @@
+export * from "./FormInput";

package/dist/patterns/LexicalEditor/nodes/Form/index.js

@@ -0,0 +1 @@
+export * from "./FormInput";

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

@@ -1,18 +1,16 @@
-/// <reference types="react" />
-/** 데이터를 받아 자기평가 항목과 ToggleButtonGroup을 그리는 컴포넌트입니다.
+import { ToggleButtonDatum } from "../../../../../ToggleButtonGroup";
+import { EvaluationItem } from "../../SelfEvaluationNode";
+/** 데이터를 받아 자기평가 항목들과 ToggleButtonGroup을 그리는 컴포넌트입니다.
  * 비지니스 로직이 포함되어 있지 않습니다.
  */
 export declare function Evaluation(props: {
     className?: string;
-    icons: {
-        onIcon: React.ReactNode;
-        offIcon: React.ReactNode;
-    }[];
-    labels: string[];
-    descriptions: string[];
-    selectedLabelIndexes: (number | null)[];
+    /** 자기 평가 항목들 */
+    evaluations: EvaluationItem[];
+    /** ToggleButton의 데이터 배열 */
+    data: ToggleButtonDatum[];
     /** 블럭을 클릭했을 때 실행될 콜백. 전달하지 않으면 cursor: pointer가 적용되지 않습니다. */
     onClick?: () => void;
     /** 전달하지 않으면 ToggleButtonGroup 호버, 클릭 동작이 없습니다. (pointer-events: none) */
-    onChange?: (selectedLabelIndexes: (number | null)[]) => void;
+    onChange?: (evaluations: EvaluationItem[]) => void;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -2,26 +2,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
-import { ToggleButtonGroup } from "../../../../../ToggleButtonGroup";
+import { ToggleButtonGroup, } from "../../../../../ToggleButtonGroup";
 const TOGGLE_BUTTON_GROUP_WIDTH = 320;
-/** 데이터를 받아 자기평가 항목과 ToggleButtonGroup을 그리는 컴포넌트입니다.
+/** 데이터를 받아 자기평가 항목들과 ToggleButtonGroup을 그리는 컴포넌트입니다.
  * 비지니스 로직이 포함되어 있지 않습니다.
  */
 export function Evaluation(props) {
-    const { className, icons, labels, descriptions, selectedLabelIndexes, onClick, onChange, } = props;
-    return (_jsxs(Container, Object.assign({ className: className, onClick: onClick }, { children: [_jsx(Header, { children: _jsx(LabelArea, { children: labels.map((label, index) => (_jsx(Label, { children: label }, index))) }) }), descriptions.map((description, index) => {
-                var _a;
-                return (_jsxs(Item, { children: [_jsx(Index, { children: index + 1 }), _jsx(Description, { children: description }), _jsx(StyledToggleButtonGroup, { css: !onChange &&
-                                css `
-                pointer-events: none;
-              `, data: labels.map((label, index) => (Object.assign({ label }, icons[index]))), activeIndex: (_a = selectedLabelIndexes[index]) !== null && _a !== void 0 ? _a : null, setActiveIndex: (activeIndex) => {
-                                if (onChange) {
-                                    const newSelectedLabelIndexes = [...selectedLabelIndexes];
-                                    newSelectedLabelIndexes[index] = activeIndex;
-                                    onChange(newSelectedLabelIndexes);
-                                }
-                            } })] }, index));
-            })] })));
+    const { className, evaluations, data, onClick, onChange } = props;
+    return (_jsxs(Container, Object.assign({ className: className, onClick: onClick }, { children: [_jsx(Header, { children: _jsx(LabelArea, { children: data.map(({ label }, index) => (_jsx(Label, { children: label }, index))) }) }), evaluations.map(({ question, selectedLabelIndex }, index) => (_jsxs(Item, { children: [_jsx(Index, { children: index + 1 }), _jsx(Question, { children: question.text }), _jsx(StyledToggleButtonGroup, { data: data, activeIndex: selectedLabelIndex, setActiveIndex: !onChange
+                            ? undefined
+                            : (activeIndex) => {
+                                const newEvaluations = [...evaluations];
+                                newEvaluations[index].selectedLabelIndex = activeIndex;
+                                onChange(newEvaluations);
+                            } })] }, index)))] })));
 }
 const Container = styled.div(({ onClick }) => css `
     ${onClick && "cursor: pointer;"}
@@ -84,7 +78,7 @@ const Index = styled.div(({ theme }) => css `
     font-weight: 800;
     line-height: 16px;
   `);
-const Description = styled.div(({ theme }) => css `
+const Question = styled.div(({ theme }) => css `
     display: flex;
     padding: 4px 8px;
     flex-direction: column;

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

@@ -1,25 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Controller } from "react-hook-form";
-import { useState } from "react";
-import { ErrorWarningFillIcon, Input } from "../../../../../../../..";
+import { useController } from "react-hook-form";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
+import { FormInput } from "../../../../../Form";
 /** 레이블을 설정하는 Form입니다. */
 export function FormLabel(props) {
     const { control, index, rules } = props;
-    const [inputFocused, setInputFocused] = useState(false);
-    return (_jsx(Controller, { control: control, name: `labels.${index}`, rules: rules, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => (_jsx(Input, { size: "small", color: invalid
-                ? "activeDanger"
-                : inputFocused
-                    ? "activePrimary"
-                    : "default", value: value, endIcon: (rules === null || rules === void 0 ? void 0 : rules.maxLength) && (_jsx(Counter, Object.assign({ error: Boolean(error) }, { children: value.length + "/" + rules.maxLength }))), onChange: (e) => onChange(e.target.value), inputProps: {
-                onFocus: () => {
-                    setInputFocused(true);
-                },
-                onBlur: () => {
-                    setInputFocused(false);
-                },
-            }, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, fullWidth: true })) }));
+    // endIcon에 들어갈 value, error를 사용하기 위해 useController를 사용합니다.
+    const { field: { value }, fieldState: { error }, } = useController({
+        control,
+        name: `labels.${index}`,
+        rules,
+    });
+    return (_jsx(FormInput, { control: control, name: `labels.${index}`, rules: rules, size: "small", endIcon: (rules === null || rules === void 0 ? void 0 : rules.maxLength) && (_jsx(Counter, Object.assign({ error: Boolean(error) }, { children: value.length + "/" + rules.maxLength }))), fullWidth: true }));
 }
 const Counter = styled.span(({ theme, error }) => css `
     color: ${error

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/{FormDescription.d.ts → FormQuestion.d.ts}

@@ -2,7 +2,7 @@
 import { Control } from "react-hook-form";
 import { SettingFormData } from "./SettingForm";
 /** 평가 항목을 설정하는 Form입니다. */
-export declare function FormDescription(props: {
+export declare function FormQuestion(props: {
     index: number;
     control: Control<SettingFormData, any>;
     rules: any;

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { DeleteBinLineIcon, SquareButton } from "../../../../../../..";
+import { FormInput } from "../../../../Form";
+/** 평가 항목을 설정하는 Form입니다. */
+export function FormQuestion(props) {
+    const { control, index, rules, onDelete } = props;
+    return (_jsxs(Item, { children: [_jsx(Index, { children: index + 1 }), _jsx(FormInput, { control: control, name: `evaluations.${index}.question.text`, rules: rules, size: "small", placeholder: `${index + 1}번 평가 항목`, multiline: true, fullWidth: true }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }));
+}
+const Item = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 4px 12px;
+    align-items: center;
+    gap: 4px;
+    align-self: stretch;
+    border-radius: 8px;
+    background: ${theme.color.background.neutralAlt};
+  `);
+const Index = styled.div(({ theme }) => css `
+    display: flex;
+    width: 20px;
+    height: 20px;
+    padding: 4px;
+
+    user-select: none; /* Standard syntax */
+
+    border-radius: 4px;
+    background: ${theme.color.background.neutralBase};
+    border: 1px solid ${theme.color.background.neutralAltActive};
+
+    justify-content: center;
+    align-items: center;
+
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 16px;
+  `);

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

@@ -1,19 +1,17 @@
 /** @jsxImportSource @emotion/react */
 import { NodeKey } from "lexical";
-import { IconType } from "../../../SelfEvaluationNode";
-export interface Description {
-    text: string;
-}
+import { EvaluationItem, IconType } from "../../../SelfEvaluationNode";
 export interface SettingFormData {
     iconType: IconType;
     labels: string[];
-    descriptions: Description[];
+    evaluations: EvaluationItem[];
 }
 /** 자기평가 edit의 설정 컴포넌트입니다. */
 export declare function SettingForm(props: {
+    className?: string;
     iconType: IconType;
     labels: string[];
-    descriptions: string[];
+    evaluations: EvaluationItem[];
     nodeKey: NodeKey;
     onClose: () => void;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,30 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { $getNodeByKey } from "lexical";
-import { $isSelfEvaluationNode } from "../../../SelfEvaluationNode";
+import { $isSelfEvaluationNode, } from "../../../SelfEvaluationNode";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { useFieldArray, useForm } from "react-hook-form";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { AddFillIcon, Button, EmojiStickerLineIcon, shadows, } from "../../../../../../..";
-import { EVALUATION_EDIT_WIDTH } from "../../EvaluationComponent";
 import { FormIconAndLabel } from "./FormIconAndLabel";
-import { FormDescription } from "./FormDescription";
+import { FormQuestion } from "./FormQuestion";
 /** 자기평가 edit의 설정 컴포넌트입니다. */
 export function SettingForm(props) {
-    const { iconType, labels, descriptions, nodeKey, onClose } = props;
+    const { className, iconType, labels, evaluations, nodeKey, onClose } = props;
     const [editor] = useLexicalComposerContext();
     const { control, handleSubmit } = useForm({
         mode: "all",
         defaultValues: {
             iconType,
             labels,
-            descriptions: descriptions.map((text) => ({ text })),
+            evaluations,
         },
     });
     const { fields, append, remove } = useFieldArray({
         control,
-        name: "descriptions",
+        name: "evaluations",
         keyName: "uid",
     });
     const onSubmit = (data) => {
@@ -35,26 +34,28 @@ export function SettingForm(props) {
             }
             node.setIconType(data.iconType);
             node.setLabels(data.labels);
-            node.setDescriptions(data.descriptions.map((description) => description.text));
+            node.setEvaluations(data.evaluations);
         });
         onClose();
     };
-    return (_jsxs(Form, Object.assign({ onSubmit: handleSubmit(onSubmit) }, { children: [_jsxs(Title, { children: [_jsx(EmojiStickerLineIcon, { css: css `
+    return (_jsxs(Form, Object.assign({ className: className, onSubmit: handleSubmit(onSubmit) }, { children: [_jsxs(Title, { children: [_jsx(EmojiStickerLineIcon, { css: css `
             width: 12px;
             height: 12px;
-          ` }), "3\uB2E8\uACC4 \uD3C9\uAC00"] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsx(Label, { children: "\uD3C9\uAC00 \uD56D\uBAA9" }), fields.map((field, index) => (_jsx(FormDescription, { index: index, control: control, rules: {
+          ` }), "3\uB2E8\uACC4 \uD3C9\uAC00"] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsx(Label, { children: "\uD3C9\uAC00 \uD56D\uBAA9" }), fields.map((field, index) => (_jsx(FormQuestion, { index: index, control: control, rules: {
                                     required: "필수 입력 항목입니다.",
                                 }, onDelete: index !== 0
                                     ? () => {
                                         remove(index);
                                     }
                                     : undefined }, field.uid))), _jsx(Button, { color: "grey", size: "small", startIcon: _jsx(AddFillIcon, {}), label: "\uD3C9\uAC00 \uD56D\uBAA9 \uCD94\uAC00", onClick: () => {
-                                    append({ text: "평가 항목을 입력하세요." });
+                                    append({
+                                        question: { text: "평가 항목을 입력하세요." },
+                                        selectedLabelIndex: null,
+                                    });
                                 } })] }), _jsxs(Right, { children: [_jsx(Label, { children: "\uC544\uC774\uCF58, \uB808\uC774\uBE14" }), _jsx(FormIconAndLabel, { control: control, labelsLength: labels.length })] })] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", bold: true, type: "submit" })] })] })));
 }
 const Form = styled.form(({ theme }) => css `
     display: flex;
-    width: ${EVALUATION_EDIT_WIDTH}px;
     flex-direction: column;
     border-radius: 6px;
     border: 1px solid ${theme.color.background.neutralAltActive};

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/EvaluationComponent.d.ts

@@ -1,12 +1,10 @@
 /** @jsxImportSource @emotion/react */
 import { NodeKey } from "lexical";
-import { IconType } from "../SelfEvaluationNode";
-export declare const EVALUATION_EDIT_WIDTH = 620;
+import { EvaluationItem, IconType } from "../SelfEvaluationNode";
 /** SelfEvaluationNode를 그리는 컴포넌트입니다. */
 export declare function EvaluationComponent(props: {
     iconType: IconType;
     labels: string[];
-    descriptions: string[];
-    selectedLabelIndexes: (number | null)[];
+    evaluations: EvaluationItem[];
     nodeKey: NodeKey;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { $getNodeByKey } from "lexical";
-import { $isSelfEvaluationNode } from "../SelfEvaluationNode";
+import { $isSelfEvaluationNode, } from "../SelfEvaluationNode";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { useContext, useState } from "react";
 import useLexicalEditable from "@lexical/react/useLexicalEditable";
@@ -11,27 +11,35 @@ import { ICON_DATA } from "../iconData";
 import { css, useTheme } from "@emotion/react";
 import SquareButton from "../../../../../components/SquareButton";
 import { Settings3FillIcon } from "../../../../../icons";
-export const EVALUATION_EDIT_WIDTH = 620;
+import _ from "lodash";
+const EVALUATION_EDIT_WIDTH = 620;
 /** SelfEvaluationNode를 그리는 컴포넌트입니다. */
 export function EvaluationComponent(props) {
-    const { iconType, labels, descriptions, selectedLabelIndexes, nodeKey } = props;
+    const { iconType, labels, evaluations, nodeKey } = props;
     const theme = useTheme();
     const [editor] = useLexicalComposerContext();
     const isEditable = useLexicalEditable();
     const { freezeProblemNode } = useContext(LexicalCustomConfigContext);
     const [settingOpen, setSettingOpen] = useState(false);
     const { icons } = ICON_DATA(theme)[iconType];
+    // label과 icons를 매핑하여 ToggelButtonData로 변환합니다.
+    // 만약 둘의 길이가 같지 않다면 짧은 길이에 맞춰집니다.
+    const data = _.zipWith(labels, icons, (label, { onIcon, offIcon }) => ({
+        label,
+        onIcon,
+        offIcon,
+    }));
     // view
     if (!isEditable) {
-        return (_jsx(Evaluation, { icons: icons, labels: labels, descriptions: descriptions, selectedLabelIndexes: selectedLabelIndexes, onChange: freezeProblemNode
+        return (_jsx(Evaluation, { data: data, evaluations: evaluations, onChange: freezeProblemNode
                 ? undefined
-                : (indexes) => {
+                : (evaluations) => {
                     editor.update(() => {
                         const node = $getNodeByKey(nodeKey);
                         if (!$isSelfEvaluationNode(node)) {
                             return;
                         }
-                        node.setSelectedLabelIndexes(indexes);
+                        node.setEvaluations(evaluations);
                     });
                 } }));
     }
@@ -41,7 +49,9 @@ export function EvaluationComponent(props) {
           gap: 4px;
         ` }, { children: [_jsx(Evaluation, { css: css `
             width: ${EVALUATION_EDIT_WIDTH}px;
-          `, icons: icons, labels: labels, descriptions: descriptions, selectedLabelIndexes: selectedLabelIndexes, onClick: () => setSettingOpen((open) => !open) }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
+          `, data: data, evaluations: evaluations, onClick: () => setSettingOpen((open) => !open) }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setSettingOpen((open) => !open);
-                        } })] })), settingOpen && (_jsx(SettingForm, { iconType: iconType, labels: labels, descriptions: descriptions, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
+                        } })] })), 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/SelfEvaluationNode/SelfEvaluationNode.d.ts

@@ -1,15 +1,20 @@
 import { DecoratorNode, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from "lexical";
 import { ReactNode } from "react";
 export type IconType = "emoji" | "ascendingNumber" | "descendingNumber";
+/** 자기 평가 항목 */
+export interface EvaluationItem {
+    question: {
+        text: string;
+    };
+    selectedLabelIndex: number | null;
+}
 export interface SelfEvaluationPayload {
     /** 아이콘 프리셋 타입 */
     iconType: IconType;
     /** 자기평가 레이블 */
     labels: string[];
     /** 자기평가 항목들 */
-    descriptions: string[];
-    /** 선택된 레이블 인덱스 */
-    selectedLabelIndexes: (number | null)[];
+    evaluations: EvaluationItem[];
     key?: NodeKey;
 }
 export type SerializedSelfEvaluationNode = Spread<SelfEvaluationPayload, SerializedLexicalNode>;
@@ -19,20 +24,17 @@ export type SerializedSelfEvaluationNode = Spread<SelfEvaluationPayload, Seriali
 export declare class SelfEvaluationNode extends DecoratorNode<ReactNode> {
     __iconType: IconType;
     __labels: string[];
-    __descriptions: string[];
-    __selectedLabelIndexes: (number | null)[];
+    __evaluations: EvaluationItem[];
     isInline(): boolean;
     static getType(): string;
     getIconType(): IconType;
     getLabels(): string[];
-    getDescriptions(): string[];
-    getSelectedLabelIndexes(): (number | null)[];
+    getEvaluations(): EvaluationItem[];
     setIconType(iconType: IconType): void;
     setLabels(labels: string[]): void;
-    setDescriptions(descriptions: string[]): void;
-    setSelectedLabelIndexes(selectedLabelIndexes: (number | null)[]): void;
+    setEvaluations(evaluations: EvaluationItem[]): void;
     static clone(node: SelfEvaluationNode): SelfEvaluationNode;
-    constructor(iconType: IconType, labels: string[], descriptions: string[], selectedLabelIndexes: (number | null)[], key?: NodeKey);
+    constructor(iconType: IconType, labels: string[], evaluations: EvaluationItem[], key?: NodeKey);
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): boolean;
     static importJSON(serializedNode: SerializedSelfEvaluationNode): SelfEvaluationNode;

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

@@ -18,11 +18,8 @@ export class SelfEvaluationNode extends DecoratorNode {
     getLabels() {
         return this.__labels;
     }
-    getDescriptions() {
-        return this.__descriptions;
-    }
-    getSelectedLabelIndexes() {
-        return this.__selectedLabelIndexes;
+    getEvaluations() {
+        return this.__evaluations;
     }
     setIconType(iconType) {
         const self = this.getWritable();
@@ -32,23 +29,18 @@ export class SelfEvaluationNode extends DecoratorNode {
         const self = this.getWritable();
         self.__labels = labels;
     }
-    setDescriptions(descriptions) {
-        const self = this.getWritable();
-        self.__descriptions = descriptions;
-    }
-    setSelectedLabelIndexes(selectedLabelIndexes) {
+    setEvaluations(evaluations) {
         const self = this.getWritable();
-        self.__selectedLabelIndexes = selectedLabelIndexes;
+        self.__evaluations = evaluations;
     }
     static clone(node) {
-        return new SelfEvaluationNode(node.__iconType, node.__labels, node.__descriptions, node.__selectedLabelIndexes);
+        return new SelfEvaluationNode(node.__iconType, node.__labels, node.__evaluations);
     }
-    constructor(iconType, labels, descriptions, selectedLabelIndexes, key) {
+    constructor(iconType, labels, evaluations, key) {
         super(key);
         this.__iconType = iconType;
         this.__labels = labels;
-        this.__descriptions = descriptions;
-        this.__selectedLabelIndexes = selectedLabelIndexes;
+        this.__evaluations = evaluations;
     }
     createDOM(config) {
         // Define the DOM element here
@@ -64,8 +56,7 @@ export class SelfEvaluationNode extends DecoratorNode {
             key: serializedNode.key,
             iconType: serializedNode.iconType,
             labels: serializedNode.labels,
-            descriptions: serializedNode.descriptions,
-            selectedLabelIndexes: serializedNode.selectedLabelIndexes,
+            evaluations: serializedNode.evaluations,
         });
     }
     exportJSON() {
@@ -74,17 +65,16 @@ export class SelfEvaluationNode extends DecoratorNode {
             version: 1,
             iconType: this.__iconType,
             labels: this.__labels,
-            descriptions: this.__descriptions,
-            selectedLabelIndexes: this.__selectedLabelIndexes,
+            evaluations: this.__evaluations,
         };
     }
     decorate() {
-        return (_jsx(EvaluationComponent, { iconType: this.__iconType, labels: this.__labels, descriptions: this.__descriptions, selectedLabelIndexes: this.__selectedLabelIndexes, nodeKey: this.getKey() }));
+        return (_jsx(EvaluationComponent, { iconType: this.__iconType, labels: this.__labels, evaluations: this.__evaluations, nodeKey: this.getKey() }));
     }
 }
 export function $createSelfEvaluationNode(payload) {
-    const { iconType, labels, descriptions, selectedLabelIndexes, key } = payload;
-    return $applyNodeReplacement(new SelfEvaluationNode(iconType, labels, descriptions, selectedLabelIndexes, key));
+    const { iconType, labels, evaluations, key } = payload;
+    return $applyNodeReplacement(new SelfEvaluationNode(iconType, labels, evaluations, key));
 }
 export function $isSelfEvaluationNode(node) {
     return node instanceof SelfEvaluationNode;

package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuPlugin.js

@@ -95,8 +95,14 @@ function getSheetContextOptions(editor, theme) {
             onSelect: () => editor.dispatchCommand(INSERT_SELF_EVALUATION_COMMAND, {
                 iconType: "emoji",
                 labels: ["아주 잘했어요!", "보통이에요.", "잘 모르겠어요."],
-                descriptions: ["평가 항목을 입력하세요."],
-                selectedLabelIndexes: [null],
+                evaluations: [
+                    {
+                        question: {
+                            text: "평가 항목을 입력하세요.",
+                        },
+                        selectedLabelIndex: null,
+                    },
+                ],
             }),
         }),
         new ComponentPickerOption("단답형 입력 칸", {

package/dist/patterns/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -24,6 +24,6 @@ export declare function ToggleButtonGroup(props: {
     data: ToggleButtonDatum[];
     /** 활성화될 ToggleButton의 index */
     activeIndex: number | null;
-    /** activeIndex set 함수 */
-    setActiveIndex: (index: number | null) => void;
-}): import("react/jsx-runtime").JSX.Element;
+    /** activeIndex set 함수. 전달하지 않으면 pointer-events: none이 됩니다. */
+    setActiveIndex?: (index: number | null) => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/ToggleButtonGroup/ToggleButtonGroup.js

@@ -1,6 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
 import styled from "@emotion/styled";
 import { ToggleButton } from "./ToggleButton";
+import { css } from "@emotion/react";
 export const toggleButtonGroupClasses = {
     container: "ToggleButtonGroup-container",
     toggleButton: {
@@ -14,13 +16,16 @@ export const toggleButtonGroupClasses = {
  */
 export function ToggleButtonGroup(props) {
     const { className, data, activeIndex, setActiveIndex } = props;
-    return (_jsx(Container, Object.assign({ className: `${className} ${toggleButtonGroupClasses.container}` }, { children: data.map((datum, index) => {
+    return (_jsx(Container, Object.assign({ className: `${className} ${toggleButtonGroupClasses.container}`, css: !setActiveIndex &&
+            css `
+          pointer-events: none;
+        ` }, { children: data.map((datum, index) => {
             const isFirst = index === 0;
             const isLast = index === data.length - 1;
             const isFirstAndLast = isFirst && isLast;
             const isActive = activeIndex === index;
             return (_jsx(ToggleButton, { isActive: isActive, onClick: () => {
-                    setActiveIndex(isActive ? null : index);
+                    setActiveIndex === null || setActiveIndex === void 0 ? void 0 : setActiveIndex(isActive ? null : index);
                 }, datum: datum, placement: isFirstAndLast
                     ? "bottom"
                     : isFirst

package/package.json

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

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

@@ -1,55 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { useController } from "react-hook-form";
-import styled from "@emotion/styled";
-import { css } from "@emotion/react";
-import { useState } from "react";
-import { DeleteBinLineIcon, ErrorWarningFillIcon, Input, SquareButton, } from "../../../../../../..";
-/** 평가 항목을 설정하는 Form입니다. */
-export function FormDescription(props) {
-    const { control, index, rules, onDelete } = props;
-    const [inputFocused, setInputFocused] = useState(false);
-    const { field: { value, onChange }, fieldState: { invalid, error }, } = useController({
-        control,
-        name: `descriptions.${index}.text`,
-        rules,
-    });
-    return (_jsxs(Item, { children: [_jsx(Index, { children: index + 1 }), _jsx(Input, { size: "small", color: invalid ? "activeDanger" : inputFocused ? "activePrimary" : "default", value: value, onChange: (e) => onChange(e.target.value), inputProps: {
-                    onFocus: () => {
-                        setInputFocused(true);
-                    },
-                    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 }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }));
-}
-const Item = styled.div(({ theme }) => css `
-    display: flex;
-    padding: 4px 12px;
-    align-items: center;
-    gap: 4px;
-    align-self: stretch;
-    border-radius: 8px;
-    background: ${theme.color.background.neutralAlt};
-  `);
-const Index = styled.div(({ theme }) => css `
-    display: flex;
-    width: 20px;
-    height: 20px;
-    padding: 4px;
-
-    user-select: none; /* Standard syntax */
-
-    border-radius: 4px;
-    background: ${theme.color.background.neutralBase};
-    border: 1px solid ${theme.color.background.neutralAltActive};
-
-    justify-content: center;
-    align-items: center;
-
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    font-family: ${theme.fontFamily.ui};
-    font-size: 14px;
-    font-weight: 800;
-    line-height: 16px;
-  `);