@team-monolith/cds 1.99.11 → 1.99.13

package/dist/components/OverflowTooltip.d.ts

@@ -5,6 +5,8 @@ import { TooltipProps } from "./Tooltip";
 interface OverflowTooltipProps extends Omit<TooltipProps, "open" | "onOpen" | "onClose" | "children"> {
     className?: string;
     childrenCss?: SerializedStyles;
+    /** 접근성을 위한 aria 속성을 전달하기 위한 prop */
+    divProps?: React.HTMLAttributes<HTMLDivElement>;
 }
 /**
  * 인자로 주어진 텍스트를 그립니다.

package/dist/components/OverflowTooltip.js

@@ -23,7 +23,7 @@ export function OverflowTooltip(props) {
     const handleClose = () => {
         setIsTooltipOpen(false);
     };
-    return (_jsx(Tooltip, Object.assign({ open: isTooltipOpen, onOpen: handleOpen, onClose: handleClose }, props, { children: _jsx(OverflowDiv, Object.assign({ css: props.childrenCss, ref: tooltipRef, onMouseOver: handleOpen }, { children: props.text })) })));
+    return (_jsx(Tooltip, Object.assign({ open: isTooltipOpen, onOpen: handleOpen, onClose: handleClose }, props, { children: _jsx(OverflowDiv, Object.assign({ css: props.childrenCss, ref: tooltipRef, onMouseOver: handleOpen }, props.divProps, { children: props.text })) })));
 }
 const OverflowDiv = styled.div `
   overflow: hidden;

package/dist/patterns/Accordion.d.ts

@@ -7,6 +7,7 @@ export interface AccordionProps {
     children: React.ReactNode;
     open?: boolean;
     onClick?: () => void;
+    buttonLabel?: string;
 }
 /** 배너같이 생겼으나 누를 때마다 하단내용이 접힘(보이지않음)/펼침(보임) 상태가 바뀌는 컴포넌트입니다. */
 export declare function Accordion(props: AccordionProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/Accordion.js

@@ -3,14 +3,15 @@ import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { ArrowDownSLineIcon, ArrowUpSLineIcon } from "../icons";
+import { RESET_BUTTON } from "../utils/reset";
 /** 배너같이 생겼으나 누를 때마다 하단내용이 접힘(보이지않음)/펼침(보임) 상태가 바뀌는 컴포넌트입니다. */
 export function Accordion(props) {
-    const { className, icon, title, children, open = false, onClick, wrapperClassName, } = props;
+    const { className, icon, title, children, open = false, onClick, wrapperClassName, buttonLabel, } = props;
     return (_jsxs("div", Object.assign({ css: css `
         display: flex;
         flex-direction: column;
         gap: 2px;
-      `, className: wrapperClassName }, { children: [_jsxs(Container, Object.assign({ className: className, onClick: onClick }, { children: [_jsxs(Title, { children: [icon, title] }), open ? _jsx(ArrowUpSLineIcon, {}) : _jsx(ArrowDownSLineIcon, {})] })), open && children] })));
+      `, className: wrapperClassName }, { children: [_jsxs(Container, Object.assign({ className: className, onClick: onClick, "aria-expanded": open, "aria-label": buttonLabel }, { children: [_jsxs(Title, { children: [icon, title] }), open ? _jsx(ArrowUpSLineIcon, {}) : _jsx(ArrowDownSLineIcon, {})] })), open && children] })));
 }
 const Title = styled.div(({ theme }) => css `
     display: flex;
@@ -21,7 +22,8 @@ const Title = styled.div(({ theme }) => css `
     font-weight: 700;
     line-height: 16px; /* 133.333% */
   `);
-const Container = styled.div `
+const Container = styled.button `
+  ${RESET_BUTTON}
   display: flex;
   padding: 8px 16px;
   align-items: center;

package/dist/patterns/Dropdown/Dropdown.js

@@ -11,10 +11,9 @@ 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, useMemo, useRef, useState } from "react";
+import { forwardRef, useId, 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)
  */
@@ -32,7 +31,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 dropdownMenuId = useMemo(() => `dropdown-menu-${uid()}`, []);
+    const dropdownMenuId = `dropdown-menu-${useId()}`;
     const handleClick = (e) => {
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
         if (!isControlled)

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

@@ -15,11 +15,10 @@ import { css } from "@emotion/react";
 import * as React from "react";
 import styled from "@emotion/styled";
 import { CheckboxInput, ArrowRightSLineIcon, HOVER, } from "../../..";
-import { useContext, useMemo, useRef } from "react";
+import { useContext, useId, 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,
@@ -31,7 +30,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 dropdownMenuId = useMemo(() => `dropdown-menu-${uid()}`, []);
+    const dropdownMenuId = `dropdown-menu-${useId()}`;
     const absItemIndex = nestedIndex ? `${nestedIndex}-${index}` : `${index}`;
     // 서브메뉴가 존재하는지 여부
     const isSubMenuExist = Boolean(children);

package/package.json

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