@team-monolith/cds 1.99.10 → 1.99.12

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/components/SquareButton.js

@@ -191,7 +191,7 @@ export const SquareButton = React.forwardRef(function SquareButton(props, ref) {
                     SIZE_TO_BUTTON_STYLE[size],
                     css `
               border: none;
-              width: ${fullWidth ? "100%" : "fit-content"};
+              ${fullWidth && `width: 100%;`}
               ${disabled || loading
                         ? css `
                     cursor: default;

package/dist/components/Switch.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { InputHTMLAttributes } from "react";
 export type SwitchSize = "small" | "large";
 export interface SwitchProps {
     className?: string;
@@ -11,6 +11,8 @@ export interface SwitchProps {
     size: SwitchSize;
     /** 스위치 상태 변경 시 호출될 콜백 함수 */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    /** HTML input 태그에 전달될 props */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
 }
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=36-1577&t=9sDLb4XIOdmF2VMc-0)

package/dist/components/Switch.js

@@ -19,8 +19,8 @@ import { css } from "@emotion/react";
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=36-1577&t=9sDLb4XIOdmF2VMc-0)
  */
 export const Switch = React.forwardRef(function Switch(props, ref) {
-    const { className, checked, disabled = false, size, onChange } = props, other = __rest(props, ["className", "checked", "disabled", "size", "onChange"]);
-    return (_jsx(StyledSwitch, Object.assign({}, other, { ref: ref, className: className, checked: checked, disabled: disabled, onChange: onChange, switchSize: size })));
+    const { className, checked, disabled = false, size, onChange, inputProps } = props, other = __rest(props, ["className", "checked", "disabled", "size", "onChange", "inputProps"]);
+    return (_jsx(StyledSwitch, Object.assign({}, other, { ref: ref, className: className, checked: checked, disabled: disabled, onChange: onChange, switchSize: size, inputProps: inputProps })));
 });
 const SIZE_TO_SWTICH_SIZE = {
     large: {

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/dist/patterns/SegmentedControl/SegmentedControlButton.js

@@ -30,7 +30,6 @@ export const SegmentedControlButton = React.forwardRef(function SegmentedControl
     const isActive = context.multiSelect
         ? context.value.includes(props.value)
         : context.value === props.value;
-    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, "aria-selected": isActive ? "true" : undefined })));
 });
 const StyledButton = styled(Button, {

package/package.json

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