@team-monolith/cds 1.60.2 → 1.62.0

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxComponent.d.ts

@@ -2,18 +2,18 @@ import React from "react";
 import { ImageProps } from "../../../components/InsertImageDialog";
 export type SelectBoxType = "primary" | "success" | "danger";
 /** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
-export declare function SelectBoxComponent(props: {
-    className?: string;
-    indexClassName?: string;
-    contentClassName?: string;
+export declare const SelectBoxComponent: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    indexClassName?: string | undefined;
+    contentClassName?: string | undefined;
     /** SelectBox의 스타일 타입. 전달하지 않으면 기본 스타일이 적용됩니다. */
-    type?: SelectBoxType;
+    type?: SelectBoxType | undefined;
     /** 문제 번호 박스 내부를 그립니다. */
     index: React.ReactNode;
-    image?: ImageProps | null;
+    image?: ImageProps | null | undefined;
     text: React.ReactNode;
     /** SelectBox content 우측에 표시될 부분 */
     endIcon?: React.ReactNode;
-    /** 박스를 클릭할 때 실행될 콜백. 존재하지 않으면 cursor: pointer가 적용되지 않습니다. */
-    onClick?: () => void;
-}): import("@emotion/react/jsx-runtime").JSX.Element;
+    /** 박스를 클릭할 때 실행될 콜백. 전달하지 않으면 cursor: pointer가 적용되지 않습니다. */
+    onClick?: (() => void) | undefined;
+} & Partial<React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxComponent.js

@@ -1,7 +1,19 @@
+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, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
+import { forwardRef } from "react";
 const TYPE_TO_CONTAINER_STYLE = (theme, type) => ({
     primary: css `
       background: ${theme.color.container.blueContainer};
@@ -37,17 +49,17 @@ const TYPE_TO_INDEX_STYLE = (theme, type) => ({
     `,
 })[type];
 /** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
-export function SelectBoxComponent(props) {
-    const { className, indexClassName, contentClassName, type, index, image, text, endIcon, onClick, } = props;
+export const SelectBoxComponent = forwardRef(function SelectBoxComponent(props, ref) {
+    const { className, indexClassName, contentClassName, type, index, image, text, endIcon, onClick } = props, restProps = __rest(props, ["className", "indexClassName", "contentClassName", "type", "index", "image", "text", "endIcon", "onClick"]);
     const theme = useTheme();
-    return (_jsxs(Container, Object.assign({ className: className, css: type ? TYPE_TO_CONTAINER_STYLE(theme, type) : undefined, onClick: onClick }, { children: [_jsx(Index, Object.assign({ className: indexClassName, css: type ? TYPE_TO_INDEX_STYLE(theme, type) : undefined }, { children: index })), _jsxs(Content, Object.assign({ className: contentClassName }, { children: [image && (_jsx("img", { src: image.src, alt: image.altText, css: css `
+    return (_jsxs(Container, Object.assign({ className: className, ref: ref }, restProps, { css: type ? TYPE_TO_CONTAINER_STYLE(theme, type) : undefined, onClick: onClick }, { children: [_jsx(Index, Object.assign({ className: indexClassName, "aria-hidden": "true", css: type ? TYPE_TO_INDEX_STYLE(theme, type) : undefined }, { children: index })), _jsxs(Content, Object.assign({ className: contentClassName, "aria-hidden": "true" }, { children: [image && (_jsx("img", { "aria-hidden": "true", src: image.src, alt: image.altText, css: css `
               height: auto;
               // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
               max-width: 100%;
               width: fit-content;
               border-radius: 6px;
             ` })), text] })), endIcon] })));
-}
+});
 const Container = styled.div(({ theme, onClick }) => css `
     ${onClick && "cursor: pointer;"}
     display: flex;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxView.js

@@ -4,6 +4,8 @@ import { css } from "@emotion/react";
 import { CheckboxCircleFillIcon, CheckFillIcon, CloseCircleFillIcon, } from "../../../../../icons";
 import { SelectBoxComponent } from "./SelectBoxComponent";
 import Tag from "../../../../../components/Tag";
+import { useRef } from "react";
+import { useEventListener } from "usehooks-ts";
 const TYPE_TO_INDEX_ICON = (type) => ({
     primary: (_jsx(CheckFillIcon, { css: css `
           width: 12px;
@@ -27,9 +29,28 @@ export function SelectBoxView(props) {
                 ? "success"
                 : "danger"
         : undefined;
+    const boxRef = useRef(null);
+    const handleKeyDown = (e) => {
+        // onClick이 없으면 아무것도 하지 않음.
+        if (!onClick) {
+            return;
+        }
+        // tab을 통해 focus된 상태가 아니면 아무것도 하지 않음.
+        if (document.activeElement !== boxRef.current) {
+            return;
+        }
+        // spacebar 또는 엔터를 누르면 onClick 실행
+        if (e.key === " " || e.key === "Enter") {
+            e.preventDefault();
+            onClick();
+        }
+    };
+    useEventListener("keydown", handleKeyDown);
+    // text가 있으면 text, 없으면 image의 altText, 없으면 index를 aria-label로 사용
+    const ariaText = text || (image && image.altText) || index.toString() + "번 선택지";
     return (_jsx(SelectBoxComponent, { css: css `
         width: 100%;
-      `, type: selectBoxType, index: selectBoxType ? TYPE_TO_INDEX_ICON(selectBoxType) : index, image: image, text: text, onClick: onClick, 
+      `, ref: boxRef, role: onClick ? "checkbox" : undefined, "aria-checked": isSelected, "aria-label": onClick ? ariaText + (isSelected ? " 선택됨" : " 선택하기") : ariaText, tabIndex: onClick ? 0 : -1, type: selectBoxType, index: selectBoxType ? TYPE_TO_INDEX_ICON(selectBoxType) : index, image: image, text: text, onClick: onClick, 
         // 선택되지 않았으나 정답일 때 정답 태그를 표시
         endIcon: isAnswer &&
             !isSelected && (_jsx(Tag, { label: "\uC815\uB2F5", icon: _jsx(CheckboxCircleFillIcon, {}), color: "green", css: css `

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectBox/SelectBoxComponent.d.ts

@@ -7,12 +7,12 @@ export declare const SelectBoxClasses: {
 };
 export type SelectBoxType = "primary" | "normal";
 /** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
-export declare function SelectBoxComponent(props: {
-    className?: string;
+export declare const SelectBoxComponent: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
     type: SelectBoxType;
     index: React.ReactNode;
-    image?: ImageProps | null;
+    image?: ImageProps | null | undefined;
     text: React.ReactNode;
     /** 박스를 클릭할 때 실행될 콜백. 존재하지 않으면 cursor: pointer가 적용되지 않습니다. */
-    onClick?: () => void;
-}): import("@emotion/react/jsx-runtime").JSX.Element;
+    onClick?: (() => void) | undefined;
+} & Partial<import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectBox/SelectBoxComponent.js

@@ -1,7 +1,19 @@
+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, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
+import { forwardRef } from "react";
 export const SelectBoxClasses = {
     container: "SheetSelectNode-SelectBox-container",
     index: "SheetSelectNode-SelectBox-index",
@@ -32,17 +44,17 @@ const TYPE_TO_INDEX_STYLE = (theme, type) => ({
     `,
 })[type];
 /** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
-export function SelectBoxComponent(props) {
-    const { className, type, index, image, text, onClick } = props;
+export const SelectBoxComponent = forwardRef(function SelectBoxComponent(props, ref) {
+    const { className, type, index, image, text, onClick } = props, restProps = __rest(props, ["className", "type", "index", "image", "text", "onClick"]);
     const theme = useTheme();
-    return (_jsxs(Container, Object.assign({ className: `${className} ${SelectBoxClasses.container}`, css: TYPE_TO_CONTAINER_STYLE(theme, type), onClick: onClick }, { children: [_jsx(Index, Object.assign({ className: SelectBoxClasses.index, css: TYPE_TO_INDEX_STYLE(theme, type) }, { children: index })), _jsxs(Content, Object.assign({ className: SelectBoxClasses.content }, { children: [image && (_jsx("img", { src: image.src, alt: image.altText, css: css `
+    return (_jsxs(Container, Object.assign({ className: `${className} ${SelectBoxClasses.container}`, ref: ref }, restProps, { css: TYPE_TO_CONTAINER_STYLE(theme, type), onClick: onClick }, { children: [_jsx(Index, Object.assign({ className: SelectBoxClasses.index, "aria-hidden": "true", css: TYPE_TO_INDEX_STYLE(theme, type) }, { children: index })), _jsxs(Content, Object.assign({ className: SelectBoxClasses.content, "aria-hidden": "true" }, { children: [image && (_jsx("img", { "aria-hidden": "true", src: image.src, alt: image.altText, css: css `
               height: auto;
               // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
               max-width: 100%;
               width: fit-content;
               border-radius: 6px;
             ` })), text] }))] })));
-}
+});
 const Container = styled.div(({ onClick }) => css `
     ${onClick && "cursor: pointer;"}
     display: flex;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectBox/SelectBoxView.js

@@ -3,6 +3,8 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { css } from "@emotion/react";
 import { SelectBoxComponent } from "./SelectBoxComponent";
 import { CheckFillIcon } from "../../../../../../icons";
+import { useRef } from "react";
+import { useEventListener } from "usehooks-ts";
 function getIndexIcon(type, index) {
     return {
         primary: (_jsx(CheckFillIcon, { css: css `
@@ -16,7 +18,26 @@ function getIndexIcon(type, index) {
 export function SelectBoxView(props) {
     const { index, isSelected, image, text, onClick } = props;
     const selectBoxType = isSelected ? "primary" : "normal";
+    const boxRef = useRef(null);
+    const handleKeyDown = (e) => {
+        // onClick이 없으면 아무것도 하지 않음.
+        if (!onClick) {
+            return;
+        }
+        // tab을 통해 focus된 상태가 아니면 아무것도 하지 않음.
+        if (document.activeElement !== boxRef.current) {
+            return;
+        }
+        // spacebar 또는 엔터를 누르면 onClick 실행
+        if (e.key === " " || e.key === "Enter") {
+            e.preventDefault();
+            onClick();
+        }
+    };
+    useEventListener("keydown", handleKeyDown);
+    // text가 있으면 text, 없으면 image의 altText, 없으면 index를 aria-label로 사용
+    const ariaText = text || (image && image.altText) || index.toString() + "번 선택지";
     return (_jsx(SelectBoxComponent, { css: css `
         width: 100%;
-      `, type: selectBoxType, index: getIndexIcon(selectBoxType, index), image: image, text: text, onClick: onClick }));
+      `, ref: boxRef, role: onClick ? "checkbox" : undefined, "aria-checked": isSelected, "aria-label": onClick ? ariaText + (isSelected ? " 선택됨" : " 선택하기") : ariaText, tabIndex: onClick ? 0 : -1, type: selectBoxType, index: getIndexIcon(selectBoxType, index), image: image, text: text, onClick: onClick }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.60.2",
+  "version": "1.62.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
@@ -21,7 +21,8 @@
     "react-hook-form": "^7.48.2",
     "remixicon": "^3.4.0",
     "typescript": "^4.9.5",
-    "uid": "^2.0.2"
+    "uid": "^2.0.2",
+    "usehooks-ts": "^2.9.1"
   },
   "files": [
     "dist/**/*",