@team-monolith/cds 1.99.3 → 1.99.5

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

@@ -29,7 +29,7 @@ export interface DropdownProps {
     /** 버튼 클릭 시 호출될 콜백 함수 */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     /** 드롭다운 메뉴의 props */
-    menuProps?: Omit<DropdownMenuProps, "anchorEl" | "children" | "itemState" | "setItemState">;
+    menuProps?: Omit<DropdownMenuProps, "anchorEl" | "children" | "itemState" | "setItemState" | "dropdownMenuId">;
     /** 드롭다운 메뉴의 children */
     children: React.ReactNode;
     /** 드롭다운 메뉴 아이템 클릭 시 메뉴가 닫히는지 여부 */

package/dist/patterns/Dropdown/Dropdown.js

@@ -11,9 +11,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-import { forwardRef, useRef, useState } from "react";
+import { forwardRef, useMemo, useRef, useState } from "react";
 import { Button, ArrowDownSFillIcon, } from "../..";
 import { DropdownMenu } from "./DropdownMenu";
+import { uid } from "uid";
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=203-95329&t=FwczLZ1IVvskUVbT-0)
  */
@@ -31,6 +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 handleClick = (e) => {
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
         if (!isControlled)
@@ -53,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) ? "true" : "false" })), _jsx(DropdownMenu, Object.assign({}, 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": 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 }))] })));
 });
 export { Dropdown };

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

@@ -39,7 +39,7 @@ export interface DropdownItemProps {
     /** 드롭다운 아이템 클릭 시 호출될 콜백 함수 */
     onClick?: (e: React.MouseEvent<HTMLElement>) => void;
     /** 아이템이 가지는 드롭다운 메뉴 props.*/
-    subMenuProps?: Omit<DropdownMenuProps, "anchorEl" | "itemState" | "setItemState" | "children">;
+    subMenuProps?: Omit<DropdownMenuProps, "anchorEl" | "itemState" | "setItemState" | "children" | "dropdownMenuId">;
     /** 아이템이 가지는 드롭다운 메뉴의 서브 아이템들. 주어지지 않으면 서브메뉴가 없습니다. */
     children?: React.ReactNode;
 }

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

@@ -15,10 +15,11 @@ import { css } from "@emotion/react";
 import * as React from "react";
 import styled from "@emotion/styled";
 import { CheckboxInput, ArrowRightSLineIcon, HOVER, } from "../../..";
-import { useContext, useRef } from "react";
+import { useContext, useMemo, useRef } from "react";
 import { DropdownMenu } from "../DropdownMenu";
 import { DropdownContext } from "../DropdownContext";
 import { getSelected, setSelected } from "./selected";
+import { uid } from "uid";
 const TYPE_TO_COLOR = (theme, type) => ({
     default: theme.color.foreground.neutralBase,
     danger: theme.color.foreground.danger,
@@ -30,6 +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 absItemIndex = nestedIndex ? `${nestedIndex}-${index}` : `${index}`;
     // 서브메뉴가 존재하는지 여부
     const isSubMenuExist = Boolean(children);
@@ -49,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 }, { 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 ? 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) => {
                                         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,
@@ -57,7 +59,7 @@ const DropdownItem = React.forwardRef(function DropdownItem(props, ref) {
                     nestedIndex: absItemIndex,
                     itemState,
                     setItemState,
-                } }, { children: _jsx(DropdownMenu, Object.assign({}, subMenuProps, { open: isSubMenuShowed, anchorEl: itemRef.current, isNestedMenu: true, anchorOrigin: {
+                } }, { children: _jsx(DropdownMenu, Object.assign({ dropdownMenuId: uniqueId }, subMenuProps, { open: isSubMenuShowed, anchorEl: itemRef.current, isNestedMenu: true, anchorOrigin: {
                         vertical: "top",
                         horizontal: "right",
                     }, itemState: itemState, setItemState: setItemState }, { children: children })) })))] }));

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

@@ -30,6 +30,12 @@ export interface DropdownMenuProps {
     /** 중첩 드롭다운 메뉴가 아닐 경우 주어주지 않아도 됩니다. */
     itemState?: ItemState;
     setItemState?: React.Dispatch<React.SetStateAction<ItemState>>;
+    /**
+     * 드롭다운 메뉴의 고유 id입니다.
+     * 이 id는 메뉴를 제어하는 버튼 등에서 aria-controls 속성을 통해 연결되어,
+     * 스크린 리더 등의 보조 기술이 메뉴를 올바르게 인식하도록 돕습니다.
+     */
+    dropdownMenuId: string;
 }
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=106-1921&t=FwczLZ1IVvskUVbT-0)

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

@@ -20,7 +20,7 @@ const DropdownMenu = React.forwardRef(function DropdownMenu(props, ref) {
     }, transformOrigin = {
         vertical: "top",
         horizontal: "left",
-    }, closeOnItemClick, children, menuCss, itemState = EMPTY_MAP, setItemState = () => { }, } = props;
+    }, closeOnItemClick, children, menuCss, itemState = EMPTY_MAP, setItemState = () => { }, dropdownMenuId, } = props;
     const { nestedIndex, onCloseOnItemClick } = useContext(DropdownContext);
     // 드롭다운 메뉴 위치 조정
     const menuStyle = css `
@@ -40,7 +40,7 @@ const DropdownMenu = React.forwardRef(function DropdownMenu(props, ref) {
                 nestedIndex,
                 itemState,
                 setItemState,
-            } }, { children: _jsx(Menu, 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({ id: dropdownMenuId, className: className, open: open, onClose: onClose, anchorEl: anchorEl, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, ref: ref, css: menuStyle }, { children: children })) })));
     }
     // 중첩 드롭다운 메뉴
     return (_jsx(DropdownContext.Provider, Object.assign({ value: {
@@ -50,7 +50,7 @@ const DropdownMenu = React.forwardRef(function DropdownMenu(props, ref) {
             nestedIndex,
             itemState,
             setItemState,
-        } }, { children: _jsx(Menu, Object.assign({ className: className, open: open, onClose: onCloseOnItemClick, anchorEl: anchorEl, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, ref: ref, 
+        } }, { children: _jsx(Menu, Object.assign({ id: dropdownMenuId, className: className, open: open, onClose: onCloseOnItemClick, anchorEl: anchorEl, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, ref: ref, 
             // 중첩된 드롭다운의 경우 상위 메뉴에 대한 마우스 호버, 클릭 이벤트가 동작하지 않는 문제 해결
             // 실제 드롭다운 메뉴 영역에서만 포인터 이벤트를 감지하도록 처리
             css: [

package/dist/patterns/SegmentedControl/SegmentedControlButton.js

@@ -30,7 +30,10 @@ export const SegmentedControlButton = React.forwardRef(function SegmentedControl
     const isActive = context.multiSelect
         ? context.value.includes(props.value)
         : context.value === props.value;
-    return (_jsx(StyledButton, Object.assign({}, other, { ref: ref, startIcon: typeof startIcon === "function" ? startIcon(isActive) : startIcon, endIcon: typeof endIcon === "function" ? endIcon(isActive) : endIcon, isActive: isActive, color: isActive ? "white" : "textNeutral", size: context.size, onClick: handleClick, disabled: context.disabled || props.disabled, title: isActive && `${other.label} 선택됨` })));
+    const { label } = other;
+    return (_jsx(StyledButton, Object.assign({}, other, { ref: ref, startIcon: typeof startIcon === "function" ? startIcon(isActive) : startIcon, endIcon: typeof endIcon === "function" ? endIcon(isActive) : endIcon, isActive: isActive, color: isActive ? "white" : "textNeutral", size: context.size, onClick: handleClick, disabled: context.disabled || props.disabled, title: isActive
+            ? `${typeof label === "string" ? label : ""} 선택됨`
+            : undefined })));
 });
 const StyledButton = styled(Button, {
     shouldForwardProp: (prop) => prop !== "isActive",

package/package.json

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