@team-monolith/cds 1.38.4 → 1.38.5

package/dist/patterns/Dropdown/Dropdown.js

@@ -1,3 +1,14 @@
+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, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { forwardRef, useRef, useState } from "react";
@@ -7,7 +18,7 @@ import { DropdownMenu } from "./DropdownMenu";
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=203-95329&t=FwczLZ1IVvskUVbT-0)
  */
 const Dropdown = forwardRef((props, ref) => {
-    const { className, component: Component = "div", disabled, color = "primary", size = "medium", bold, startIcon, endIcon = _jsx(ArrowDropDownFillIcon, {}), buttonCss, label, onClick, menuProps = {}, children, closeOnItemClick, } = props;
+    const { className, component: Component = "div", disabled, color = "primary", size = "medium", bold, startIcon, endIcon = _jsx(ArrowDropDownFillIcon, {}), buttonCss, label, onClick, menuProps = {}, children, closeOnItemClick } = props, other = __rest(props, ["className", "component", "disabled", "color", "size", "bold", "startIcon", "endIcon", "buttonCss", "label", "onClick", "menuProps", "children", "closeOnItemClick"]);
     const buttonProps = {
         disabled,
         color,
@@ -16,16 +27,19 @@ const Dropdown = forwardRef((props, ref) => {
         endIcon,
     };
     const menuRef = useRef(null);
+    const isControlled = menuProps.open !== undefined;
     const [open, setOpen] = useState(false);
     const [itemState, setItemState] = useState(new Map());
     const handleClick = (e) => {
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        setOpen(true);
+        if (!isControlled)
+            setOpen(true);
     };
     const handleClose = (e) => {
         var _a;
         e.stopPropagation();
-        setOpen(false);
+        if (!isControlled)
+            setOpen(false);
         setItemState((prevState) => {
             const newState = new Map(prevState);
             newState.forEach((value, key) => {
@@ -38,6 +52,6 @@ const Dropdown = forwardRef((props, ref) => {
         });
         (_a = menuProps === null || menuProps === void 0 ? void 0 : menuProps.onClose) === null || _a === void 0 ? void 0 : _a.call(menuProps, e);
     };
-    return (_jsxs(Component, Object.assign({ className: className, ref: ref }, { children: [_jsx(Button, Object.assign({ css: buttonCss, ref: menuRef }, buttonProps, { label: label, bold: bold, onClick: handleClick, fullWidth: true })), _jsx(DropdownMenu, Object.assign({}, 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, { label: label, bold: bold, onClick: handleClick, fullWidth: true })), _jsx(DropdownMenu, Object.assign({}, menuProps, { open: isControlled ? menuProps.open : open, onClose: handleClose, anchorEl: menuRef.current, closeOnItemClick: closeOnItemClick, itemState: itemState, setItemState: setItemState }, { children: children }))] })));
 });
 export { Dropdown };

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

@@ -31,6 +31,7 @@ export default function TextInput(props) {
                   color: ${theme.color.foreground.danger};
                   &::placeholder {
                     // inputComponent의 placeholder 스타일을 덮어쓰기 위해 부득이하게 !important 사용
+                    // TODO: static classname을 사용하여 !important 제거
                     color: ${theme.color.foreground.dangerDisabled} !important;
                   }
                 `

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxComponent.d.ts

@@ -1,10 +1,13 @@
 import React from "react";
 import { ImageProps } from "../ProblemSelectNode";
+export type SelectBoxType = "primary" | "success" | "danger";
 /** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
 export declare function SelectBoxComponent(props: {
     className?: string;
     indexClassName?: string;
     contentClassName?: string;
+    /** SelectBox의 스타일 타입. 전달하지 않으면 기본 스타일이 적용됩니다. */
+    type?: SelectBoxType;
     /** 문제 번호 박스 내부를 그립니다. */
     index: React.ReactNode;
     image?: ImageProps | null;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxComponent.js

@@ -1,11 +1,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-import { css } from "@emotion/react";
+import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
+const TYPE_TO_CONTAINER_STYLE = (theme, type) => ({
+    primary: css `
+      background: ${theme.color.container.primaryContainer};
+      border: 1px solid ${theme.color.foreground.primary};
+      color: ${theme.color.container.primaryOnContainer};
+    `,
+    success: css `
+      background: ${theme.color.container.successContainer};
+      border: 1px solid ${theme.color.background.successActive};
+      color: ${theme.color.container.successOnContainer};
+    `,
+    danger: css `
+      background: ${theme.color.container.dangerContainer};
+      border: 1px solid ${theme.color.background.dangerActive};
+      color: ${theme.color.container.dangerOnContainer};
+    `,
+})[type];
+const TYPE_TO_INDEX_STYLE = (theme, type) => ({
+    primary: css `
+      background: ${theme.color.background.primary};
+      border: 1px solid ${theme.color.background.primary};
+      color: ${theme.color.foreground.neutralAlt};
+    `,
+    success: css `
+      background: ${theme.color.background.successActive};
+      border: 1px solid ${theme.color.background.successActive};
+      color: ${theme.color.foreground.neutralAlt};
+    `,
+    danger: css `
+      background: ${theme.color.background.dangerActive};
+      border: 1px solid ${theme.color.background.dangerActive};
+      color: ${theme.color.foreground.neutralAlt};
+    `,
+})[type];
 /** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
 export function SelectBoxComponent(props) {
-    const { className, indexClassName, contentClassName, index, image, text, endIcon, onClick, } = props;
-    return (_jsxs(Container, Object.assign({ className: className, onClick: onClick }, { children: [_jsx(Index, Object.assign({ className: indexClassName }, { children: index })), _jsxs(Content, Object.assign({ className: contentClassName }, { children: [image && (_jsx("img", { src: image.src, alt: image.altText, css: css `
+    const { className, indexClassName, contentClassName, type, index, image, text, endIcon, onClick, } = props;
+    const theme = useTheme();
+    return (_jsxs(Container, Object.assign({ className: className, css: type ? TYPE_TO_CONTAINER_STYLE(theme, type) : undefined, onClick: onClick }, { children: [_jsx(Index, Object.assign({ className: indexClassName, css: type ? TYPE_TO_INDEX_STYLE(theme, type) : undefined }, { children: index })), _jsxs(Content, Object.assign({ className: contentClassName }, { children: [image && (_jsx("img", { src: image.src, alt: image.altText, css: css `
               height: auto;
               // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
               max-width: 100%;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxView.js

@@ -1,97 +1,35 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-import { css, useTheme } from "@emotion/react";
-import { css as cssToClassName } from "@emotion/css";
+import { css } from "@emotion/react";
 import { CheckboxCircleFillIcon, CheckFillIcon, CloseCircleFillIcon, } from "../../../../../icons";
 import { SelectBoxComponent } from "./SelectBoxComponent";
 import Tag from "../../../../../components/Tag";
-const getBoxStyle = (theme, isSelected, isAnswer) => {
-    if (isSelected) {
-        // 선택 박스
-        if (isAnswer === undefined) {
-            return css `
-        background: ${theme.color.container.primaryContainer};
-        border: 1px solid ${theme.color.foreground.primary};
-        color: ${theme.color.container.primaryOnContainer};
-      `;
-        }
-        // 정답 박스
-        if (isAnswer) {
-            return css `
-        background: ${theme.color.container.successContainer};
-        border: 1px solid ${theme.color.background.successActive};
-        color: ${theme.color.container.successOnContainer};
-      `;
-        }
-        // 오답 박스
-        return css `
-      background: ${theme.color.container.dangerContainer};
-      border: 1px solid ${theme.color.background.dangerActive};
-      color: ${theme.color.container.dangerOnContainer};
-    `;
-    }
-    return undefined;
-};
-const getIndexClassName = (theme, isSelected, isAnswer) => {
-    if (isSelected) {
-        // 선택 박스
-        if (isAnswer === undefined) {
-            return cssToClassName `
-        background: ${theme.color.background.primary};
-        border: 1px solid ${theme.color.background.primary};
-        color: ${theme.color.foreground.neutralAlt};
-      `;
-        }
-        // 정답 박스
-        if (isAnswer) {
-            return cssToClassName `
-        background: ${theme.color.background.successActive};
-        border: 1px solid ${theme.color.background.successActive};
-        color: ${theme.color.foreground.neutralAlt};
-      `;
-        }
-        // 오답 박스
-        return cssToClassName `
-      background: ${theme.color.background.dangerActive};
-      border: 1px solid ${theme.color.background.dangerActive};
-      color: ${theme.color.foreground.neutralAlt};
-    `;
-    }
-    return undefined;
-};
-const getIndexComponent = (index, isSelected, isAnswer) => {
-    if (isSelected) {
-        // 선택 박스
-        if (isAnswer === undefined) {
-            return (_jsx(CheckFillIcon, { css: css `
-            width: 12px;
-            height: 12px;
-          ` }));
-        }
-        // 정답 박스
-        if (isAnswer) {
-            return (_jsx(CheckboxCircleFillIcon, { css: css `
-            width: 12px;
-            height: 12px;
-          ` }));
-        }
-        // 오답 박스
-        return (_jsx(CloseCircleFillIcon, { css: css `
+const TYPE_TO_INDEX_ICON = (type) => ({
+    primary: (_jsx(CheckFillIcon, { css: css `
           width: 12px;
           height: 12px;
-        ` }));
-    }
-    return index;
-};
+        ` })),
+    success: (_jsx(CheckboxCircleFillIcon, { css: css `
+          width: 12px;
+          height: 12px;
+        ` })),
+    danger: (_jsx(CloseCircleFillIcon, { css: css `
+          width: 12px;
+          height: 12px;
+        ` })),
+})[type];
 export function SelectBoxView(props) {
     const { index, isSelected, isAnswer, image, text, onClick } = props;
-    const theme = useTheme();
-    return (_jsx(SelectBoxComponent, { css: [
-            css `
-          width: 100%;
-        `,
-            getBoxStyle(theme, isSelected, isAnswer),
-        ], indexClassName: getIndexClassName(theme, isSelected, isAnswer), index: getIndexComponent(index, isSelected, isAnswer), image: image, text: text, 
+    const selectBoxType = isSelected
+        ? isAnswer === undefined
+            ? "primary"
+            : isAnswer
+                ? "success"
+                : "danger"
+        : undefined;
+    return (_jsx(SelectBoxComponent, { css: css `
+        width: 100%;
+      `, type: selectBoxType, index: selectBoxType ? TYPE_TO_INDEX_ICON(selectBoxType) : index, image: image, text: text, 
         // isAnswer가 존재하면 채점 후의 상태이므로 unclickable을 위해 onClick을 전달하지 않음
         onClick: isAnswer === undefined ? onClick : undefined, 
         // 선택되지 않았으나 정답일 때 정답 태그를 표시

package/package.json

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