@team-monolith/cds 1.60.0 → 1.60.2

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

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import React from "react";
-import { ButtonColor, ButtonSize } from "../..";
+import { ButtonColor, ButtonSize, ButtonProps } from "../..";
 import { DropdownMenuProps } from "./DropdownMenu";
 import { SerializedStyles } from "@emotion/react";
 export interface DropdownProps {
@@ -20,6 +20,8 @@ export interface DropdownProps {
      * 전달하지 않으면 기본으로 ArrowDropDownFillIcon이 표기됩니다.
      */
     endIcon?: React.ReactNode;
+    /** 버튼에 전달할 Props */
+    buttonProps?: Omit<ButtonProps, "disabled" | "color" | "size" | "startIcon" | "endIcon" | "label" | "onClick">;
     /** button에 적용되는 css 스타일 */
     buttonCss?: SerializedStyles;
     /** 버튼 컴포넌트 내 표기될 문자열 */

package/dist/patterns/Dropdown/Dropdown.js

@@ -12,20 +12,20 @@ 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 { Button, ArrowDropDownFillIcon } from "../..";
+import { Button, ArrowDropDownFillIcon, } from "../..";
 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, other = __rest(props, ["className", "component", "disabled", "color", "size", "bold", "startIcon", "endIcon", "buttonCss", "label", "onClick", "menuProps", "children", "closeOnItemClick"]);
-    const buttonProps = {
-        disabled,
+    const buttonProps = Object.assign(Object.assign({}, props.buttonProps), { disabled,
         color,
         size,
         startIcon,
         endIcon,
-    };
+        label,
+        bold });
     const menuRef = useRef(null);
     const isControlled = menuProps.open !== undefined;
     const [open, setOpen] = useState(false);
@@ -52,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 }, 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 }))] })));
+    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 }))] })));
 });
 export { Dropdown };

package/dist/patterns/ToggleButtonGroup/ToggleButton.js

@@ -1,6 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import styled from "@emotion/styled";
-import { HOVER, Tooltip } from "../..";
+import { HOVER, RESET_BUTTON, Tooltip } from "../..";
 import { css } from "@emotion/react";
 import { toggleButtonGroupClasses, } from "./ToggleButtonGroup";
 /** 하나의 ToggleButton을 그립니다. */
@@ -8,11 +8,12 @@ export function ToggleButton(props) {
     const { datum, placement, isActive, onClick } = props;
     const { label, onIcon, offIcon } = datum;
     if (isActive) {
-        return (_jsxs(Active, Object.assign({ className: toggleButtonGroupClasses.toggleButton.active, onClick: onClick }, { children: [onIcon, label] })));
+        return (_jsxs(Active, Object.assign({ "aria-label": `${label} 선택 해제하기`, className: toggleButtonGroupClasses.toggleButton.active, onClick: onClick }, { children: [onIcon, label] })));
     }
-    return (_jsx(Tooltip, Object.assign({ placement: placement, text: label }, { children: _jsx(Inactive, Object.assign({ className: toggleButtonGroupClasses.toggleButton.inactive, onClick: onClick }, { children: offIcon })) })));
+    return (_jsx(Tooltip, Object.assign({ placement: placement, text: label }, { children: _jsx(Inactive, Object.assign({ "aria-label": `${label} 선택하기`, className: toggleButtonGroupClasses.toggleButton.inactive, onClick: onClick }, { children: offIcon })) })));
 }
-const Active = styled.div(({ theme }) => css `
+const Active = styled.button(({ theme }) => css `
+    ${RESET_BUTTON};
     cursor: pointer;
     display: flex;
     padding: 8px 12px;
@@ -35,7 +36,8 @@ const Active = styled.div(({ theme }) => css `
       height: 24px;
     }
   `);
-const Inactive = styled.div `
+const Inactive = styled.button `
+  ${RESET_BUTTON};
   cursor: pointer;
   display: flex;
   padding: 8px 12px;

package/package.json

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