@team-monolith/cds 1.83.0 → 1.83.2

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

@@ -49,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.js

@@ -1,24 +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 { css } from "@emotion/react";
 import React, { useContext } from "react";
 import { shadows } from "../../..";
-import { Popover, Portal } from "@mui/material";
-import { ORIGIN_PROPS_TO_POSITION } from "./style";
+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)
  */
@@ -29,29 +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 menuStyle = (theme) => css `
+    const menuStyle = 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;
       ${menuCss}
-      ${ORIGIN_PROPS_TO_POSITION(anchorOrigin)}
+      ${ORIGIN_PROPS_TO_MARGIN(anchorOrigin, isNestedMenu)}
     }
   `;
+    if (!anchorEl) {
+        return _jsx(_Fragment, {});
+    }
     // 최상위 드롭다운 메뉴
     if (!isNestedMenu) {
         return (_jsx(DropdownContext.Provider, Object.assign({ value: {
@@ -60,30 +40,45 @@ const DropdownMenu = React.forwardRef(function DropdownMenu(props, ref) {
                 nestedIndex,
                 itemState,
                 setItemState,
-            } }, { children: _jsx(Popover, Object.assign({ className: className, open: open, onClose: onClose, anchorEl: anchorEl, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, ref: ref, css: 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(Popover, Object.assign({ className: className, open: open, onClose: onCloseOnItemClick, anchorEl: anchorEl, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, ref: ref, css: menuStyle, slotProps: {
-                    root: {
-                        sx: {
-                            // root slot의 dom 요소를 생성하지 않도록 하여 다른 상위 메뉴를 선택할 수 있도록 처리
-                            display: "contents",
-                        },
-                    },
-                } }, { 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 })) })));
 });
 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

@@ -6,4 +6,4 @@ export interface OriginProps {
  * anchor를 기준으로 드롭다운 메뉴 원점 위치 스타일을 리턴합니다.
  * position의 경우 Popover 컴포넌트의 내부에서 계산되므로 margin값만 반환합니다.
  */
-export declare const ORIGIN_PROPS_TO_POSITION: (anchorOrigin: OriginProps) => import("@emotion/utils").SerializedStyles;
+export declare const ORIGIN_PROPS_TO_MARGIN: (anchorOrigin: OriginProps, nested?: boolean) => import("@emotion/utils").SerializedStyles;

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

@@ -3,7 +3,7 @@ import { css } from "@emotion/react";
  * anchor를 기준으로 드롭다운 메뉴 원점 위치 스타일을 리턴합니다.
  * position의 경우 Popover 컴포넌트의 내부에서 계산되므로 margin값만 반환합니다.
  */
-export const ORIGIN_PROPS_TO_POSITION = (anchorOrigin) => {
+export const ORIGIN_PROPS_TO_MARGIN = (anchorOrigin, nested) => {
     const { vertical, horizontal } = anchorOrigin;
     return {
         top: {
@@ -14,7 +14,7 @@ export const ORIGIN_PROPS_TO_POSITION = (anchorOrigin) => {
         margin-bottom: 8px;
       `,
             right: css `
-        margin-left: 4px;
+        margin-left: ${nested ? 8 : 4}px;
       `,
         },
         center: {

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

@@ -312,6 +312,7 @@ export function ComponentPickerMenuPlugin(props) {
                 (regex.test(option.title) ||
                     option.keywords.some((keyword) => regex.test(keyword)))),
         ];
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [editor, queryString, setOpen]);
     const onSelectOption = useCallback((selectedOption, nodeToRemove, closeMenu, matchingString) => {
         if (selectedOption instanceof ComponentDrawerOption) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.83.0",
+  "version": "1.83.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
@@ -78,6 +78,7 @@
     "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-react": "^7.34.4",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
     "globals": "^15.8.0",
     "pascalcase": "^2.0.0",