@team-monolith/cds 1.99.7 → 1.99.8

package/dist/components/OverflowTooltip.d.ts

@@ -2,7 +2,7 @@
 /** @jsxImportSource @emotion/react */
 import { SerializedStyles } from "@emotion/react";
 import { TooltipProps } from "./Tooltip";
-interface OverflowTooltipProps extends Omit<TooltipProps, "open" | "onOpen" | "onClose" | "children"> {
+interface OverflowTooltipProps extends Omit<TooltipProps, "open" | "onOpen" | "onClose" | "children" | "tooltipId"> {
     className?: string;
     childrenCss?: SerializedStyles;
 }

package/dist/components/OverflowTooltip.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import styled from "@emotion/styled";
-import { useRef, useState } from "react";
+import { useRef, useState, useMemo } from "react";
 import { Tooltip } from "./Tooltip";
+import { uid } from "uid";
 /**
  * 인자로 주어진 텍스트를 그립니다.
  * 공간이 부족하면 ...으로 표시하고 툴팁으로 전체 내용을 노출합니다.
@@ -9,6 +10,7 @@ import { Tooltip } from "./Tooltip";
 export function OverflowTooltip(props) {
     const tooltipRef = useRef(null);
     const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+    const uniqueId = useMemo(uid, []);
     const getIsOverflow = () => {
         if (tooltipRef.current) {
             return tooltipRef.current.scrollWidth > tooltipRef.current.offsetWidth;
@@ -23,7 +25,7 @@ export function OverflowTooltip(props) {
     const handleClose = () => {
         setIsTooltipOpen(false);
     };
-    return (_jsx(Tooltip, Object.assign({ open: isTooltipOpen, onOpen: handleOpen, onClose: handleClose }, props, { children: _jsx(OverflowDiv, Object.assign({ css: props.childrenCss, ref: tooltipRef, onMouseOver: handleOpen }, { children: props.text })) })));
+    return (_jsx(Tooltip, Object.assign({ tooltipId: uniqueId, open: isTooltipOpen, onOpen: handleOpen, onClose: handleClose }, props, { children: _jsx(OverflowDiv, Object.assign({ css: props.childrenCss, ref: tooltipRef, onMouseOver: handleOpen, "aria-labelledby": uniqueId }, { children: props.text })) })));
 }
 const OverflowDiv = styled.div `
   overflow: hidden;

package/dist/components/Tooltip.d.ts

@@ -21,6 +21,12 @@ export interface TooltipProps {
     placement?: "bottom-end" | "bottom-start" | "bottom" | "left-end" | "left-start" | "left" | "right-end" | "right-start" | "right" | "top-end" | "top-start" | "top";
     /** 툴팁을 표시할 객체입니다. ref를 props로 받을 수 있어야합니다. */
     children: React.ReactElement;
+    /**
+     * 툴팁의 고유 id입니다.
+     * 이 id는 툴팁을 띄우는 요소에 aria-labelledby 속성을 통해 연결되어,
+     * 스크린 리더 등의 보조 기술이 툴팁 내용을 올바르게 인식하도록 돕습니다.
+     */
+    tooltipId: string;
 }
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=172-626&t=aFkKTFgWq2xFFGC5-0)

package/dist/components/Tooltip.js

@@ -45,9 +45,9 @@ function addTabIndexIfNeeded(element) {
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=172-626&t=aFkKTFgWq2xFFGC5-0)
  */
 export const Tooltip = React.forwardRef(function Tooltip(props, ref) {
-    const { title, text, children } = props, restProps = __rest(props, ["title", "text", "children"]);
+    const { tooltipId, title, text, children } = props, restProps = __rest(props, ["tooltipId", "title", "text", "children"]);
     const focusableChildren = addTabIndexIfNeeded(children);
-    return (_jsx(StyledTooltip, Object.assign({ ref: ref, title: 
+    return (_jsx(StyledTooltip, Object.assign({ id: tooltipId, ref: ref, title: 
         // title이 없고 text가 null인 경우 툴팁을 표시하지 않음
         !title && text === null ? null : (_jsxs(_Fragment, { children: [title && _jsx(TitleDiv, { children: title }), text] })), describeChild: true }, restProps, { children: focusableChildren })));
 });

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

@@ -7,9 +7,12 @@ import { AlertFillIcon, DeleteBinLineIcon, ErrorWarningFillIcon, } from "../../.
 import { SquareButton } from "../../../../../components/SquareButton";
 import { Tooltip } from "../../../../../components/Tooltip";
 import { TextTypeDropdown } from "./TextTypeDropdown";
+import { uid } from "uid";
+import { useMemo } from "react";
 export function FormSolution(props) {
     const { index, control, rules, onDelete } = props;
     const theme = useTheme();
+    const uniqueId = useMemo(uid, []);
     return (_jsx(Controller, { name: `solutions.${index}.value`, control: control, rules: rules, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => {
             const disabled = (error === null || error === void 0 ? void 0 : error.type) === "enabled";
             return (_jsx(Input, { size: "small", color: invalid ? "activeDanger" : "default", onChange: onChange, disabled: disabled, value: value, hintIcon: !disabled && invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: !disabled ? error === null || error === void 0 ? void 0 : error.message : undefined, placeholder: "\uC548\uB155\uD558\uC138\uC694", fullWidth: true, css: css `
@@ -21,8 +24,8 @@ export function FormSolution(props) {
                   gap: 4px;
                 ` }, { 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: {
+                            } })), disabled && (_jsx(Tooltip, Object.assign({ tooltipId: uniqueId, 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": "정답 등록 불가",
-                                } }) })))] })) }));
+                                }, "aria-labelledby": uniqueId }) })))] })) }));
         } }));
 }

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

@@ -13,9 +13,13 @@ import { FormSegmentedControl } from "./FormSegmentedControl";
 import { FormPlaceholder } from "./FormPlaceholder";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $getNodeByKey } from "lexical";
+import { uid } from "uid";
+import { useMemo } from "react";
 export function SettingForm(props) {
     const { solutions, showCharacterNumber, placeholder, nodeKey, onClose, caseSensitive, ignoreWhitespace, } = props;
     const [editor] = useLexicalComposerContext();
+    const inputTooltipId = useMemo(uid, []);
+    const placeholderTooltipId = useMemo(uid, []);
     const { control, handleSubmit, watch, trigger } = useForm({
         mode: "all",
         defaultValues: {
@@ -73,16 +77,16 @@ export function SettingForm(props) {
             ` }, { children: [_jsx(AlarmWarningFillIcon, { color: theme.color.foreground.neutralBaseDisabled, css: css `
                 width: 14px;
                 height: 14px;
-              ` }), _jsx(Label, { children: "\uAC00\uB2A5\uD55C \uC815\uB2F5\uC744 \uBAA8\uB450 \uCD94\uAC00\uD574\uC57C \uC6D0\uD65C\uD558\uAC8C \uC790\uB3D9 \uCC44\uC810\uD560 \uC218 \uC788\uC5B4\uC694." })] }))] }), _jsxs(Right, { children: [_jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC785\uB825 \uCE78", _jsx(Tooltip, Object.assign({ text: _jsxs("span", { children: [`예를 들어 정답이 '글자 수'이고`, _jsx("br", {}), _jsx("b", { children: "\uAE00\uC790 \uC218\uB300\uB85C" }), " \uC635\uC158\uC744 \uC120\uD0DD\uD588\uB2E4\uBA74", _jsx("br", {}), `입력 칸이 '☐☐ ☐' 처럼 표시됩니다.`] }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
+              ` }), _jsx(Label, { children: "\uAC00\uB2A5\uD55C \uC815\uB2F5\uC744 \uBAA8\uB450 \uCD94\uAC00\uD574\uC57C \uC6D0\uD65C\uD558\uAC8C \uC790\uB3D9 \uCC44\uC810\uD560 \uC218 \uC788\uC5B4\uC694." })] }))] }), _jsxs(Right, { children: [_jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC785\uB825 \uCE78", _jsx(Tooltip, Object.assign({ tooltipId: inputTooltipId, text: _jsxs("span", { children: [`예를 들어 정답이 '글자 수'이고`, _jsx("br", {}), _jsx("b", { children: "\uAE00\uC790 \uC218\uB300\uB85C" }), " \uC635\uC158\uC744 \uC120\uD0DD\uD588\uB2E4\uBA74", _jsx("br", {}), `입력 칸이 '☐☐ ☐' 처럼 표시됩니다.`] }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
                     width: 12px;
                     height: 12px;
-                  ` }) }))] }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "showCharacterNumber", items: [
+                  `, "aria-labelledby": inputTooltipId }) }))] }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "showCharacterNumber", items: [
                                             { value: false, label: "한 칸으로" },
                                             { value: true, label: "글자 수대로" },
-                                        ] })] }), _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, Object.assign({ text: _jsx("span", { children: "\uC785\uB825 \uCE78\uC5D0 \uAE30\uBCF8\uC73C\uB85C \uB178\uCD9C\uB418\uB294 \uD14D\uC2A4\uD2B8\uC785\uB2C8\uB2E4." }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
+                                        ] })] }), _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, Object.assign({ tooltipId: placeholderTooltipId, text: _jsx("span", { children: "\uC785\uB825 \uCE78\uC5D0 \uAE30\uBCF8\uC73C\uB85C \uB178\uCD9C\uB418\uB294 \uD14D\uC2A4\uD2B8\uC785\uB2C8\uB2E4." }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
                     width: 12px;
                     height: 12px;
-                  ` }) }))] }), _jsx(FormPlaceholder, { control: control })] }), _jsxs(FormArea, { children: [_jsx(Label, { children: "\uB744\uC5B4\uC4F0\uAE30" }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "ignoreWhitespace", items: [
+                  `, "aria-labelledby": placeholderTooltipId }) }))] }), _jsx(FormPlaceholder, { control: control })] }), _jsxs(FormArea, { children: [_jsx(Label, { children: "\uB744\uC5B4\uC4F0\uAE30" }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "ignoreWhitespace", items: [
                                             { value: true, label: "무시하기" },
                                             { value: false, label: "포함하기" },
                                         ] })] }), _jsxs(FormArea, { children: [_jsx(Label, { children: "\uB300\uC18C\uBB38\uC790" }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "caseSensitive", items: [

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

@@ -11,12 +11,13 @@ import { AddFillIcon, AlarmWarningFillIcon, ListRadioIcon, } from "../../../../.
 import { Button } from "../../../../../components/Button";
 import { FormSelection } from "./FormSelection";
 import { Tooltip } from "../../../../../components/Tooltip";
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { uid } from "uid";
 export function SettingForm(props) {
     const { selections, nodeKey, onClose } = props;
     const [editor] = useLexicalComposerContext();
     const [tooltipOpen, setTooltipOpen] = useState(false);
+    const uniqueId = useMemo(uid, []);
     const { control, handleSubmit, watch } = useForm({
         mode: "all",
         defaultValues: {
@@ -89,7 +90,7 @@ export function SettingForm(props) {
                         }, disabled: fields.length >= 9 }), hasMultipleAnswers && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
                 width: 14px;
                 height: 14px;
-              ` }), "\uC815\uB2F5\uC774 \uC5EC\uB7EC \uAC1C\uC778 \uBB38\uC81C\uC5D0\uB294 \uC815\uB2F5\uC744 \uBAA8\uB450 \uC120\uD0DD\uD574\uC57C \uD55C\uB2E4\uB294 \uC548\uB0B4\uAC00 \uC81C\uACF5\uB429\uB2C8\uB2E4."] }))] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Tooltip, Object.assign({ open: !hasAnswer && tooltipOpen, text: "\uC120\uD0DD\uC9C0 \uC911 \uC815\uB2F5\uC744 \uD45C\uC2DC\uD574\uC8FC\uC138\uC694.", onOpen: () => setTooltipOpen(true), onClose: () => setTooltipOpen(false), placement: "top-end" }, { children: _jsx("span", { children: _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", type: "submit", disabled: !hasAnswer }) }) }))] })] })));
+              ` }), "\uC815\uB2F5\uC774 \uC5EC\uB7EC \uAC1C\uC778 \uBB38\uC81C\uC5D0\uB294 \uC815\uB2F5\uC744 \uBAA8\uB450 \uC120\uD0DD\uD574\uC57C \uD55C\uB2E4\uB294 \uC548\uB0B4\uAC00 \uC81C\uACF5\uB429\uB2C8\uB2E4."] }))] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Tooltip, Object.assign({ tooltipId: uniqueId, open: !hasAnswer && tooltipOpen, text: "\uC120\uD0DD\uC9C0 \uC911 \uC815\uB2F5\uC744 \uD45C\uC2DC\uD574\uC8FC\uC138\uC694.", onOpen: () => setTooltipOpen(true), onClose: () => setTooltipOpen(false), placement: "top-end" }, { children: _jsx("span", Object.assign({ "aria-labelledby": uniqueId }, { children: _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", type: "submit", disabled: !hasAnswer }) })) }))] })] })));
 }
 const Form = styled.form(({ theme }) => css `
     display: flex;

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

@@ -8,10 +8,13 @@ import { css } from "@emotion/react";
 import { InputMethodLineIcon, QuestionFillIcon } from "../../../../icons";
 import { Button, Input, shadows, Tooltip } from "../../../..";
 import { $isSheetInputNode } from "./SheetInputNode";
+import { uid } from "uid";
+import { useMemo } from "react";
 /** 활동지 활동의 입력칸 설정 컴포넌트입니다. */
 export function SettingForm(props) {
     const { multiline, placeholder, nodeKey, onClose } = props;
     const [editor] = useLexicalComposerContext();
+    const uniqueId = useMemo(uid, []);
     const { control, handleSubmit } = useForm({
         mode: "all",
         defaultValues: {
@@ -31,10 +34,10 @@ export function SettingForm(props) {
     return (_jsxs(Form, Object.assign({ onSubmit: handleSubmit(onSettingSubmit) }, { children: [_jsxs(Title, { children: [_jsx(InputMethodLineIcon, { css: css `
             width: 12px;
             height: 12px;
-          ` }), multiline ? "서술형 입력 칸" : "단답형 입력 칸"] }), _jsx(Content, { children: _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, Object.assign({ text: _jsx("span", { children: "\uC785\uB825 \uCE78\uC5D0 \uAE30\uBCF8\uC73C\uB85C \uB178\uCD9C\uB418\uB294 \uD14D\uC2A4\uD2B8\uC785\uB2C8\uB2E4." }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
+          ` }), multiline ? "서술형 입력 칸" : "단답형 입력 칸"] }), _jsx(Content, { children: _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, Object.assign({ tooltipId: uniqueId, text: _jsx("span", { children: "\uC785\uB825 \uCE78\uC5D0 \uAE30\uBCF8\uC73C\uB85C \uB178\uCD9C\uB418\uB294 \uD14D\uC2A4\uD2B8\uC785\uB2C8\uB2E4." }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
                   width: 12px;
                   height: 12px;
-                ` }) }))] }), _jsx(Controller, { name: "placeholder", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { size: "small", color: "default", value: value, onChange: onChange, placeholder: "\uC608) \uC5EC\uAE30\uC5D0 \uC785\uB825\uD558\uC138\uC694." })) })] }) }), _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" })] })] })));
+                `, "aria-labelledby": uniqueId }) }))] }), _jsx(Controller, { name: "placeholder", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { size: "small", color: "default", value: value, onChange: onChange, placeholder: "\uC608) \uC5EC\uAE30\uC5D0 \uC785\uB825\uD558\uC138\uC694." })) })] }) }), _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;

package/dist/patterns/ToggleButtonGroup/ToggleButton.js

@@ -3,14 +3,17 @@ import styled from "@emotion/styled";
 import { HOVER, RESET_BUTTON, Tooltip } from "../..";
 import { css } from "@emotion/react";
 import { toggleButtonGroupClasses, } from "./ToggleButtonGroup";
+import { uid } from "uid";
+import { useMemo } from "react";
 /** 하나의 ToggleButton을 그립니다. */
 export function ToggleButton(props) {
     const { datum, placement, isActive, onClick } = props;
     const { label, onIcon, offIcon } = datum;
+    const uniqueId = useMemo(uid, []);
     if (isActive) {
         return (_jsxs(Active, Object.assign({ "aria-label": `${label} 선택 해제하기`, className: toggleButtonGroupClasses.toggleButton.active, onClick: onClick }, { children: [onIcon, label] })));
     }
-    return (_jsx(Tooltip, Object.assign({ placement: placement, text: label }, { children: _jsx(Inactive, Object.assign({ "aria-label": `${label} 선택하기`, className: toggleButtonGroupClasses.toggleButton.inactive, onClick: onClick }, { children: offIcon })) })));
+    return (_jsx(Tooltip, Object.assign({ tooltipId: uniqueId, placement: placement, text: label }, { children: _jsx(Inactive, Object.assign({ "aria-label": `${label} 선택하기`, className: toggleButtonGroupClasses.toggleButton.inactive, onClick: onClick, "aria-labelledby": uniqueId }, { children: offIcon })) })));
 }
 const Active = styled.button(({ theme }) => css `
     ${RESET_BUTTON};

package/package.json

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