@team-monolith/cds 1.115.2 → 1.116.0

package/dist/components/CheckboxInput.d.ts

@@ -24,8 +24,6 @@ export interface CheckboxInputProps {
     onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
     /** HTML input 태그에 전달될 props */
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
-    /** 클릭 가능한 영역의 한 변의 길이(px). 기본값은 16px */
-    hitAreaSize?: number;
 }
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=36-907&t=G4t39O7uXZvsGQ9u-0)

package/dist/components/CheckboxInput.js

@@ -15,7 +15,6 @@ import { css, useTheme } from "@emotion/react";
 import * as React from "react";
 import styled from "@emotion/styled";
 import { ZINDEX } from "../utils/zIndex";
-const DEFAULT_CHECKBOX_SIZE = 16;
 export const checkboxInputClasses = {
     root: "CheckboxInput",
     checkbox: "CheckboxInput-checkbox",
@@ -40,11 +39,6 @@ const CHECKBOX_ICON_STYLE = (theme, type, disabled) => ({
                 stroke: ${theme.color.background.primary};
               }
             }
-            input[type="checkbox"]:focus-visible + & {
-              rect {
-                stroke: ${theme.color.background.primary};
-              }
-            }
           `}
     `,
     checked: css `
@@ -72,12 +66,6 @@ const CHECKBOX_ICON_STYLE = (theme, type, disabled) => ({
                 stroke: ${theme.color.background.primaryActive};
               }
             }
-            input[type="checkbox"]:focus-visible + & {
-              rect {
-                fill: ${theme.color.background.primaryActive};
-                stroke: ${theme.color.background.primaryActive};
-              }
-            }
           `}
     `,
     partial: css `
@@ -110,15 +98,6 @@ const CHECKBOX_ICON_STYLE = (theme, type, disabled) => ({
                 stroke: none;
               }
             }
-            input[type="checkbox"]:focus-visible + & {
-              rect {
-                stroke: ${theme.color.background.primaryActive};
-              }
-              rect + rect {
-                fill: ${theme.color.background.primaryActive};
-                stroke: none;
-              }
-            }
           `}
     `,
 })[type];
@@ -126,7 +105,7 @@ const CHECKBOX_ICON_STYLE = (theme, type, disabled) => ({
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=36-907&t=G4t39O7uXZvsGQ9u-0)
  */
 export const CheckboxInput = React.forwardRef(function CheckboxInput(props, ref) {
-    const { className, checked, label, spacer, disabled, partial, onChange, onClick: _onClick, inputProps, hitAreaSize } = props, other = __rest(props, ["className", "checked", "label", "spacer", "disabled", "partial", "onChange", "onClick", "inputProps", "hitAreaSize"]);
+    const { className, checked, label, spacer, disabled, partial, onChange, onClick: _onClick, inputProps } = props, other = __rest(props, ["className", "checked", "label", "spacer", "disabled", "partial", "onChange", "onClick", "inputProps"]);
     if (!label) {
         return _jsx(Checkbox, Object.assign({}, props, { ref: ref }));
     }
@@ -137,7 +116,6 @@ export const CheckboxInput = React.forwardRef(function CheckboxInput(props, ref)
         partial,
         onChange,
         inputProps,
-        hitAreaSize,
     };
     return (_jsxs(Label, Object.assign({ className: [checkboxInputClasses.root, className]
             .filter(Boolean)
@@ -146,68 +124,35 @@ export const CheckboxInput = React.forwardRef(function CheckboxInput(props, ref)
         `, children: label })] })));
 });
 const Checkbox = React.forwardRef(function Checkbox(props, ref) {
-    const { className, checked, partial, disabled = false, spacer = false, onChange, onClick, inputProps, hitAreaSize = DEFAULT_CHECKBOX_SIZE } = props, other = __rest(props, ["className", "checked", "partial", "disabled", "spacer", "onChange", "onClick", "inputProps", "hitAreaSize"]);
+    const { className, checked, partial, disabled = false, spacer = false, onChange, onClick, inputProps } = props, other = __rest(props, ["className", "checked", "partial", "disabled", "spacer", "onChange", "onClick", "inputProps"]);
     const type = checked
         ? "checked"
         : partial
             ? "partial"
             : "default";
-    const clampedSize = Math.max(hitAreaSize, DEFAULT_CHECKBOX_SIZE);
-    return (_jsxs(CheckboxContainer, Object.assign({ className: className, spacer: spacer, disabled: disabled, size: clampedSize, ref: ref }, other, { children: [_jsx(StyledInput, Object.assign({ type: "checkbox" }, inputProps, { checked: checked, disabled: disabled, onClick: onClick, onChange: onChange, size: clampedSize })), _jsx(CheckboxIcon, { type: type, disabled: disabled })] })));
+    return (_jsxs(CheckboxContainer, Object.assign({ className: className, spacer: spacer, disabled: disabled, ref: ref }, other, { children: [_jsx(StyledInput, Object.assign({ type: "checkbox" }, inputProps, { checked: checked, disabled: disabled, onClick: onClick, onChange: onChange })), _jsx(CheckboxIcon, { type: type, disabled: disabled })] })));
 });
-const CheckboxContainer = styled.span(({ theme, spacer, disabled, size }) => css `
-    display: flex;
-    align-items: center;
-    justify-content: center;
+const CheckboxContainer = styled.span(({ spacer, disabled }) => css `
+    display: inline-flex;
     position: relative;
-    width: ${DEFAULT_CHECKBOX_SIZE}px;
-    height: ${DEFAULT_CHECKBOX_SIZE}px;
+    width: 16px;
+    height: 16px;
     cursor: ${disabled ? "default" : "pointer"};
     margin-bottom: ${spacer ? "8px" : "0"};
-
-    svg {
-      z-index: 1;
-      pointer-events: none;
-    }
-
-    ${size > DEFAULT_CHECKBOX_SIZE &&
-    css `
-      &::before {
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: ${size}px;
-        height: ${size}px;
-        border-radius: 50%;
-        background: ${theme.color.background.neutralAltActive};
-        opacity: 0;
-        pointer-events: none;
-      }
-    `}
-    ${!disabled &&
-    css `
-      &:hover::before,
-      &:focus-visible::before {
-        opacity: 0.5; /* input 영역 hover 및 focus 시 표시 */
-      }
-    `}
-  `);
-const StyledInput = styled.input(({ size }) => css `
-    cursor: inherit;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    opacity: 0;
-    width: ${size}px;
-    height: ${size}px;
-    margin: 0;
-    padding: 0;
-    // input 컴포넌트는 보이지 않지만, 클릭이 가능하게 z-index를 설정합니다.
-    z-index: ${ZINDEX.inputBase};
   `);
+const StyledInput = styled.input `
+  cursor: inherit;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  // input 컴포넌트는 보이지 않지만, 클릭이 가능하게 z-index를 설정합니다.
+  z-index: ${ZINDEX.inputBase};
+`;
 const Label = styled.label `
   display: flex;
   position: relative;

package/dist/patterns/LexicalEditor/LexicalEditor.d.ts

@@ -19,6 +19,8 @@ export interface LexicalEditorProps {
     isQuizEnabled?: boolean;
     /** 렉시컬 플러그인의 파일 블록 노출의 유무, false가 디폴트이고, 전달하지 않아도 로컬스토리지 devMode로도 노출시킬 수 있습니다. */
     showFileUpload?: boolean;
+    /** 에디터가 마운트될 때 자동으로 포커스를 설정할지 여부. true가 디폴트입니다. */
+    autoFocus?: boolean;
     /** 외부에서 플러그인을 주입하는 경우 활용함 */
     children?: JSX.Element | string | (JSX.Element | string)[];
 }

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -39,7 +39,7 @@ function getCleanObject(obj) {
     return newObj;
 }
 export function LexicalEditor(props) {
-    const { className, contentEditableClassName, value, onChange, editable = true, showQuizSolution = false, freezeProblemNode = false, isSheetEnabled = false, isQuizEnabled = false, showFileUpload = false, children, } = props;
+    const { className, contentEditableClassName, value, onChange, editable = true, showQuizSolution = false, freezeProblemNode = false, isSheetEnabled = false, isQuizEnabled = false, showFileUpload = false, autoFocus = true, children, } = props;
     const theme = useTheme();
     const initialConfig = {
         namespace: "CustomLexicalEditor",
@@ -62,5 +62,5 @@ export function LexicalEditor(props) {
             }
         }
         : undefined;
-    return (_jsx(LexicalCustomConfigContext.Provider, { value: { freezeProblemNode, showQuizSolution, showFileUpload }, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(Plugins, { className: className, contentEditableClassName: contentEditableClassName, onChange: onChangeHandler, isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled, showFileUpload: showFileUpload }), _jsx(_Fragment, { children: children })] }) }));
+    return (_jsx(LexicalCustomConfigContext.Provider, { value: { freezeProblemNode, showQuizSolution, showFileUpload }, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(Plugins, { className: className, contentEditableClassName: contentEditableClassName, onChange: onChangeHandler, isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled, showFileUpload: showFileUpload, autoFocus: autoFocus }), _jsx(_Fragment, { children: children })] }) }));
 }

package/dist/patterns/LexicalEditor/Plugins.d.ts

@@ -11,5 +11,6 @@ export interface PluginsProps {
     isSheetEnabled: boolean;
     isQuizEnabled: boolean;
     showFileUpload: boolean;
+    autoFocus: boolean;
 }
 export declare function Plugins(props: PluginsProps): ReactElement;

package/dist/patterns/LexicalEditor/Plugins.js

@@ -39,7 +39,7 @@ import { DragDropPastePlugin } from "./plugins/DragDropPastePlugin";
 import { ParagraphPlaceholderPlugin } from "./plugins/ParagraphPlaceholderPlugin";
 import { AutoLinkPlugin } from "./plugins/AutoLinkPlugin";
 export function Plugins(props) {
-    const { className, contentEditableClassName, onChange, isSheetEnabled, isQuizEnabled, showFileUpload, } = props;
+    const { className, contentEditableClassName, onChange, isSheetEnabled, isQuizEnabled, showFileUpload, autoFocus, } = props;
     const isEditable = useLexicalEditable();
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
     const [isLinkEditMode, setIsLinkEditMode] = useState(false);
@@ -52,7 +52,7 @@ export function Plugins(props) {
                     onChange === null || onChange === void 0 ? void 0 : onChange(editorState.toJSON());
                 }, 
                 // ignore 하지 않으면 Form에서 수정하지 않았는데 Dirty로 처리됨.
-                ignoreSelectionChange: true }), _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, { isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled, showFileUpload: showFileUpload }), _jsx(MarkdownShortcutPlugin, { transformers: CUSTOM_TRANSFORMERS }), _jsx(HistoryPlugin, {}), _jsx(ParagraphPlaceholderPlugin, { placeholder: "\uBA85\uB839\uC5B4 \uC0AC\uC6A9 \uC2DC\uC5D0\uB294 '/'\uB97C \uB204\uB974\uC138\uC694. \uBE14\uB85D\uC5D0 \uB9C8\uC6B0\uC2A4\uB97C \uC62C\uB824 \uB098\uD0C0\uB098\uB294 '+'\uB97C \uD074\uB9AD\uD558\uBA74 \uC544\uB798\uC5D0 \uBE14\uB85D\uC744 \uCD94\uAC00\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4." })] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem, isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled, showFileUpload: showFileUpload }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(ClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(VideosPlugin, {}), _jsx(FilePlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {}), _jsx(LayoutPlugin, {}), _jsx(SheetSelectPlugin, {}), _jsx(SheetInputPlugin, {}), _jsx(SelfEvaluationPlugin, {}), _jsx(AutoLinkPlugin, {})] }));
+                ignoreSelectionChange: true }), autoFocus && _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, { isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled, showFileUpload: showFileUpload }), _jsx(MarkdownShortcutPlugin, { transformers: CUSTOM_TRANSFORMERS }), _jsx(HistoryPlugin, {}), _jsx(ParagraphPlaceholderPlugin, { placeholder: "\uBA85\uB839\uC5B4 \uC0AC\uC6A9 \uC2DC\uC5D0\uB294 '/'\uB97C \uB204\uB974\uC138\uC694. \uBE14\uB85D\uC5D0 \uB9C8\uC6B0\uC2A4\uB97C \uC62C\uB824 \uB098\uD0C0\uB098\uB294 '+'\uB97C \uD074\uB9AD\uD558\uBA74 \uC544\uB798\uC5D0 \uBE14\uB85D\uC744 \uCD94\uAC00\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4." })] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem, isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled, showFileUpload: showFileUpload }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(ClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(VideosPlugin, {}), _jsx(FilePlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {}), _jsx(LayoutPlugin, {}), _jsx(SheetSelectPlugin, {}), _jsx(SheetInputPlugin, {}), _jsx(SelfEvaluationPlugin, {}), _jsx(AutoLinkPlugin, {})] }));
 }
 const ScrollArea = styled.div `
   min-height: 150px;

package/package.json

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