@team-monolith/cds 1.100.3 → 1.100.5

package/dist/components/Book/Book.js

@@ -193,7 +193,8 @@ const CoverTitle = styled("h1", {
 const BookGradient = styled.div `
   width: 200px;
   height: ${BOOK_HEIGHT}px;
-  background: linear-gradient(
+  background:
+    linear-gradient(
       180deg,
       rgba(255, 255, 255, 0) 0%,
       rgba(0, 0, 0, 0.75) 100%

package/dist/components/OverflowTooltip.d.ts

@@ -5,8 +5,6 @@ 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

@@ -1,14 +1,3 @@
-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";
@@ -18,7 +7,6 @@ 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 = () => {
@@ -35,7 +23,7 @@ export function OverflowTooltip(props) {
     const handleClose = () => {
         setIsTooltipOpen(false);
     };
-    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 })) })));
+    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 })) })));
 }
 const OverflowDiv = styled.div `
   overflow: hidden;

package/dist/components/Switch.d.ts

@@ -1,6 +1,7 @@
-import React, { InputHTMLAttributes } from "react";
+import React from "react";
+import { SwitchProps as MuiSwitchProps } from "@mui/material";
 export type SwitchSize = "small" | "large";
-export interface SwitchProps {
+export interface SwitchProps extends Omit<MuiSwitchProps, "size"> {
     className?: string;
     /** 스위치 체크 상태 여부 */
     checked: boolean;
@@ -11,10 +12,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)
  */
-export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Switch.js

@@ -13,14 +13,14 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import styled from "@emotion/styled";
 import React from "react";
-import { Switch as MuiSwitch } from "@mui/material";
+import { Switch as MuiSwitch, } from "@mui/material";
 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, 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 { 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 SIZE_TO_SWTICH_SIZE = {
     large: {

package/dist/index.d.ts

@@ -30,6 +30,7 @@ export * from "./icons/custom/colored";
 export * from "./utils/hover";
 export * from "./utils/reset";
 export * from "./utils/zIndex";
+export * from "./utils/visuallyHidden";
 export * from "./patterns/Dropdown";
 export * from "./patterns/SegmentedControl";
 export * from "./patterns/LexicalEditor";

package/dist/index.js

@@ -30,6 +30,7 @@ export * from "./icons/custom/colored";
 export * from "./utils/hover";
 export * from "./utils/reset";
 export * from "./utils/zIndex";
+export * from "./utils/visuallyHidden";
 export * from "./patterns/Dropdown";
 export * from "./patterns/SegmentedControl";
 export * from "./patterns/LexicalEditor";

package/dist/patterns/Accordion.d.ts

@@ -7,7 +7,6 @@ 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

@@ -6,12 +6,12 @@ import { ArrowDownSLineIcon, ArrowUpSLineIcon } from "../icons";
 import { RESET_BUTTON } from "../utils/reset";
 /** 배너같이 생겼으나 누를 때마다 하단내용이 접힘(보이지않음)/펼침(보임) 상태가 바뀌는 컴포넌트입니다. */
 export function Accordion(props) {
-    const { className, icon, title, children, open = false, onClick, wrapperClassName, buttonLabel, } = props;
+    const { className, icon, title, children, open = false, onClick, wrapperClassName, } = props;
     return (_jsxs("div", Object.assign({ css: css `
         display: flex;
         flex-direction: column;
         gap: 2px;
-      `, 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] })));
+      `, className: wrapperClassName }, { children: [_jsxs(Container, Object.assign({ type: "button", className: className, onClick: onClick, "aria-expanded": open }, { 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,10 +50,9 @@ 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 }, (Component === "button"
+    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, disabled: disabled }, (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) => {

package/dist/patterns/LexicalEditor/nodes/ImageNode/ImageComponent.js

@@ -3,7 +3,7 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
 import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
 import { mergeRegister } from "@lexical/utils";
 import { $getNodeByKey, $getSelection, $isNodeSelection, $isRangeSelection, $setSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, createCommand, DRAGSTART_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, } from "lexical";
-import { Suspense, useCallback, useEffect, useRef, useState } from "react";
+import { Suspense, useCallback, useEffect, useRef, useState, } from "react";
 import { $isImageNode } from "./ImageNode";
 import { SquareButton } from "../../../../components/SquareButton";
 import { Settings3FillIcon } from "../../../../icons";
@@ -13,6 +13,7 @@ import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
 import { ImageNotAvailable } from "./ImageNotAvailable";
 import { ImageResizer } from "./ImageResizer";
 import { css } from "@emotion/react";
+import { RESET_BUTTON } from "../../../../utils/reset";
 const imageCache = new Set();
 export const RIGHT_CLICK_IMAGE_COMMAND = createCommand("RIGHT_CLICK_IMAGE_COMMAND");
 function useSuspenseImage(src) {
@@ -30,9 +31,13 @@ function useSuspenseImage(src) {
         });
     }
 }
-function LazyImage({ altText, className, imageRef, src, width, height, maxWidth: _maxWidth, onError, title, onClick, }) {
+/**
+ * 접근성과 관련한 이슈로 onClick이 가능할 땐 button 으로 그립니다.
+ */
+function LazyImage(props) {
+    const { altText, className, imageRef, src, width, height, maxWidth: _maxWidth, onError, title, buttonProps, } = props;
     useSuspenseImage(src);
-    return (_jsx("img", Object.assign({ className: className || undefined, src: src, alt: altText, ref: imageRef, style: {
+    const img = (_jsx("img", { className: className || undefined, src: src, alt: altText, ref: imageRef, style: {
             height,
             // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
             // maxWidth: `min(${maxWidth}px, 100%)`,
@@ -40,17 +45,11 @@ function LazyImage({ altText, className, imageRef, src, width, height, maxWidth:
             // fixme: maxWidth를 수정할 수 있게 되면 원복합니다.
             maxWidth: "100%",
             width,
-        }, 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();
-                }
-            },
-        }
-        : {}))));
+        }, title: title, onError: onError, draggable: "false" }));
+    if (buttonProps) {
+        return (_jsx("button", Object.assign({ type: "button", css: RESET_BUTTON }, buttonProps, { children: img })));
+    }
+    return img;
 }
 export function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, resizable, }) {
     const imageRef = useRef(null);
@@ -194,7 +193,10 @@ export function ImageComponent({ src, altText, nodeKey, width, height, maxWidth,
                         ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}`
                         : null, css: css `
                 cursor: pointer;
-              `, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth, onError: () => setIsLoadError(true), onClick: () => window.open(src, "_blank"), title: "\uD074\uB9AD\uD574\uC11C \uC6D0\uBCF8 \uC774\uBBF8\uC9C0 \uBCF4\uAE30. \uC6D0\uBCF8 \uC774\uBBF8\uC9C0\uB294 \uC0C8 \uCC3D\uC5D0\uC11C \uC5F4\uB9BD\uB2C8\uB2E4." })) })) })));
+              `, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth, onError: () => setIsLoadError(true), buttonProps: {
+                        onClick: () => window.open(src, "_blank"),
+                        "aria-label": "이미지 보기 (새 창)",
+                    }, title: "\uD074\uB9AD\uD574\uC11C \uC6D0\uBCF8 \uC774\uBBF8\uC9C0 \uBCF4\uAE30." })) })) })));
     }
     return (_jsxs(_Fragment, { children: [_jsxs(EditContainer, { children: [_jsx(Suspense, Object.assign({ fallback: null }, { children: _jsx("div", Object.assign({ draggable: draggable, css: css `
               // ImageResizer를 위한 relative 설정입니다.

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/FormSelection.js

@@ -58,9 +58,9 @@ export function FormSelection(props) {
                             "aria-label": value.show.image
                                 ? "이미지 바꾸기"
                                 : "이미지 삽입하기",
-                        } }), _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", inputProps: { "aria-label": "정답" } })] })), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete, buttonProps: {
+                        } }), _jsxs(Answer, { children: ["\uC815\uB2F5", _jsx(Switch, { checked: Boolean(value.isAnswer), size: "small", onChange: () => {
+                                    onChange(Object.assign(Object.assign({}, value), { isAnswer: !value.isAnswer }));
+                                } })] }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete, buttonProps: {
                             "aria-label": "삭제",
                         } }))] }))] }));
 }
@@ -89,7 +89,7 @@ const Index = styled.div(({ theme }) => css `
     font-weight: 800;
     line-height: 16px;
   `);
-const Answer = styled.div(({ theme }) => css `
+const Answer = styled.label(({ theme }) => css `
     display: flex;
     align-items: center;
     padding-right: 4px;

package/dist/patterns/LexicalEditor/plugins/FloatingLinkEditorPlugin/FloatingLinkEditor.d.ts

@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import { Dispatch } from "react";
 import { LexicalEditor } from "lexical";
 export interface FloatingLinkEditorProps {

package/dist/patterns/LexicalEditor/plugins/FloatingLinkEditorPlugin/FloatingLinkEditor.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
 import { useCallback, useEffect, useRef, useState } from "react";
 import { sanitizeUrl } from "../../utils/url";
 import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, } from "lexical";
@@ -9,6 +10,7 @@ import { $findMatchingParent, mergeRegister } from "@lexical/utils";
 import styled from "@emotion/styled";
 import { CloseFillIcon, CheckLineIcon, EditLineIcon, DeleteBinLineIcon, } from "../../../../icons";
 import { Input } from "../../../../components/Input";
+import { VISUALLY_HIDDEN } from "../../../../utils/visuallyHidden";
 export function FloatingLinkEditor(props) {
     const { editor, isLink, setIsLink, anchorElem, isLinkEditMode, setIsLinkEditMode, } = props;
     const editorRef = useRef(null);
@@ -151,7 +153,7 @@ export function FloatingLinkEditor(props) {
                             } }, { children: _jsx(CloseFillIcon, {}) })), _jsx(Button, Object.assign({ tabIndex: 0, onClick: (event) => {
                                 event.preventDefault();
                                 handleLinkSubmission();
-                            } }, { children: _jsx(CheckLineIcon, {}) }))] })] })) : (_jsxs(_Fragment, { children: [_jsx(Link, Object.assign({ href: sanitizeUrl(linkUrl), target: "_blank", rel: "noopener noreferrer", title: "\uC0C8 \uCC3D\uC5D0\uC11C \uC5F4\uAE30" }, { children: linkUrl })), _jsxs(Buttons, { children: [_jsx(Button, Object.assign({ tabIndex: 0, onClick: (event) => {
+                            } }, { children: _jsx(CheckLineIcon, {}) }))] })] })) : (_jsxs(_Fragment, { children: [_jsxs(Link, Object.assign({ href: sanitizeUrl(linkUrl), target: "_blank", rel: "noopener noreferrer" }, { children: [linkUrl, _jsx("div", Object.assign({ css: VISUALLY_HIDDEN }, { children: "(\uC0C8 \uCC3D)" }))] })), _jsxs(Buttons, { children: [_jsx(Button, Object.assign({ tabIndex: 0, onClick: (event) => {
                                 event.preventDefault();
                                 setEditedLinkUrl(linkUrl);
                                 setIsLinkEditMode(true);

package/dist/utils/visuallyHidden.d.ts

@@ -0,0 +1 @@
+export declare const VISUALLY_HIDDEN: import("@emotion/utils").SerializedStyles;

package/dist/utils/visuallyHidden.js

@@ -0,0 +1,12 @@
+import { css } from "@emotion/react";
+export const VISUALLY_HIDDEN = css `
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap; /* 텍스트가 줄 바뀜 없이 한 줄로 유지되도록 */
+`;

package/package.json

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