@team-monolith/cds 1.100.4 → 1.100.6

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/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";
@@ -31,20 +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);
-    if (onClick) {
-        return (_jsx("button", Object.assign({ type: "button", css: RESET_BUTTON, onClick: onClick, "aria-label": "\uC774\uBBF8\uC9C0 (\uC0C8 \uD0ED)" }, { children: _jsx("img", { className: className || undefined, src: src, alt: altText, ref: imageRef, style: {
-                    height,
-                    // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
-                    // maxWidth: `min(${maxWidth}px, 100%)`,
-                    // 이미지가 maxWidth보다 클 경우 이미지를 줄이지 않기 위해 100%로 변경
-                    // fixme: maxWidth를 수정할 수 있게 되면 원복합니다.
-                    maxWidth: "100%",
-                    width,
-                }, title: title, onError: onError, draggable: "false" }) })));
-    }
-    return (_jsx("img", { 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%)`,
@@ -53,6 +46,10 @@ function LazyImage({ altText, className, imageRef, src, width, height, maxWidth:
             maxWidth: "100%",
             width,
         }, 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);
@@ -196,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." })) })) })));
+              `, 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

@@ -9,7 +9,6 @@ import { SquareButton } from "../../../../../components/SquareButton";
 import { Switch } from "../../../../../components/Switch";
 import { useState } from "react";
 import { InsertImageDialog } from "../../../components/InsertImageDialog";
-import { RESET_BUTTON } from "../../../../../utils/reset";
 export function FormSelection(props) {
     var _a;
     const { index, control, rules, onDelete } = props;
@@ -59,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: { tabIndex: -1 } })] })), 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": "삭제",
                         } }))] }))] }));
 }
@@ -90,8 +89,7 @@ const Index = styled.div(({ theme }) => css `
     font-weight: 800;
     line-height: 16px;
   `);
-const Answer = styled.button(({ theme }) => css `
-    ${RESET_BUTTON}
+const Answer = styled.label(({ theme }) => css `
     display: flex;
     align-items: center;
     padding-right: 4px;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-import { useCallback, useEffect, useId, useRef, useState, } from "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";
 import { getSelectedNode } from "../../utils/getSelectedNode";
@@ -18,7 +18,6 @@ export function FloatingLinkEditor(props) {
     const [linkUrl, setLinkUrl] = useState("");
     const [editedLinkUrl, setEditedLinkUrl] = useState("https://");
     const [lastSelection, setLastSelection] = useState(null);
-    const newWindowInfoId = `new-window-info-${useId()}`;
     const $updateLinkEditor = useCallback(() => {
         var _a, _b;
         const selection = $getSelection();
@@ -154,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", "aria-labelledby": newWindowInfoId }, { children: linkUrl })), _jsx("div", Object.assign({ id: newWindowInfoId, css: VISUALLY_HIDDEN }, { children: "\uC0C8 \uCC3D\uC5D0\uC11C \uC5F4\uB9BC" })), _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/reset.d.ts

@@ -1,2 +1,3 @@
+export declare const RESET_COMMON_BOX: import("@emotion/utils").SerializedStyles;
 export declare const RESET_BUTTON: import("@emotion/utils").SerializedStyles;
 export declare const RESET_TABLE: import("@emotion/utils").SerializedStyles;

package/dist/utils/reset.js

@@ -1,4 +1,9 @@
 import { css } from "@emotion/react";
+export const RESET_COMMON_BOX = css `
+  margin: 0;
+  padding: 0;
+  border: 0;
+`;
 export const RESET_BUTTON = css `
   display: inline-block;
   margin: 0;

package/package.json

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