@team-monolith/cds 1.99.13 → 1.99.15

package/dist/components/OverflowTooltip.js

@@ -1,3 +1,14 @@
+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 styled from "@emotion/styled";
 import { useRef, useState } from "react";
@@ -7,6 +18,7 @@ import { Tooltip } from "./Tooltip";
  * 공간이 부족하면 ...으로 표시하고 툴팁으로 전체 내용을 노출합니다.
  */
 export function OverflowTooltip(props) {
+    const { divProps } = props, tooltipProps = __rest(props, ["divProps"]);
     const tooltipRef = useRef(null);
     const [isTooltipOpen, setIsTooltipOpen] = useState(false);
     const getIsOverflow = () => {
@@ -23,7 +35,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 }, props.divProps, { children: props.text })) })));
+    return (_jsx(Tooltip, Object.assign({ open: isTooltipOpen, onOpen: handleOpen, onClose: handleClose }, tooltipProps, { children: _jsx(OverflowDiv, Object.assign({}, divProps, { css: props.childrenCss, ref: tooltipRef, onMouseOver: handleOpen }, { children: props.text })) })));
 }
 const OverflowDiv = styled.div `
   overflow: hidden;

package/dist/patterns/Accordion.js

@@ -11,7 +11,7 @@ export function Accordion(props) {
         display: flex;
         flex-direction: column;
         gap: 2px;
-      `, 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] })));
+      `, className: wrapperClassName }, { children: [_jsxs(Container, Object.assign({ type: "button", 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;

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

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/reac
 import { css } from "@emotion/react";
 import * as React from "react";
 import styled from "@emotion/styled";
-import { CheckboxInput, ArrowRightSLineIcon, HOVER, } from "../../..";
+import { CheckboxInput, ArrowRightSLineIcon, HOVER, RESET_BUTTON, } from "../../..";
 import { useContext, useId, useRef } from "react";
 import { DropdownMenu } from "../DropdownMenu";
 import { DropdownContext } from "../DropdownContext";
@@ -27,7 +27,7 @@ const TYPE_TO_COLOR = (theme, type) => ({
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=106-1900&t=FwczLZ1IVvskUVbT-0)
  */
 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 { className, index, labelCss, component: Component = "button", 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 = `dropdown-menu-${useId()}`;
@@ -50,7 +50,15 @@ 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, "aria-controls": isSubMenuExist ? dropdownMenuId : 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 ? dropdownMenuId : undefined }, (Component === "button"
+                ? {
+                    type: "button",
+                    disabled: disabled,
+                    css: css `
+                ${RESET_BUTTON}
+              `,
+                }
+                : {}), { 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/LexicalEditor/nodes/ImageNode/ImageComponent.js

@@ -32,7 +32,7 @@ function useSuspenseImage(src) {
 }
 function LazyImage({ altText, className, imageRef, src, width, height, maxWidth: _maxWidth, onError, title, onClick, }) {
     useSuspenseImage(src);
-    return (_jsx("img", { className: className || undefined, src: src, alt: altText, ref: imageRef, style: {
+    return (_jsx("img", Object.assign({ className: className || undefined, src: src, alt: altText, ref: imageRef, style: {
             height,
             // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
             // maxWidth: `min(${maxWidth}px, 100%)`,
@@ -40,7 +40,15 @@ function LazyImage({ altText, className, imageRef, src, width, height, maxWidth:
             // fixme: maxWidth를 수정할 수 있게 되면 원복합니다.
             maxWidth: "100%",
             width,
-        }, "aria-label": title, onClick: onClick, onError: onError, draggable: "false", role: onClick ? "button" : undefined }));
+        }, "aria-label": title, onClick: onClick, onError: onError, draggable: "false" }, (onClick ? {
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+                onClick();
+            }
+        }
+    } : {}))));
 }
 export function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, resizable, }) {
     const imageRef = useRef(null);

package/dist/patterns/SegmentedControl/SegmentedControlButton.js

@@ -30,7 +30,21 @@ 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, "aria-selected": isActive ? "true" : undefined })));
+    // 화살표 키(좌, 우)로 인접 버튼으로 포커스 이동하는 로직
+    const handleKeyDown = (e) => {
+        let sibling = null;
+        if (e.key === "ArrowRight") {
+            sibling = e.currentTarget.nextElementSibling;
+        }
+        else if (e.key === "ArrowLeft") {
+            sibling = e.currentTarget.previousElementSibling;
+        }
+        if (sibling instanceof HTMLButtonElement) {
+            e.preventDefault();
+            sibling.focus();
+        }
+    };
+    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, onKeyDown: handleKeyDown, disabled: context.disabled || props.disabled, "aria-selected": isActive, role: "tab", tabIndex: isActive ? 0 : -1 })));
 });
 const StyledButton = styled(Button, {
     shouldForwardProp: (prop) => prop !== "isActive",

package/dist/patterns/SegmentedControl/SegmentedControlGroup.js

@@ -29,7 +29,7 @@ export const SegmentedControlGroup = React.forwardRef(function SegmentedControlG
           background-color: ${theme.color.background.neutralAlt};
           border-radius: 8px;
           border: 1px solid ${theme.color.background.neutralAltActive};
-        ` }, { children: _jsx(Context.Provider, Object.assign({ value: Object.assign(Object.assign({}, props), { onClick: (newValue) => {
+        `, role: "tablist", "aria-orientation": "horizontal" }, { children: _jsx(Context.Provider, Object.assign({ value: Object.assign(Object.assign({}, props), { onClick: (newValue) => {
                     var _a, _b, _c;
                     if (multiSelect) {
                         if (props.value.includes(newValue)) {

package/dist/patterns/SegmentedControl/SegmentedControlSquareButton.js

@@ -20,7 +20,7 @@ import { SegmentedControlGroupPropsContext, } from "./SegmentedControlGroupProps
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
 export const SegmentedControlSquareButton = React.forwardRef(function SegmentedControlSquareButton(props, ref) {
-    const { onClick, icon } = props, other = __rest(props, ["onClick", "icon"]);
+    const { onClick, icon, buttonProps } = props, other = __rest(props, ["onClick", "icon", "buttonProps"]);
     const context = useContext(SegmentedControlGroupPropsContext);
     const handleClick = (e) => {
         var _a;
@@ -30,7 +30,23 @@ export const SegmentedControlSquareButton = React.forwardRef(function SegmentedC
     const isActive = context.multiSelect
         ? context.value.includes(props.value)
         : context.value === props.value;
-    return (_jsx(StyledSquareButton, Object.assign({}, other, { ref: ref, isActive: isActive, icon: typeof icon === "function" ? icon(isActive) : icon, color: isActive ? "white" : "icon", size: context.size, fullWidth: context.fullWidth, onClick: handleClick, disabled: context.disabled || props.disabled })));
+    // 화살표 키(좌, 우)로 인접 버튼으로 포커스 이동하는 로직
+    const handleKeyDown = (e) => {
+        var _a, _b, _c, _d;
+        let siblingButton = null;
+        if (e.key === "ArrowRight") {
+            // sibling 요소의 첫 번째 자식인 버튼에 포커스 이동 처리
+            siblingButton = (_b = (_a = e.currentTarget.nextElementSibling) === null || _a === void 0 ? void 0 : _a.firstElementChild) !== null && _b !== void 0 ? _b : null;
+        }
+        else if (e.key === "ArrowLeft") {
+            siblingButton = (_d = (_c = e.currentTarget.previousElementSibling) === null || _c === void 0 ? void 0 : _c.firstElementChild) !== null && _d !== void 0 ? _d : null;
+        }
+        if (siblingButton instanceof HTMLButtonElement) {
+            e.preventDefault();
+            siblingButton.focus();
+        }
+    };
+    return (_jsx(StyledSquareButton, Object.assign({}, other, { ref: ref, isActive: isActive, icon: typeof icon === "function" ? icon(isActive) : icon, color: isActive ? "white" : "icon", size: context.size, fullWidth: context.fullWidth, onClick: handleClick, onKeyDown: handleKeyDown, disabled: context.disabled || props.disabled, buttonProps: Object.assign(Object.assign({}, buttonProps), { "aria-selected": isActive, role: "tab", tabIndex: isActive ? 0 : -1 }) })));
 });
 const StyledSquareButton = styled(SquareButton, {
     shouldForwardProp: (prop) => prop !== "isActive",

package/package.json

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