@team-monolith/cds 1.99.8 → 1.99.9

package/dist/components/Button.js

@@ -212,7 +212,7 @@ const SIZE_TO_LABEL_STYLE = {
 export const Button = React.forwardRef(function Button(props, ref) {
     const { className, component: Component = "button", disabled, color, size, startIcon, endIcon, label, fullWidth, bold = false, loading = false } = props, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label", "fullWidth", "bold", "loading"]);
     const theme = useTheme();
-    return (_jsxs(Component, Object.assign({ type: Component === "a" ? undefined : "button" }, other, { className: className, ref: ref, css: [
+    return (_jsxs(Component, Object.assign({ type: Component === "button" || Component === "input" ? "button" : undefined }, other, { className: className, ref: ref, css: [
             css `
           display: inline-flex;
           align-items: center;

package/dist/components/OverflowTooltip.js

@@ -10,7 +10,7 @@ import { uid } from "uid";
 export function OverflowTooltip(props) {
     const tooltipRef = useRef(null);
     const [isTooltipOpen, setIsTooltipOpen] = useState(false);
-    const uniqueId = useMemo(uid, []);
+    const tooltipId = useMemo(() => `tooltip-${uid()}`, []);
     const getIsOverflow = () => {
         if (tooltipRef.current) {
             return tooltipRef.current.scrollWidth > tooltipRef.current.offsetWidth;
@@ -25,7 +25,7 @@ export function OverflowTooltip(props) {
     const handleClose = () => {
         setIsTooltipOpen(false);
     };
-    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 })) })));
+    return (_jsx(Tooltip, Object.assign({ tooltipId: tooltipId, open: isTooltipOpen, onOpen: handleOpen, onClose: handleClose }, props, { children: _jsx(OverflowDiv, Object.assign({ css: props.childrenCss, ref: tooltipRef, onMouseOver: handleOpen, "aria-labelledby": tooltipId }, { children: props.text })) })));
 }
 const OverflowDiv = styled.div `
   overflow: hidden;

package/dist/components/SquareButton.js

@@ -184,7 +184,9 @@ export const SquareButton = React.forwardRef(function SquareButton(props, ref) {
           align-items: center;
           gap: 8px;
           width: ${fullWidth ? "100%" : "fit-content"};
-        ` }, { children: [_jsx(Component, Object.assign({ type: Component === "a" ? undefined : "button" }, other, buttonProps, { ref: ref, css: [
+        ` }, { children: [_jsx(Component, Object.assign({ type: Component === "button" || Component === "input"
+                    ? "button"
+                    : undefined }, other, buttonProps, { ref: ref, css: [
                     COLOR_TO_BUTTON_STYLE(theme, color, Boolean(disabled || loading)),
                     SIZE_TO_BUTTON_STYLE[size],
                     css `

package/dist/patterns/Dropdown/Dropdown.js

@@ -32,7 +32,7 @@ const Dropdown = forwardRef(function Dropdown(props, ref) {
     const isControlled = menuProps.open !== undefined;
     const [open, setOpen] = useState(false);
     const [itemState, setItemState] = useState(new Map());
-    const uniqueId = useMemo(uid, []);
+    const dropdownMenuId = useMemo(() => `dropdown-menu-${uid()}`, []);
     const handleClick = (e) => {
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
         if (!isControlled)
@@ -55,6 +55,6 @@ const Dropdown = forwardRef(function Dropdown(props, ref) {
         });
         (_a = menuProps.onClose) === null || _a === void 0 ? void 0 : _a.call(menuProps, e);
     };
-    return (_jsxs(Component, Object.assign({ className: className }, other, { ref: ref }, { children: [_jsx(Button, Object.assign({ css: buttonCss, ref: menuRef }, buttonProps, { onClick: handleClick, fullWidth: true, "aria-expanded": (_a = menuProps.open) !== null && _a !== void 0 ? _a : open, "aria-controls": uniqueId })), _jsx(DropdownMenu, Object.assign({ dropdownMenuId: uniqueId }, menuProps, { open: isControlled ? menuProps.open : open, onClose: handleClose, anchorEl: menuRef.current, closeOnItemClick: closeOnItemClick, itemState: itemState, setItemState: setItemState }, { children: children }))] })));
+    return (_jsxs(Component, Object.assign({ className: className }, other, { ref: ref }, { children: [_jsx(Button, Object.assign({ css: buttonCss, ref: menuRef }, buttonProps, { onClick: handleClick, fullWidth: true, "aria-expanded": (_a = menuProps.open) !== null && _a !== void 0 ? _a : open, "aria-controls": dropdownMenuId })), _jsx(DropdownMenu, Object.assign({ dropdownMenuId: dropdownMenuId }, menuProps, { open: isControlled ? menuProps.open : open, onClose: handleClose, anchorEl: menuRef.current, closeOnItemClick: closeOnItemClick, itemState: itemState, setItemState: setItemState }, { children: children }))] })));
 });
 export { Dropdown };

package/dist/patterns/Dropdown/DropdownItem/DropdownItem.js

@@ -31,7 +31,7 @@ const DropdownItem = React.forwardRef(function DropdownItem(props, ref) {
     const { className, index, labelCss, component: Component = "div", type = "default", checkbox, checkboxProps = { checked: false }, startIcon, label, endIcon, preserveIconColor = false, disabled, active, onMouseEnter, onMouseLeave, onClick, subMenuProps, children } = props, other = __rest(props, ["className", "index", "labelCss", "component", "type", "checkbox", "checkboxProps", "startIcon", "label", "endIcon", "preserveIconColor", "disabled", "active", "onMouseEnter", "onMouseLeave", "onClick", "subMenuProps", "children"]);
     const itemRef = useRef(null);
     const { open, onCloseOnItemClick, nestedIndex, itemState, setItemState } = useContext(DropdownContext);
-    const uniqueId = useMemo(uid, []);
+    const dropdownMenuId = useMemo(() => `dropdown-menu-${uid()}`, []);
     const absItemIndex = nestedIndex ? `${nestedIndex}-${index}` : `${index}`;
     // 서브메뉴가 존재하는지 여부
     const isSubMenuExist = Boolean(children);
@@ -51,7 +51,7 @@ const DropdownItem = React.forwardRef(function DropdownItem(props, ref) {
             setSelected(setItemState, absItemIndex);
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Component, Object.assign({ className: className, ref: ref, tabIndex: disabled ? -1 : 0, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: handleClick, "aria-disabled": disabled }, other, { "aria-expanded": isSubMenuExist ? isSubMenuShowed : undefined, "aria-controls": isSubMenuExist ? uniqueId : undefined }, { children: _jsxs(Item, Object.assign({ ref: itemRef, disabled: disabled, selected: isSubMenuShowed || Boolean(active) }, { children: [_jsxs(LeftWrapper, { children: [checkbox && (_jsx(StyledCheckboxInput, Object.assign({}, checkboxProps, { disabled: disabled, onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Component, Object.assign({ className: className, ref: ref, tabIndex: disabled ? -1 : 0, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: handleClick, "aria-disabled": disabled }, other, { "aria-expanded": isSubMenuExist ? isSubMenuShowed : undefined, "aria-controls": isSubMenuExist ? dropdownMenuId : undefined }, { children: _jsxs(Item, Object.assign({ ref: itemRef, disabled: disabled, selected: isSubMenuShowed || Boolean(active) }, { children: [_jsxs(LeftWrapper, { children: [checkbox && (_jsx(StyledCheckboxInput, Object.assign({}, checkboxProps, { disabled: disabled, onClick: (e) => {
                                         e.stopPropagation();
                                     } }))), startIcon && (_jsx(IconDiv, Object.assign({ type: type, preserveIconColor: preserveIconColor }, { children: startIcon }))), _jsx(LabelDiv, Object.assign({ css: labelCss, type: type }, { children: label }))] }), endIcon && (_jsx(IconDiv, Object.assign({ type: type, preserveIconColor: preserveIconColor }, { children: endIcon }))), !endIcon && isSubMenuExist && (_jsx(IconDiv, Object.assign({ type: type, preserveIconColor: preserveIconColor }, { children: _jsx(ArrowRightSLineIcon, {}) })))] })) })), isSubMenuExist && (_jsx(DropdownContext.Provider, Object.assign({ value: {
                     open,
@@ -59,7 +59,7 @@ const DropdownItem = React.forwardRef(function DropdownItem(props, ref) {
                     nestedIndex: absItemIndex,
                     itemState,
                     setItemState,
-                } }, { children: _jsx(DropdownMenu, Object.assign({ dropdownMenuId: uniqueId }, subMenuProps, { open: isSubMenuShowed, anchorEl: itemRef.current, isNestedMenu: true, anchorOrigin: {
+                } }, { children: _jsx(DropdownMenu, Object.assign({ dropdownMenuId: dropdownMenuId }, subMenuProps, { open: isSubMenuShowed, anchorEl: itemRef.current, isNestedMenu: true, anchorOrigin: {
                         vertical: "top",
                         horizontal: "right",
                     }, itemState: itemState, setItemState: setItemState }, { children: children })) })))] }));

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

@@ -12,7 +12,7 @@ import { useMemo } from "react";
 export function FormSolution(props) {
     const { index, control, rules, onDelete } = props;
     const theme = useTheme();
-    const uniqueId = useMemo(uid, []);
+    const tooltipId = useMemo(() => `tooltip-${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 `
@@ -24,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({ 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: {
+                            } })), disabled && (_jsx(Tooltip, Object.assign({ tooltipId: tooltipId, 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 }) })))] })) }));
+                                }, "aria-labelledby": tooltipId }) })))] })) }));
         } }));
 }

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

@@ -18,8 +18,8 @@ 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 inputTooltipId = useMemo(() => `tooltip-${uid()}`, []);
+    const placeholderTooltipId = useMemo(() => `tooltip-${uid()}`, []);
     const { control, handleSubmit, watch, trigger } = useForm({
         mode: "all",
         defaultValues: {

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

@@ -17,7 +17,7 @@ export function SettingForm(props) {
     const { selections, nodeKey, onClose } = props;
     const [editor] = useLexicalComposerContext();
     const [tooltipOpen, setTooltipOpen] = useState(false);
-    const uniqueId = useMemo(uid, []);
+    const tooltipId = useMemo(() => `tooltip-${uid()}`, []);
     const { control, handleSubmit, watch } = useForm({
         mode: "all",
         defaultValues: {
@@ -90,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({ 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 }) })) }))] })] })));
+              ` }), "\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: tooltipId, 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": tooltipId }, { 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

@@ -14,7 +14,7 @@ import { useMemo } from "react";
 export function SettingForm(props) {
     const { multiline, placeholder, nodeKey, onClose } = props;
     const [editor] = useLexicalComposerContext();
-    const uniqueId = useMemo(uid, []);
+    const tooltipId = useMemo(() => `tooltip-${uid()}`, []);
     const { control, handleSubmit } = useForm({
         mode: "all",
         defaultValues: {
@@ -34,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({ 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 `
+          ` }), multiline ? "서술형 입력 칸" : "단답형 입력 칸"] }), _jsx(Content, { children: _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, Object.assign({ tooltipId: tooltipId, 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;
-                `, "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" })] })] })));
+                `, "aria-labelledby": tooltipId }) }))] }), _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

@@ -9,11 +9,11 @@ import { useMemo } from "react";
 export function ToggleButton(props) {
     const { datum, placement, isActive, onClick } = props;
     const { label, onIcon, offIcon } = datum;
-    const uniqueId = useMemo(uid, []);
+    const tooltipId = useMemo(() => `tooltip-${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({ 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 })) })));
+    return (_jsx(Tooltip, Object.assign({ tooltipId: tooltipId, placement: placement, text: label }, { children: _jsx(Inactive, Object.assign({ "aria-label": `${label} 선택하기`, className: toggleButtonGroupClasses.toggleButton.inactive, onClick: onClick, "aria-labelledby": tooltipId }, { children: offIcon })) })));
 }
 const Active = styled.button(({ theme }) => css `
     ${RESET_BUTTON};

package/package.json

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