@team-monolith/cds 1.99.14 → 1.99.16

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/components/Switch.d.ts

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

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

@@ -50,7 +50,13 @@ 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, css: Component === "button" && 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) => {
+    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: 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 }));
+        }, title: title, "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/LexicalEditor/nodes/ProblemSelectNode/SettingForm/FormSelection.js

@@ -60,7 +60,7 @@ export function FormSelection(props) {
                                 : "이미지 삽입하기",
                         } }), _jsxs(Answer, Object.assign({ onClick: () => {
                             onChange(Object.assign(Object.assign({}, value), { isAnswer: !value.isAnswer }));
-                        } }, { children: ["\uC815\uB2F5", _jsx(Switch, { checked: Boolean(value.isAnswer), size: "small" })] })), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete, buttonProps: {
+                        } }, { children: ["\uC815\uB2F5", _jsx(Switch, { checked: Boolean(value.isAnswer), size: "small", inputProps: { "aria-label": "정답" } })] })), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete, buttonProps: {
                             "aria-label": "삭제",
                         } }))] }))] }));
 }

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, role: "tab" })));
+    // 화살표 키(좌, 우)로 인접 버튼으로 포커스 이동하는 로직
+    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};
-        `, role: "tablist" }, { 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.14",
+  "version": "1.99.16",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,