maru_design2 2.24.4 → 2.25.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.25.0](https://github.com/42maru-ai/maru-design2/compare/v2.24.4...v2.25.0) (2025-04-08)
+
+
+### Features
+
+* :sparkles: Textarea - add minRows, maxRows [#540](https://github.com/42maru-ai/maru-design2/issues/540) ([b907d40](https://github.com/42maru-ai/maru-design2/commit/b907d40834eb48baea693d94364940605478963a))
+* :sparkles: Textarea - add resizable [#553](https://github.com/42maru-ai/maru-design2/issues/553) ([594031e](https://github.com/42maru-ai/maru-design2/commit/594031e12f14870708e691b1f59fc863c948aa20))
+
+
+### Bug Fixes
+
+* :bug: Textarea - fix condition & update storybook ([7f14d1a](https://github.com/42maru-ai/maru-design2/commit/7f14d1a95f53956e2a5a6fcbcbdfc5a3ed9d440c))
+* :bug: Textarea - fix init scrollHeight ([c6aa3cc](https://github.com/42maru-ai/maru-design2/commit/c6aa3ccf3f2b2e1b1947bf5a70943044ad2e9f40))
+
 ## [2.24.4](https://github.com/42maru-ai/maru-design2/compare/v2.24.3...v2.24.4) (2025-03-31)
 
 

package/dist/components/atoms/textarea/Textarea.d.ts

@@ -21,5 +21,18 @@ export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
      */
     wrapperRef?: React.RefObject<HTMLDivElement>;
     className?: string;
+    /**
+     * 최소 높이. 없으면 props.rows 이거나 1로 설정.
+     */
+    minRows?: number;
+    /**
+     * 최대 높이. 없으면 무한대 늘어남.
+     */
+    maxRows?: number;
+    /**
+     * 바닥 선분을 마우스로 드래그해서 크기를 조절할 수 있는지 여부
+     * - 기본값은 false
+     */
+    resizable?: boolean;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useState, useMemo, forwardRef, useEffect, useRef, createElement, Component, useLayoutEffect, createRef } from 'react';
+import React__default, { useState, useMemo, forwardRef, useEffect, useRef, useCallback, createElement, Component, useLayoutEffect, createRef } from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { findDOMNode } from 'react-dom';
 
@@ -8891,7 +8891,7 @@ function Slider(_a) {
   }));
 }
 
-var css_248z$b = ".maru-textarea-wrapper .maru-textarea {\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  flex-direction: row;\n  padding: 8px 8px 8px 12px;\n  border: 1px solid #e4e4e4;\n  border-radius: 6px;\n  gap: 8px;\n}\n.maru-textarea-wrapper .maru-textarea > textarea {\n  width: 100%;\n  border: unset;\n  outline: unset;\n  background-color: transparent;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n  color: #5c5c5c;\n  resize: none;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-webkit-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-moz-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea:-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea:focus-visible, .maru-textarea-wrapper .maru-textarea:focus-within {\n  border-color: #5c5c5c;\n  background-color: #fafafa;\n}\n.maru-textarea-wrapper .maru-textarea.errored {\n  outline: 1px solid #e53e3e;\n  border-color: #e53e3e;\n}\n.maru-textarea-wrapper .maru-textarea:hover {\n  outline: 1px solid #e4e4e4;\n  border-color: #e4e4e4;\n  background-color: #fafafa;\n}\n.maru-textarea-wrapper .maru-textarea.disabled {\n  background-color: #fafafa;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-webkit-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-moz-placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea:-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled:hover {\n  outline: unset;\n}\n.maru-textarea-wrapper .maru-textarea-end-node-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-textarea-wrapper .maru-textarea-end-node-wrapper > button {\n  padding: unset;\n  margin: unset;\n  border: unset;\n  background-color: unset;\n  cursor: pointer;\n  width: 16px;\n  height: 16px;\n}\n.maru-textarea-wrapper .maru-textarea-footer {\n  display: block;\n  margin-top: 4px;\n}\n.maru-textarea-wrapper .maru-textarea-footer > span {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #e53e3e;\n}";
+var css_248z$b = ".maru-textarea-wrapper .maru-textarea-resizable-wrapper {\n  position: relative;\n}\n.maru-textarea-wrapper .maru-textarea {\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  flex-direction: row;\n  padding: 8px 8px 8px 12px;\n  border: 1px solid #e4e4e4;\n  border-radius: 6px;\n  gap: 8px;\n}\n.maru-textarea-wrapper .maru-textarea > textarea {\n  width: 100%;\n  border: unset;\n  outline: unset;\n  background-color: transparent;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n  color: #5c5c5c;\n  resize: none;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-webkit-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-moz-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea:-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea:focus-visible, .maru-textarea-wrapper .maru-textarea:focus-within {\n  border-color: #5c5c5c;\n  background-color: #fafafa;\n}\n.maru-textarea-wrapper .maru-textarea.errored {\n  outline: 1px solid #e53e3e;\n  border-color: #e53e3e;\n}\n.maru-textarea-wrapper .maru-textarea:hover {\n  outline: 1px solid #e4e4e4;\n  border-color: #e4e4e4;\n  background-color: #fafafa;\n}\n.maru-textarea-wrapper .maru-textarea.disabled {\n  background-color: #fafafa;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-webkit-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-moz-placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea:-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled:hover {\n  outline: unset;\n}\n.maru-textarea-wrapper .maru-textarea-end-node-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-textarea-wrapper .maru-textarea-end-node-wrapper > button {\n  padding: unset;\n  margin: unset;\n  border: unset;\n  background-color: unset;\n  cursor: pointer;\n  width: 16px;\n  height: 16px;\n}\n.maru-textarea-wrapper .resizer {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 5px;\n  width: 100%;\n  cursor: ns-resize;\n  background: transparent;\n}\n.maru-textarea-wrapper .maru-textarea-footer {\n  display: block;\n  margin-top: 4px;\n}\n.maru-textarea-wrapper .maru-textarea-footer > span {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #e53e3e;\n}";
 styleInject(css_248z$b);
 
 var Textarea = /*#__PURE__*/forwardRef(function (_a, textareaRef) {
@@ -8900,15 +8900,40 @@ var Textarea = /*#__PURE__*/forwardRef(function (_a, textareaRef) {
     hiddenClearButton = _a.hiddenClearButton,
     wrapperRef = _a.wrapperRef,
     className = _a.className,
-    props = __rest(_a, ["invalid", "onClear", "hiddenClearButton", "wrapperRef", "className"]);
-  var _b = useState(false),
-    showClearButton = _b[0],
-    setShowClearButton = _b[1];
+    minRows = _a.minRows,
+    maxRows = _a.maxRows,
+    _b = _a.resizable,
+    resizable = _b === void 0 ? false : _b,
+    props = __rest(_a, ["invalid", "onClear", "hiddenClearButton", "wrapperRef", "className", "minRows", "maxRows", "resizable"]);
+  var _c = useState(false),
+    showClearButton = _c[0],
+    setShowClearButton = _c[1];
   var combineRef = useCombineRef(textareaRef);
+  var minHeight = useCallback(function (lineHeight) {
+    return minRows ? minRows * lineHeight : 0;
+  }, [minRows]);
+  var maxHeight = useCallback(function (lineHeight) {
+    return maxRows ? maxRows * lineHeight : Infinity;
+  }, [maxRows]);
+  /**
+   * textarea의 높이를 조절하는 함수
+   * - rows는 기본적으로 초기 높이 설정하는데에만 쓰임
+   * - 동적 높이 조정은 css height 속성 변경으로 조정해야함
+   */
   var resizeHeight = function resizeHeight() {
     if (combineRef.current) {
+      // 항상 그때의 scrollHeight를 가져오도록 높이를 초기화
       combineRef.current.style.height = 'auto';
-      combineRef.current.style.height = "".concat(combineRef.current.scrollHeight, "px");
+      var lineHeight = parseInt(window.getComputedStyle(combineRef.current).lineHeight || '0', 10);
+      var scrollHeight = combineRef.current.scrollHeight;
+      if (lineHeight) {
+        var min = minHeight(lineHeight);
+        var max = maxHeight(lineHeight);
+        var newHeight = Math.min(Math.max(scrollHeight, min), max);
+        combineRef.current.style.height = "".concat(newHeight, "px");
+      } else {
+        combineRef.current.style.height = "".concat(scrollHeight, "px");
+      }
     }
   };
   useEffect(function () {
@@ -8955,33 +8980,65 @@ var Textarea = /*#__PURE__*/forwardRef(function (_a, textareaRef) {
     onClear === null || onClear === void 0 ? void 0 : onClear();
     resizeHeight();
   };
+  var handleResizerMouseDown = function handleResizerMouseDown(e) {
+    var combine = combineRef === null || combineRef === void 0 ? void 0 : combineRef.current;
+    if (resizable && combine) {
+      var startY_1 = e.clientY;
+      var startHeight_1 = combine.clientHeight;
+      document.body.style.userSelect = 'none';
+      var lineHeight = parseInt(window.getComputedStyle(combine).lineHeight || '0', 10);
+      var min_1 = minHeight(lineHeight);
+      var max_1 = maxHeight(lineHeight);
+      var handleMouseMove_1 = function handleMouseMove_1(moveEvent) {
+        var newHeight = startHeight_1 + moveEvent.clientY - startY_1;
+        if (min_1 <= newHeight && newHeight <= max_1) {
+          combine.style.height = "".concat(newHeight, "px");
+        }
+      };
+      var handleMouseUp_1 = function handleMouseUp_1() {
+        document.body.style.userSelect = '';
+        document.removeEventListener('mousemove', handleMouseMove_1);
+        document.removeEventListener('mouseup', handleMouseUp_1);
+      };
+      document.addEventListener('mousemove', handleMouseMove_1);
+      document.addEventListener('mouseup', handleMouseUp_1);
+    }
+  };
   return jsxs("div", __assign({
     ref: wrapperRef,
     className: classNames('maru-textarea-wrapper', className)
   }, {
     children: [jsxs("div", __assign({
-      className: classNames('maru-textarea', {
-        errored: invalid === null || invalid === void 0 ? void 0 : invalid.on,
-        disabled: props.disabled
-      })
+      className: "maru-textarea-resizable-wrapper"
     }, {
-      children: [jsx("textarea", __assign({}, props, {
-        ref: combineRef,
-        onChange: handleTextareaChange
-      })), jsx("div", __assign({
-        className: "maru-textarea-end-node-wrapper"
+      children: [jsxs("div", __assign({
+        className: classNames('maru-textarea', {
+          errored: invalid === null || invalid === void 0 ? void 0 : invalid.on,
+          disabled: props.disabled
+        })
       }, {
-        children: showClearButton && !props.disabled && jsx("button", __assign({
-          type: "button",
-          onClick: handleClearClick,
-          tabIndex: -1
+        children: [jsx("textarea", __assign({}, props, {
+          ref: combineRef,
+          onChange: handleTextareaChange,
+          rows: props.rows || minRows || 1
+        })), jsx("div", __assign({
+          className: "maru-textarea-end-node-wrapper"
         }, {
-          children: jsx(Icon, {
-            name: ICONS.X_s1615,
-            color: "#5c5c5c"
-          })
-        }))
-      }))]
+          children: showClearButton && !props.disabled && jsx("button", __assign({
+            type: "button",
+            onClick: handleClearClick,
+            tabIndex: -1
+          }, {
+            children: jsx(Icon, {
+              name: ICONS.X_s1615,
+              color: "#5c5c5c"
+            })
+          }))
+        }))]
+      })), resizable && jsx("div", {
+        className: "resizer",
+        onMouseDown: handleResizerMouseDown
+      })]
     })), invalid && invalid.on && jsx("div", __assign({
       className: "maru-textarea-footer"
     }, {
@@ -8996,7 +9053,10 @@ Textarea.defaultProps = {
   onClear: undefined,
   hiddenClearButton: undefined,
   wrapperRef: undefined,
-  className: undefined
+  className: undefined,
+  minRows: undefined,
+  maxRows: undefined,
+  resizable: false
 };
 Textarea.displayName = 'Textarea';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maru_design2",
-  "version": "2.24.4",
+  "version": "2.25.0",
   "main": "./dist/index.js",
   "author": "zena-42maru",
   "license": "MIT",