@team-monolith/cds 1.79.5 → 1.79.7

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/InputControlledSelectionRange.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface SelectionRange {
+    start: number;
+    end: number;
+}
+/** value, selectionRange에 대한 controlled input 컴포넌트입니다.
+ * 입력값과, 선택 범위에 대한 state, setState를 props로 받아 사용합니다.
+ */
+export declare const InputControlledSelectionRange: React.ForwardRefExoticComponent<{
+    value: string;
+    selectionRange: SelectionRange | null;
+    onSelectionRangeChange: (selectionRange: SelectionRange | null) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"> & React.RefAttributes<HTMLInputElement>>;

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/InputControlledSelectionRange.js

@@ -0,0 +1,47 @@
+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 "react/jsx-runtime";
+import React from "react";
+import { useEffect } from "react";
+/** value, selectionRange에 대한 controlled input 컴포넌트입니다.
+ * 입력값과, 선택 범위에 대한 state, setState를 props로 받아 사용합니다.
+ */
+export const InputControlledSelectionRange = React.forwardRef(function InputControlledSelectionRange(props, ref) {
+    const { value, selectionRange, onSelectionRangeChange } = props, inputProps = __rest(props, ["value", "selectionRange", "onSelectionRangeChange"]);
+    // value 또는 selectionRange가 바뀔 때마다,
+    // 실제 DOM input의 selection range를 동기화
+    useEffect(() => {
+        if (typeof ref === "function" || !(ref === null || ref === void 0 ? void 0 : ref.current) || !selectionRange)
+            return;
+        const { start, end } = selectionRange;
+        try {
+            ref.current.setSelectionRange(start, end);
+        }
+        catch (err) {
+            // 범위가 잘못되거나 input이 포커스가 없을 때 에러가 발생할 수 있으므로 주의
+            console.warn("setSelectionRange error:", err);
+        }
+    }, [selectionRange, value]);
+    // selectionRange 변경 감지 핸들러 (React에선 onSelect 사용)
+    const handleSelect = (e) => {
+        const { selectionStart, selectionEnd } = e.currentTarget;
+        if (selectionStart != null && selectionEnd != null) {
+            onSelectionRangeChange({
+                start: selectionStart,
+                end: selectionEnd,
+            });
+        }
+    };
+    return (_jsx("input", Object.assign({ ref: ref, 
+        // Controlled input
+        value: value, onSelect: handleSelect }, inputProps)));
+});

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SegmentedInput.js

@@ -3,8 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import { InputBase } from "../../../../components/InputBase";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { useEventListener } from "usehooks-ts";
+import { InputControlledSelectionRange, } from "./InputControlledSelectionRange";
 /**
  *  SOT는 value이고, 그 value는 숨겨진 input에 작성됩니다.
  *  그리고 그 value는 split되어 segmented input에 표시됩니다.
@@ -19,14 +20,23 @@ export function SegmentedInput(props) {
     const despacedFormat = splitedFormat.filter((v) => v !== " ");
     // "안녕 하세요" => ["안","녕","하","세","요"]
     const splitedValues = value.split("").filter((v) => v !== " ");
-    const [focusedIndex, setFocusedIndex] = useState(null);
+    // 현재 선택범위를 state로 관리합니다. 현재 커서 위치의 Source of Truth입니다.
+    const [selectionRange, setSelectionRange] = useState(null);
     // 글자를 조합중인지 여부 (ex: "안"을 입력중 "아"일 때 해당합니다.)
     const [isComposing, setIsComposing] = useState(false);
-    const setComposingTrue = useCallback(() => setIsComposing(true), []);
-    const setComposingFalse = useCallback(() => setIsComposing(false), []);
+    // 현재 포커스된 SquareInput의 index
+    const focusedIndex = !selectionRange
+        ? null
+        : isComposing
+            ? selectionRange.start - 1
+            : selectionRange.start;
     const hiddenRef = useRef(null);
-    useEventListener("compositionstart", setComposingTrue, hiddenRef);
-    useEventListener("compositionend", setComposingFalse, hiddenRef);
+    useEventListener("compositionstart", () => {
+        setIsComposing(true);
+    }, hiddenRef);
+    useEventListener("compositionend", () => {
+        setIsComposing(false);
+    }, hiddenRef);
     /** value의 공백을 제거하고, format에 맞춰 공백을 추가한 값을 리턴합니다. */
     const getFormattedValue = (value) => {
         const despacedValue = value.replace(/ /g, "");
@@ -39,31 +49,25 @@ export function SegmentedInput(props) {
             }
         }, "");
     };
-    // focusedIndex가 변경되지 않아도 setSelectionRange를 실행하기 위한 state입니다.
-    const [focusCounter, setFocusCounter] = useState(0);
-    // focusedIndex 또는 focusCounter가 변경되면 실제 포커스를 이동시킵니다.
-    // 현재 커서의 실제위치(hiddenRef.current?.selectionStart)는 포커스된 SquareInput 글자의 왼쪽 또는 오른쪽에 위치합니다.
-    // 사용자는 hiddenInput을 볼 수 없고, 포커싱된 SquareInput만 볼 수 있으므로 실제커서 위치는 예상할 수 없습니다.
-    // 그래서 현재 포커싱된 위치를 focusedIndex로 관리합니다. (포커스된 SquareInput 글자 왼쪽에 커서가 위치하게 됩니다.)
-    useEffect(() => {
-        var _a;
-        if (focusedIndex !== null) {
-            (_a = hiddenRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(focusedIndex, focusedIndex);
-        }
-    }, [focusedIndex, focusCounter]);
-    return (_jsxs(Container, { children: [_jsx("input", { type: "input", ref: hiddenRef, value: splitedValues.join(""), readOnly: readOnly, onKeyDown: (e) => {
+    return (_jsxs(Container, { children: [_jsx(InputControlledSelectionRange, { type: "input", ref: hiddenRef, value: splitedValues.join(""), readOnly: readOnly, selectionRange: selectionRange, onSelectionRangeChange: setSelectionRange, onKeyDown: (e) => {
                     var _a;
                     if (e.key === "ArrowLeft") {
                         e.preventDefault();
-                        if (focusedIndex !== null && focusedIndex > 0) {
-                            setFocusedIndex(focusedIndex - 1);
+                        if (selectionRange !== null && selectionRange.start > 0) {
+                            setSelectionRange({
+                                start: selectionRange.start - 1,
+                                end: selectionRange.start - 1,
+                            });
                         }
                     }
                     else if (e.key === "ArrowRight") {
                         e.preventDefault();
-                        if (focusedIndex !== null &&
-                            focusedIndex < despacedFormat.length - 1) {
-                            setFocusedIndex(focusedIndex + 1);
+                        if (selectionRange !== null &&
+                            selectionRange.end < despacedFormat.length - 1) {
+                            setSelectionRange({
+                                start: selectionRange.end + 1,
+                                end: selectionRange.end + 1,
+                            });
                         }
                     }
                     else if (e.key === "Backspace") {
@@ -81,33 +85,25 @@ export function SegmentedInput(props) {
                             : value.slice(0, focusedIndex) + value.slice(focusedIndex + 1);
                         onChange(getFormattedValue(newValue));
                         // 이전 글자로 포커싱을 이동합니다.
-                        // 이 때, focusedIndex가 변하지 않더라도 focusCounter를 증가시켜서 setSelectionRange가 실행되도록 합니다.
                         const newFocusedIndex = Math.max(focusedIndex - 1, 0);
-                        setFocusedIndex(newFocusedIndex);
-                        setFocusCounter((prev) => prev + 1);
+                        setSelectionRange({
+                            start: newFocusedIndex,
+                            end: newFocusedIndex,
+                        });
                     }
                 }, onChange: (e) => {
-                    var _a;
+                    var _a, _b;
                     onChange(getFormattedValue(e.target.value).slice(0, answerFormat.length));
-                    const selectionStart = (_a = hiddenRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart;
-                    if (isComposing) {
-                        setFocusedIndex(selectionStart ? selectionStart - 1 : 0);
-                    }
-                    else {
-                        setFocusedIndex(selectionStart || 0);
-                    }
-                }, onFocus: (e) => {
-                    // tab을 통해 focus가 이동되었을 때, focusedIndex를 설정합니다.
-                    if (focusedIndex === null) {
-                        const valueLength = e.target.value.length;
-                        setFocusedIndex(valueLength);
-                    }
+                    setSelectionRange({
+                        start: (_a = e.target.selectionStart) !== null && _a !== void 0 ? _a : 0,
+                        end: (_b = e.target.selectionEnd) !== null && _b !== void 0 ? _b : 0,
+                    });
                 }, onBlur: (e) => {
                     onChange(getFormattedValue(e.target.value).slice(0, answerFormat.length));
-                    setFocusedIndex(null);
+                    setSelectionRange(null);
                 }, css: css `
-          opacity: 0;
-          height: 0;
+          opacity: 1;
+          height: 10;
         ` }), _jsxs(InputWrapper, { children: [_jsx("div", Object.assign({ css: css `
             display: flex;
             align-items: center;
@@ -127,14 +123,14 @@ export function SegmentedInput(props) {
                                 readOnly,
                                 tabIndex: -1,
                                 onFocus: () => {
+                                    var _a;
                                     if (readOnly)
                                         return;
-                                    setFocusedIndex(i);
-                                    // setFocusedIndex이후에 실제 포커스를 이동시키기 위해 setTimeout을 사용합니다.
-                                    setTimeout(() => {
-                                        var _a;
-                                        (_a = hiddenRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                                    }, 0);
+                                    setSelectionRange({
+                                        start: i,
+                                        end: i,
+                                    });
+                                    (_a = hiddenRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                                 },
                             }, value: splitedValues[i] || "", onChange: () => { } }, i))) })), _jsx(InputMarker, {})] }), _jsx(Text, { children: placeholder })] }));
 }

package/package.json

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