@team-monolith/cds 1.82.4 → 1.83.1

package/dist/components/CheckboxInput.js

@@ -15,21 +15,20 @@ import { css, useTheme } from "@emotion/react";
 import * as React from "react";
 import styled from "@emotion/styled";
 import { ZINDEX } from "../utils/zIndex";
-const CHECKBOX_ICON_STYLE = (theme, type, disabled) => {
-    return {
-        default: css `
+const CHECKBOX_ICON_STYLE = (theme, type, disabled) => ({
+    default: css `
       rect {
         fill: ${theme.color.background.neutralBase};
         stroke: ${theme.color.background.neutralAltActive};
       }
       ${disabled
-            ? css `
+        ? css `
             rect {
               fill: ${theme.color.background.neutralBaseDisabled};
               stroke: ${theme.color.foreground.neutralBaseDisabled};
             }
           `
-            : css `
+        : css `
             input[type="checkbox"]:hover + & {
               rect {
                 stroke: ${theme.color.background.primary};
@@ -37,7 +36,7 @@ const CHECKBOX_ICON_STYLE = (theme, type, disabled) => {
             }
           `}
     `,
-        checked: css `
+    checked: css `
       rect {
         fill: ${theme.color.background.primary};
         stroke: ${theme.color.background.primary};
@@ -46,7 +45,7 @@ const CHECKBOX_ICON_STYLE = (theme, type, disabled) => {
         fill: ${theme.color.background.neutralBase};
       }
       ${disabled
-            ? css `
+        ? css `
             rect {
               fill: ${theme.color.background.neutralBaseDisabled};
               stroke: ${theme.color.background.primaryDisabled};
@@ -55,7 +54,7 @@ const CHECKBOX_ICON_STYLE = (theme, type, disabled) => {
               fill: ${theme.color.background.primaryDisabled};
             }
           `
-            : css `
+        : css `
             input[type="checkbox"]:hover + & {
               rect {
                 fill: ${theme.color.background.primaryActive};
@@ -64,7 +63,7 @@ const CHECKBOX_ICON_STYLE = (theme, type, disabled) => {
             }
           `}
     `,
-        partial: css `
+    partial: css `
       rect {
         fill: ${theme.color.background.neutralBase};
         stroke: ${theme.color.background.primary};
@@ -74,7 +73,7 @@ const CHECKBOX_ICON_STYLE = (theme, type, disabled) => {
         stroke: none;
       }
       ${disabled
-            ? css `
+        ? css `
             rect {
               fill: ${theme.color.background.neutralBaseDisabled};
               stroke: ${theme.color.background.primaryDisabled};
@@ -84,7 +83,7 @@ const CHECKBOX_ICON_STYLE = (theme, type, disabled) => {
               stroke: none;
             }
           `
-            : css `
+        : css `
             input[type="checkbox"]:hover + & {
               rect {
                 stroke: ${theme.color.background.primaryActive};
@@ -96,8 +95,7 @@ const CHECKBOX_ICON_STYLE = (theme, type, disabled) => {
             }
           `}
     `,
-    }[type];
-};
+})[type];
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=36-907&t=G4t39O7uXZvsGQ9u-0)
  */

package/dist/components/DecoratedNumber/Default/DefaultNumberLarge.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
-export declare const DefaultNumberLarge: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+interface DefaultNumberLargeProps {
+    className?: string;
     number: number;
-    innerColor?: string | undefined;
-    outerColor?: string | undefined;
-} & import("react").RefAttributes<SVGSVGElement>>;
+    innerColor?: string;
+    outerColor?: string;
+}
+export declare const DefaultNumberLarge: import("react").ForwardRefExoticComponent<DefaultNumberLargeProps & import("react").RefAttributes<SVGSVGElement>>;
+export {};

package/dist/components/DecoratedNumber/Default/DefaultNumberSmall.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
-export declare const DefaultNumberSmall: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+interface DefaultNumberSmallProps {
+    className?: string;
     number: number;
-    color?: string | undefined;
-} & import("react").RefAttributes<SVGSVGElement>>;
+    color?: string;
+}
+export declare const DefaultNumberSmall: import("react").ForwardRefExoticComponent<DefaultNumberSmallProps & import("react").RefAttributes<SVGSVGElement>>;
+export {};

package/dist/components/RadioInput.js

@@ -15,21 +15,20 @@ import { css, useTheme } from "@emotion/react";
 import * as React from "react";
 import styled from "@emotion/styled";
 import { ZINDEX } from "../utils/zIndex";
-const TYPE_TO_ICON_STYLE = (theme, type, disabled) => {
-    return {
-        default: css `
+const TYPE_TO_ICON_STYLE = (theme, type, disabled) => ({
+    default: css `
       path {
         stroke: ${theme.color.background.neutralAltActive};
         fill: ${theme.color.background.neutralBase};
       }
       ${disabled
-            ? css `
+        ? css `
             path {
               stroke: ${theme.color.foreground.neutralBaseDisabled};
               fill: ${theme.color.background.neutralBaseDisabled};
             }
           `
-            : css `
+        : css `
             input[type="radio"]:hover + & {
               path {
                 stroke: ${theme.color.background.primary};
@@ -37,7 +36,7 @@ const TYPE_TO_ICON_STYLE = (theme, type, disabled) => {
             }
           `}
     `,
-        selected: css `
+    selected: css `
       path {
         stroke: ${theme.color.background.primary};
         fill: ${theme.color.background.neutralBase};
@@ -46,7 +45,7 @@ const TYPE_TO_ICON_STYLE = (theme, type, disabled) => {
         fill: ${theme.color.background.primary};
       }
       ${disabled
-            ? css `
+        ? css `
             path {
               stroke: ${theme.color.background.primaryDisabled};
               fill: ${theme.color.background.neutralBaseDisabled};
@@ -55,7 +54,7 @@ const TYPE_TO_ICON_STYLE = (theme, type, disabled) => {
               fill: ${theme.color.background.primaryDisabled};
             }
           `
-            : css `
+        : css `
             input[type="radio"]:hover + & {
               path {
                 stroke: ${theme.color.background.primaryActive};
@@ -66,8 +65,7 @@ const TYPE_TO_ICON_STYLE = (theme, type, disabled) => {
             }
           `}
     `,
-    }[type];
-};
+})[type];
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=420-3704&t=lvpbJKdtz7Lb8wIQ-0)
  */

package/dist/icons/custom/uniqueidscripts.mjs

@@ -15,9 +15,7 @@ function replaceUniqueIds(dirPath) {
                 let content = fs.readFileSync(filePath).toString();
                 if (content.match(UNIQUE_ID_PATTERN) !== null) {
                     // uniqueId 템플릿 리터럴 replace 적용
-                    content = content.replaceAll(UNIQUE_ID_PATTERN, (_, _idPattern, id, _urlPattern, url) => {
-                        return `{\`${id || url}\`}`;
-                    });
+                    content = content.replaceAll(UNIQUE_ID_PATTERN, (_, _idPattern, id, _urlPattern, url) => `{\`${id || url}\`}`);
                     fs.writeFileSync(filePath, content);
                 }
             }

package/dist/patterns/Dropdown/Dropdown.js

@@ -50,7 +50,7 @@ const Dropdown = forwardRef(function Dropdown(props, ref) {
             });
             return newState;
         });
-        (_a = menuProps === null || menuProps === void 0 ? void 0 : menuProps.onClose) === null || _a === void 0 ? void 0 : _a.call(menuProps, e);
+        (_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 })), _jsx(DropdownMenu, Object.assign({}, menuProps, { open: isControlled ? menuProps.open : open, onClose: handleClose, anchorEl: menuRef.current, closeOnItemClick: closeOnItemClick, itemState: itemState, setItemState: setItemState }, { children: children }))] })));
 });

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

@@ -19,12 +19,10 @@ import { useContext, useRef } from "react";
 import { DropdownMenu } from "../DropdownMenu";
 import { DropdownContext } from "../DropdownContext";
 import { getSelected, setSelected } from "./selected";
-const TYPE_TO_COLOR = (theme, type) => {
-    return {
-        default: theme.color.foreground.neutralBase,
-        danger: theme.color.foreground.danger,
-    }[type];
-};
+const TYPE_TO_COLOR = (theme, type) => ({
+    default: theme.color.foreground.neutralBase,
+    danger: theme.color.foreground.danger,
+})[type];
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=106-1900&t=FwczLZ1IVvskUVbT-0)
  */
@@ -51,7 +49,7 @@ const DropdownItem = React.forwardRef(function DropdownItem(props, ref) {
             setSelected(setItemState, absItemIndex);
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Component, Object.assign({ className: className, ref: ref, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: handleClick, "aria-disabled": disabled }, other, { 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, { 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,

package/dist/patterns/Dropdown/DropdownMenu/DropdownMenu.d.ts

@@ -1,11 +1,12 @@
+/** @jsxImportSource @emotion/react */
 import { SerializedStyles } from "@emotion/react";
 import React from "react";
-import { ModalProps } from "@mui/material";
 import { OriginProps } from "./style";
 import { ItemState } from "../DropdownItem";
 export declare const DROPDOWN_MENU_WIDTH = 132;
 export declare const DROPDOWN_MENU_MAX_HEIGHT = 160;
-export interface DropdownMenuProps extends Omit<ModalProps, "open" | "onClose" | "children"> {
+export interface DropdownMenuProps {
+    className?: string;
     /** 드롭다운 메뉴의 커스텀 스타일 */
     menuCss?: SerializedStyles;
     /** 드롭다운 메뉴가 열리는지 여부 */
@@ -33,5 +34,5 @@ export interface DropdownMenuProps extends Omit<ModalProps, "open" | "onClose" |
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=106-1921&t=FwczLZ1IVvskUVbT-0)
  */
-declare const DropdownMenu: React.ForwardRefExoticComponent<Omit<DropdownMenuProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenu: React.ForwardRefExoticComponent<DropdownMenuProps & React.RefAttributes<HTMLDivElement>>;
 export { DropdownMenu };

package/dist/patterns/Dropdown/DropdownMenu/DropdownMenu.js

@@ -1,25 +1,15 @@
-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 "@emotion/react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import React, { useContext } from "react";
-import { Modal, shadows } from "../../..";
-import { Grow as MuiGrow, Portal } from "@mui/material";
-import { ORIGIN_PROPS_TO_POSITION, ORIGIN_PROPS_TO_TRANSFORM, } from "./style";
+import { shadows } from "../../..";
+import { Popover } from "@mui/material";
+import { ORIGIN_PROPS_TO_MARGIN } from "./style";
 import { DropdownContext } from "../DropdownContext";
+import styled from "@emotion/styled";
 export const DROPDOWN_MENU_WIDTH = 132;
 export const DROPDOWN_MENU_MAX_HEIGHT = 160;
+const EMPTY_MAP = Object.freeze(new Map());
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=106-1921&t=FwczLZ1IVvskUVbT-0)
  */
@@ -30,14 +20,18 @@ const DropdownMenu = React.forwardRef(function DropdownMenu(props, ref) {
     }, transformOrigin = {
         vertical: "top",
         horizontal: "left",
-    }, closeOnItemClick, children, menuCss, itemState = new Map(), setItemState = () => { } } = props, other = __rest(props, ["className", "open", "anchorEl", "onClose", "isNestedMenu", "anchorOrigin", "transformOrigin", "closeOnItemClick", "children", "menuCss", "itemState", "setItemState"]);
+    }, closeOnItemClick, children, menuCss, itemState = EMPTY_MAP, setItemState = () => { }, } = props;
     const { nestedIndex, onCloseOnItemClick } = useContext(DropdownContext);
     // 드롭다운 메뉴 위치 조정
-    const anchorRect = anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect();
-    const menuStyle = [
-        ORIGIN_PROPS_TO_POSITION(anchorOrigin, anchorRect, isNestedMenu),
-        ORIGIN_PROPS_TO_TRANSFORM(transformOrigin),
-    ];
+    const menuStyle = css `
+    .MuiPaper-root {
+      ${menuCss}
+      ${ORIGIN_PROPS_TO_MARGIN(anchorOrigin, isNestedMenu)}
+    }
+  `;
+    if (!anchorEl) {
+        return _jsx(_Fragment, {});
+    }
     // 최상위 드롭다운 메뉴
     if (!isNestedMenu) {
         return (_jsx(DropdownContext.Provider, Object.assign({ value: {
@@ -46,48 +40,45 @@ const DropdownMenu = React.forwardRef(function DropdownMenu(props, ref) {
                 nestedIndex,
                 itemState,
                 setItemState,
-            } }, { children: _jsx(Modal, Object.assign({ className: className, open: open, onClose: onClose, slotProps: {
-                    backdrop: {
-                        style: {
-                            backgroundColor: "transparent",
-                        },
-                    },
-                } }, other, { children: _jsx(Grow, Object.assign({ in: open }, { children: _jsx(Menu, Object.assign({ ref: ref, css: [menuCss, menuStyle] }, { children: children })) })) })) })));
+            } }, { children: _jsx(Menu, Object.assign({ className: className, open: open, onClose: onClose, anchorEl: anchorEl, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, ref: ref, css: menuStyle }, { children: children })) })));
     }
     // 중첩 드롭다운 메뉴
-    // Portal을 사용하여 DOM이 중첩되지 않고 최상단에 렌더링 됩니다.
-    // 드롭다운 메뉴에서 메뉴가 열리고 닫힐 때 애니메이션을 위해 Grow를 사용하고 있습니다.
-    // Grow에서는 transform속성이 있는데, 자식에 배치되는 Menu에서는 position: fixed 속성이 있습니다.
-    // position: fixed는 뷰포트를 기준으로 요소를 배치하는데, 부모가 transform속성을 지니면 fixed동작이 제대로 이루어지지 않습니다.
-    // 아이템이 열리고 닫힐 때 transform속성이 생기고, 그 아이템의 자식인 서브메뉴는 position: fixed이므로 문제가 발생합니다.
-    // https://stackoverflow.com/questions/2637058/position-fixed-doesnt-work-when-using-webkit-transform
-    // 그래서 중첩구조를 파괴하기 위해 Portal을 사용하여 중첩 드롭다운 메뉴를 최상단에 렌더링합니다.
-    return (_jsx(Portal, { children: _jsx(DropdownContext.Provider, Object.assign({ value: {
-                open,
-                // 중첩 드롭다운 메뉴의 onCloseOnItemClick은 상위 드롭다운 메뉴에서 전달된 값 사용
-                onCloseOnItemClick,
-                nestedIndex,
-                itemState,
-                setItemState,
-            } }, { children: _jsx(Grow, Object.assign({ in: open }, { children: _jsx(Menu, Object.assign({ className: className, ref: ref, css: [menuCss, menuStyle] }, { children: children })) })) })) }));
+    return (_jsx(DropdownContext.Provider, Object.assign({ value: {
+            open,
+            // 중첩 드롭다운 메뉴의 onCloseOnItemClick은 상위 드롭다운 메뉴에서 전달된 값 사용
+            onCloseOnItemClick,
+            nestedIndex,
+            itemState,
+            setItemState,
+        } }, { children: _jsx(Menu, Object.assign({ className: className, open: open, onClose: onCloseOnItemClick, anchorEl: anchorEl, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, ref: ref, 
+            // 중첩된 드롭다운의 경우 상위 메뉴에 대한 마우스 호버, 클릭 이벤트가 동작하지 않는 문제 해결
+            // 실제 드롭다운 메뉴 영역에서만 포인터 이벤트를 감지하도록 처리
+            css: [
+                menuStyle,
+                css `
+            pointer-events: none;
+            .MuiPaper-root {
+              pointer-events: auto;
+            }
+          `,
+            ] }, { children: children })) })));
 });
-const Grow = styled(MuiGrow)(css `
-  transform-origin: top left;
-`);
-const Menu = styled.div(({ theme }) => css `
-    position: fixed;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    padding: 4px;
-    background-color: ${theme.color.background.neutralBase};
-    box-shadow: ${shadows.shadow04};
-    border-radius: 8px;
-    width: ${DROPDOWN_MENU_WIDTH}px;
-    max-height: ${DROPDOWN_MENU_MAX_HEIGHT}px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    // 최상위 메뉴의 mui modal 백드롭의 z-index는 1300입니다.
-    z-index: 1300;
-  `);
 export { DropdownMenu };
+const Menu = styled(Popover)(({ theme }) => css `
+    .MuiPaper-root {
+      position: fixed;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      padding: 4px;
+      background-color: ${theme.color.background.neutralBase};
+      box-shadow: ${shadows.shadow04};
+      border-radius: 8px;
+      width: ${DROPDOWN_MENU_WIDTH}px;
+      max-height: ${DROPDOWN_MENU_MAX_HEIGHT}px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      // 최상위 메뉴의 mui modal 백드롭의 z-index는 1300입니다.
+      z-index: 1300;
+    }
+  `);

package/dist/patterns/Dropdown/DropdownMenu/style.d.ts

@@ -2,7 +2,8 @@ export interface OriginProps {
     vertical: "top" | "center" | "bottom";
     horizontal: "left" | "center" | "right";
 }
-/** anchor를 기준으로 드롭다운 메뉴 원점 위치 스타일을 리턴합니다. */
-export declare const ORIGIN_PROPS_TO_POSITION: (anchorOrigin: OriginProps, anchorRect: DOMRect | undefined, nested?: boolean) => import("@emotion/utils").SerializedStyles;
-/** 드롭다운 메뉴 원점을 조정하는 스타일을 리턴합니다. */
-export declare const ORIGIN_PROPS_TO_TRANSFORM: (transformOrigin: OriginProps) => import("@emotion/utils").SerializedStyles;
+/**
+ * anchor를 기준으로 드롭다운 메뉴 원점 위치 스타일을 리턴합니다.
+ * position의 경우 Popover 컴포넌트의 내부에서 계산되므로 margin값만 반환합니다.
+ */
+export declare const ORIGIN_PROPS_TO_MARGIN: (anchorOrigin: OriginProps, nested?: boolean) => import("@emotion/utils").SerializedStyles;

package/dist/patterns/Dropdown/DropdownMenu/style.js

@@ -1,104 +1,44 @@
 import { css } from "@emotion/react";
-import { DROPDOWN_MENU_WIDTH } from "./DropdownMenu";
-/** anchor를 기준으로 드롭다운 메뉴 원점 위치 스타일을 리턴합니다. */
-export const ORIGIN_PROPS_TO_POSITION = (anchorOrigin, anchorRect, nested) => {
+/**
+ * anchor를 기준으로 드롭다운 메뉴 원점 위치 스타일을 리턴합니다.
+ * position의 경우 Popover 컴포넌트의 내부에서 계산되므로 margin값만 반환합니다.
+ */
+export const ORIGIN_PROPS_TO_MARGIN = (anchorOrigin, nested) => {
     const { vertical, horizontal } = anchorOrigin;
-    if (!anchorRect)
-        return css `
-      display: none;
-    `;
-    const { top, bottom, left, right, width, height } = anchorRect;
     return {
         top: {
             left: css `
-        top: ${top}px;
-        left: ${left}px;
         margin-right: 12px;
       `,
             center: css `
-        top: ${top}px;
-        left: ${left + width / 2}px;
         margin-bottom: 8px;
       `,
             right: css `
-        top: ${top}px;
-        left: ${left + (nested ? DROPDOWN_MENU_WIDTH : width)}px;
-        margin-left: 4px;
+        margin-left: ${nested ? 8 : 4}px;
       `,
         },
         center: {
             left: css `
-        top: ${top + height / 2}px;
-        left: ${left}px;
         margin-right: 12px;
       `,
             center: css `
-        top: ${top + height / 2}px;
-        left: ${left + width / 2}px;
         margin-bottom: 8px;
       `,
             right: css `
-        top: ${top + height / 2}px;
-        left: ${right}px;
         margin-left: 4px;
       `,
         },
         bottom: {
             left: css `
-        top: ${bottom}px;
-        left: ${left}px;
         margin-top: 8px;
       `,
             center: css `
-        top: ${bottom}px;
-        left: ${left + width / 2}px;
         margin-top: 8px;
       `,
             right: css `
-        top: ${bottom}px;
-        left: ${right}px;
         margin-top: 8px;
         margin-left: 4px;
       `,
         },
     }[vertical][horizontal];
 };
-/** 드롭다운 메뉴 원점을 조정하는 스타일을 리턴합니다. */
-export const ORIGIN_PROPS_TO_TRANSFORM = (transformOrigin) => {
-    const { vertical, horizontal } = transformOrigin;
-    return {
-        top: {
-            left: css `
-        transform: none;
-      `,
-            center: css `
-        transform: translateX(-50%) !important;
-      `,
-            right: css `
-        transform: translateX(-100%) !important;
-      `,
-        },
-        center: {
-            left: css `
-        transform: translateY(-50%) !important;
-      `,
-            center: css `
-        transform: translateX(-50%) translateY(-50%) !important;
-      `,
-            right: css `
-        transform: translateX(-100%) translateY(-50%) !important;
-      `,
-        },
-        bottom: {
-            left: css `
-        transform: translateY(-100%) !important;
-      `,
-            center: css `
-        transform: translateX(-50%) translateY(-100%) !important;
-      `,
-            right: css `
-        transform: translateX(-100%) translateY(-100%) !important;
-      `,
-        },
-    }[vertical][horizontal];
-};

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -9,6 +9,8 @@ import _ from "lodash";
 function validateValue(value) {
     var _a, _b;
     // value.root.children must be non-empty array
+    // Lexical 원본 코드를 가져왔기 때문에 코드 변경을 최소화하기위함
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (!((_b = (_a = value === null || value === void 0 ? void 0 : value.root) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length)) {
         return false;
     }

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

@@ -49,6 +49,8 @@ export function ImageResizer({ onResizeStart, onResizeEnd, buttonRef, imageRef,
         if (editorRootElement !== null) {
             editorRootElement.style.setProperty("cursor", `${cursorDir}-resize`, "important");
         }
+        // Lexical 원본 코드를 가져왔기 때문에 코드 변경을 최소화하기위함
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         if (document.body !== null) {
             document.body.style.setProperty("cursor", `${cursorDir}-resize`, "important");
             userSelect.current.value = document.body.style.getPropertyValue("-webkit-user-select");
@@ -60,6 +62,8 @@ export function ImageResizer({ onResizeStart, onResizeEnd, buttonRef, imageRef,
         if (editorRootElement !== null) {
             editorRootElement.style.setProperty("cursor", "text");
         }
+        // Lexical 원본 코드를 가져왔기 때문에 코드 변경을 최소화하기위함
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         if (document.body !== null) {
             document.body.style.setProperty("cursor", "default");
             document.body.style.setProperty("-webkit-user-select", userSelect.current.value, userSelect.current.priority);

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

@@ -3,7 +3,5 @@ import { Controller } from "react-hook-form";
 import { Input } from "../../../../../components/Input";
 export function FormPlaceholder(props) {
     const { control } = props;
-    return (_jsx(Controller, { name: "placeholder", control: control, render: ({ field: { value, onChange } }) => {
-            return (_jsx(Input, { size: "small", color: "default", value: value, onChange: onChange, placeholder: "\uC608) \uC5EC\uAE30\uC5D0 \uC785\uB825\uD558\uC138\uC694." }));
-        } }));
+    return (_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." })) }));
 }

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

@@ -3,12 +3,8 @@ import { Controller } from "react-hook-form";
 import { SegmentedControlButton, SegmentedControlGroup, } from "../../../../SegmentedControl";
 export function FormSegmentedControl(props) {
     const { control, trigger, name, items } = props;
-    return (_jsx(Controller, { name: name, control: control, render: ({ field: { value, onChange } }) => {
-            return (_jsx(SegmentedControlGroup, Object.assign({ size: "xsmall", value: value, onChange: (value) => {
-                    onChange(value);
-                    trigger("solutions");
-                }, fullWidth: true }, { children: items.map((item) => {
-                    return (_jsx(SegmentedControlButton, { value: item.value, label: item.label }, item.value.toString()));
-                }) })));
-        } }));
+    return (_jsx(Controller, { name: name, control: control, render: ({ field: { value, onChange } }) => (_jsx(SegmentedControlGroup, Object.assign({ size: "xsmall", value: value, onChange: (value) => {
+                onChange(value);
+                trigger("solutions");
+            }, fullWidth: true }, { children: items.map((item) => (_jsx(SegmentedControlButton, { value: item.value, label: item.label }, item.value.toString()))) }))) }));
 }

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

@@ -34,9 +34,7 @@ export function SettingForm(props) {
           ` }), 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 `
                   width: 12px;
                   height: 12px;
-                ` }) }))] }), _jsx(Controller, { name: "placeholder", control: control, render: ({ field: { value, onChange } }) => {
-                                return (_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" })] })] })));
+                ` }) }))] }), _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/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SettingForm/FormAllowMultipleAnswers.js

@@ -4,7 +4,5 @@ import { SegmentedControlButton, SegmentedControlGroup, } from "../../../../../S
 /** SheetSelectNode SettingForm의 다중 선택 허용 여부 폼입니다. */
 export function FormAllowMultipleAnswers(props) {
     const { control } = props;
-    return (_jsx(Controller, { name: "allowMultipleAnswers", control: control, render: ({ field: { value, onChange } }) => {
-            return (_jsxs(SegmentedControlGroup, Object.assign({ size: "xsmall", value: value, onChange: onChange, fullWidth: true }, { children: [_jsx(SegmentedControlButton, { value: false, label: "\uD558\uB098\uB9CC \uC120\uD0DD" }), _jsx(SegmentedControlButton, { value: true, label: "\uC5EC\uB7EC \uAC1C \uC120\uD0DD" })] })));
-        } }));
+    return (_jsx(Controller, { name: "allowMultipleAnswers", control: control, render: ({ field: { value, onChange } }) => (_jsxs(SegmentedControlGroup, Object.assign({ size: "xsmall", value: value, onChange: onChange, fullWidth: true }, { children: [_jsx(SegmentedControlButton, { value: false, label: "\uD558\uB098\uB9CC \uC120\uD0DD" }), _jsx(SegmentedControlButton, { value: true, label: "\uC5EC\uB7EC \uAC1C \uC120\uD0DD" })] }))) }));
 }

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

@@ -37,8 +37,6 @@ export const nodes = [
     SelfEvaluationNode,
     {
         replace: QuoteNode,
-        with: () => {
-            return new ColoredQuoteNode("grey");
-        },
+        with: () => new ColoredQuoteNode("grey"),
     },
 ];

package/dist/patterns/LexicalEditor/plugins/ActionsPlugin/index.js

@@ -13,11 +13,9 @@ import { Button, LockFillIcon, LockUnlockFillIcon } from "../../../..";
 export function ActionsPlugin() {
     const [editor] = useLexicalComposerContext();
     const [isEditable, setIsEditable] = useState(() => editor.isEditable());
-    useEffect(() => {
-        return mergeRegister(editor.registerEditableListener((editable) => {
-            setIsEditable(editable);
-        }));
-    }, [editor]);
+    useEffect(() => mergeRegister(editor.registerEditableListener((editable) => {
+        setIsEditable(editable);
+    })), [editor]);
     return (_jsx(Button, { color: "primary", size: "small", startIcon: isEditable ? _jsx(LockFillIcon, {}) : _jsx(LockUnlockFillIcon, {}), onClick: () => {
             editor.setEditable(!editor.isEditable());
         }, title: "Read-Only Mode", label: `${!isEditable ? "수정 모드" : "읽기 모드"}로 변경`, "aria-label": `${!isEditable ? "Unlock" : "Lock"} read-only mode` }));

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

@@ -134,9 +134,7 @@ export function ComponentAdderPlugin(props) {
     const [resolves, setResolves] = useState([]);
     const onClose = () => __awaiter(this, void 0, void 0, function* () {
         resolves.forEach((resolve) => resolve());
-        setResolves((newResolves) => {
-            return newResolves.filter((newResolve) => resolves.indexOf(newResolve) === -1);
-        });
+        setResolves((newResolves) => newResolves.filter((newResolve) => resolves.indexOf(newResolve) === -1));
     });
     const getContextMenuOptions = useContextMenuOptions({
         isSheetEnabled,

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/useDraggableBlockMenu.js

@@ -204,14 +204,12 @@ export function useDraggableBlockMenu(editor, anchorElem, blockElem, setBlockEle
             setBlockElem(null);
             return true;
         }
-        return mergeRegister(editor.registerCommand(DRAGOVER_COMMAND, (event) => {
-            return onDragover(event);
-        }, COMMAND_PRIORITY_LOW), editor.registerCommand(DROP_COMMAND, (event) => {
-            return onDrop(event);
-        }, COMMAND_PRIORITY_HIGH));
+        return mergeRegister(editor.registerCommand(DRAGOVER_COMMAND, (event) => onDragover(event), COMMAND_PRIORITY_LOW), editor.registerCommand(DROP_COMMAND, (event) => onDrop(event), COMMAND_PRIORITY_HIGH));
     }, [anchorElem, editor, setBlockElem]);
     function onDragStart(event) {
         const dataTransfer = event.dataTransfer;
+        // Lexical 원본 코드를 가져왔기 때문에 코드 변경을 최소화하기위함
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         if (!dataTransfer || !blockElem) {
             return;
         }

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

@@ -54,6 +54,8 @@ export class ComponentPickerOption extends MenuOption {
 }
 function getDynamicOptions(editor, queryString) {
     const options = [];
+    // Lexical 원본 코드를 가져왔기 때문에 코드 변경을 최소화하기위함
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (queryString == null) {
         return options;
     }

package/dist/patterns/LexicalEditor/plugins/FloatingLinkEditorPlugin/FloatingLinkEditor.js

@@ -82,22 +82,20 @@ export function FloatingLinkEditor(props) {
             }
         };
     }, [anchorElem.parentElement, editor, $updateLinkEditor]);
-    useEffect(() => {
-        return mergeRegister(editor.registerUpdateListener(({ editorState }) => {
-            editorState.read(() => {
-                $updateLinkEditor();
-            });
-        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+    useEffect(() => mergeRegister(editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
             $updateLinkEditor();
+        });
+    }), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+        $updateLinkEditor();
+        return true;
+    }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ESCAPE_COMMAND, () => {
+        if (isLink) {
+            setIsLink(false);
             return true;
-        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ESCAPE_COMMAND, () => {
-            if (isLink) {
-                setIsLink(false);
-                return true;
-            }
-            return false;
-        }, COMMAND_PRIORITY_HIGH));
-    }, [editor, $updateLinkEditor, setIsLink, isLink]);
+        }
+        return false;
+    }, COMMAND_PRIORITY_HIGH)), [editor, $updateLinkEditor, setIsLink, isLink]);
     useEffect(() => {
         editor.getEditorState().read(() => {
             $updateLinkEditor();

package/dist/patterns/LexicalEditor/plugins/FloatingTextFormatToolbarPlugin/index.js

@@ -28,7 +28,7 @@ function TextFormatFloatingToolbar({ editor, anchorElem, isLink, isBold, isItali
         }
     }, [editor, isLink]);
     function mouseMoveListener(e) {
-        if ((popupCharStylesEditorRef === null || popupCharStylesEditorRef === void 0 ? void 0 : popupCharStylesEditorRef.current) &&
+        if (popupCharStylesEditorRef.current &&
             (e.buttons === 1 || e.buttons === 3)) {
             if (popupCharStylesEditorRef.current.style.pointerEvents !== "none") {
                 const x = e.clientX;
@@ -42,14 +42,14 @@ function TextFormatFloatingToolbar({ editor, anchorElem, isLink, isBold, isItali
         }
     }
     function mouseUpListener() {
-        if (popupCharStylesEditorRef === null || popupCharStylesEditorRef === void 0 ? void 0 : popupCharStylesEditorRef.current) {
+        if (popupCharStylesEditorRef.current) {
             if (popupCharStylesEditorRef.current.style.pointerEvents !== "auto") {
                 popupCharStylesEditorRef.current.style.pointerEvents = "auto";
             }
         }
     }
     useEffect(() => {
-        if (popupCharStylesEditorRef === null || popupCharStylesEditorRef === void 0 ? void 0 : popupCharStylesEditorRef.current) {
+        if (popupCharStylesEditorRef.current) {
             document.addEventListener("mousemove", mouseMoveListener);
             document.addEventListener("mouseup", mouseUpListener);
             return () => {
@@ -170,15 +170,13 @@ function useFloatingTextFormatToolbar(editor, anchorElem) {
             document.removeEventListener("selectionchange", updatePopup);
         };
     }, [updatePopup]);
-    useEffect(() => {
-        return mergeRegister(editor.registerUpdateListener(() => {
-            updatePopup();
-        }), editor.registerRootListener(() => {
-            if (editor.getRootElement() === null) {
-                setIsText(false);
-            }
-        }));
-    }, [editor, updatePopup]);
+    useEffect(() => mergeRegister(editor.registerUpdateListener(() => {
+        updatePopup();
+    }), editor.registerRootListener(() => {
+        if (editor.getRootElement() === null) {
+            setIsText(false);
+        }
+    })), [editor, updatePopup]);
     if (!isText) {
         return null;
     }

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/index.js

@@ -30,13 +30,7 @@ export function ImagesPlugin({ captionsEnabled, }) {
             // after: images/2025-01-06-15-14-39.png
             $insertNodeToNearestRoot(imageNode);
             return true;
-        }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(DRAGSTART_COMMAND, (event) => {
-            return onDragStart(event);
-        }, COMMAND_PRIORITY_HIGH), editor.registerCommand(DRAGOVER_COMMAND, (event) => {
-            return onDragover(event);
-        }, COMMAND_PRIORITY_LOW), editor.registerCommand(DROP_COMMAND, (event) => {
-            return onDrop(event, editor);
-        }, COMMAND_PRIORITY_HIGH));
+        }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(DRAGSTART_COMMAND, (event) => onDragStart(event), COMMAND_PRIORITY_HIGH), editor.registerCommand(DRAGOVER_COMMAND, (event) => onDragover(event), COMMAND_PRIORITY_LOW), editor.registerCommand(DROP_COMMAND, (event) => onDrop(event, editor), COMMAND_PRIORITY_HIGH));
     }, [captionsEnabled, editor]);
     return null;
 }
@@ -139,6 +133,9 @@ function getDragSelection(event) {
             ? target.defaultView
             : target.ownerDocument.defaultView;
     const domSelection = getDOMSelection(targetWindow);
+    // caretRangeFromPoint는 WebKit 기반 브라우저에서만 지원되는 비표준(non-standard) Method입니다.
+    // Lexical 원본 코드를 가져왔기 때문에 코드 변경을 최소화하기위함
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (document.caretRangeFromPoint) {
         range = document.caretRangeFromPoint(event.clientX, event.clientY);
     }

package/dist/patterns/LexicalEditor/plugins/LayoutPlugin/index.js

@@ -31,7 +31,7 @@ export function LayoutPlugin() {
                     const child = parent &&
                         (before
                             ? parent.getFirstChild()
-                            : parent === null || parent === void 0 ? void 0 : parent.getLastChild());
+                            : parent.getLastChild());
                     const descendant = before
                         ? (_a = container.getFirstDescendant()) === null || _a === void 0 ? void 0 : _a.getKey()
                         : (_b = container.getLastDescendant()) === null || _b === void 0 ? void 0 : _b.getKey();

package/dist/patterns/LexicalEditor/plugins/ListMaxIndentLevelPlugin/index.js

@@ -42,8 +42,6 @@ function isIndentPermitted(maxDepth) {
 }
 export function ListMaxIndentLevelPlugin({ maxDepth }) {
     const [editor] = useLexicalComposerContext();
-    useEffect(() => {
-        return editor.registerCommand(INDENT_CONTENT_COMMAND, () => !isIndentPermitted(maxDepth !== null && maxDepth !== void 0 ? maxDepth : 7), COMMAND_PRIORITY_CRITICAL);
-    }, [editor, maxDepth]);
+    useEffect(() => editor.registerCommand(INDENT_CONTENT_COMMAND, () => !isIndentPermitted(maxDepth !== null && maxDepth !== void 0 ? maxDepth : 7), COMMAND_PRIORITY_CRITICAL), [editor, maxDepth]);
     return null;
 }

package/dist/patterns/LexicalEditor/plugins/MarkdownTransformers/index.js

@@ -13,9 +13,7 @@ import { $createImageNode, $isImageNode, ImageNode } from "../../nodes";
 import { $isSheetInputNode, SheetInputNode } from "../../nodes/SheetInputNode";
 export const HR = {
     dependencies: [HorizontalRuleNode],
-    export: (node) => {
-        return $isHorizontalRuleNode(node) ? "***" : null;
-    },
+    export: (node) => ($isHorizontalRuleNode(node) ? "***" : null),
     regExp: /^(---|\*\*\*|___)\s?$/,
     replace: (parentNode, _1, _2, isImport) => {
         const line = $createHorizontalRuleNode();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.82.4",
+  "version": "1.83.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
@@ -85,6 +85,6 @@
     "prop-types": "^15.8.1",
     "rimraf": "^5.0.1",
     "storybook": "^7.4.6",
-    "typescript-eslint": "^7.16.1"
+    "typescript-eslint": "^8.4.0"
   }
 }