maru_design2 2.24.4 → 2.25.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [2.25.1](https://github.com/42maru-ai/maru-design2/compare/v2.25.0...v2.25.1) (2025-04-15)
+
+
+### Bug Fixes
+
+* :bento: Icon - add datahub new icons ([997f1e4](https://github.com/42maru-ai/maru-design2/commit/997f1e4af29e409b2d1ad6cb652ff729c95f0efb))
+
+## [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/icon/iconmap.d.ts

@@ -189,6 +189,7 @@ export declare const ICONS: {
     readonly FilePlus_s1810: "FilePlus_s1810";
     readonly FilePlus_s1812: "FilePlus_s1812";
     readonly FileQuestion02_s1615: "FileQuestion02_s1615";
+    readonly FileRefresh_s1413: "FileRefresh_s1413";
     readonly FileRefresh_s1810: "FileRefresh_s1810";
     readonly FileRefresh_s1812: "FileRefresh_s1812";
     readonly FileSlash_02_s1810: "FileSlash_02_s1810";
@@ -270,6 +271,7 @@ export declare const ICONS: {
     readonly PlusLines_s1210: "PlusLines_s1210";
     readonly PlusUpLines_s1413: "PlusUpLines_s1413";
     readonly Plus_s1610: "Plus_s1610";
+    readonly PreviewEye_s1413: "PreviewEye_s1413";
     readonly PreviewLine_s2013: "PreviewLine_s2013";
     readonly PreviewLine_s2415: "PreviewLine_s2415";
     readonly PreviewZoom_s2013: "PreviewZoom_s2013";

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';
 
@@ -3066,6 +3066,27 @@ var iconmap = {
     "circles": [],
     "rects": []
   },
+  "FileRefresh_s1413": {
+    "width": "14",
+    "height": "15",
+    "viewBox": "0 0 14 15",
+    "fill": "none",
+    "paths": [{
+      "d": "M7.54161 1.65723V4.06671C7.54161 4.39341 7.54161 4.55675 7.61049 4.68154C7.67108 4.7913 7.76775 4.88054 7.88666 4.93646C8.02184 5.00004 8.1988 5.00004 8.55272 5.00004H11.163M3.9305 13.1667C2.86874 13.1667 2.66285 13.1667 2.25731 12.9759C1.90059 12.8081 1.61056 12.5404 1.4288 12.2111C1.22217 11.8368 1.22217 11.3468 1.22217 10.3667V4.3C1.22217 3.31991 1.22217 2.82986 1.4288 2.45552C1.61056 2.12623 1.90059 1.85852 2.25731 1.69074C2.66285 1.5 3.19374 1.5 4.2555 1.5H7.54161L11.3333 5V6.36667",
+      "stroke": "#5C5C5C",
+      "strokeWidth": "1.3",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }, {
+      "d": "M5.69405 11.7218C6.02604 12.5833 6.75112 13.2796 7.71112 13.5368C9.30609 13.9642 10.9455 13.0177 11.3729 11.4227L11.4184 11.2528M5.59685 9.87499C6.02423 8.28002 7.66366 7.3335 9.25862 7.76087C10.2186 8.0181 10.9437 8.71443 11.2757 9.57587M5.04252 9.36227L5.53996 10.2239L6.40155 9.72642M10.5684 11.5712L11.43 11.0738L11.9274 11.9354",
+      "stroke": "#5C5C5C",
+      "strokeWidth": "1.3",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }],
+    "circles": [],
+    "rects": []
+  },
   "FileRefresh_s1810": {
     "width": "15",
     "height": "14",
@@ -4522,6 +4543,32 @@ var iconmap = {
     "circles": [],
     "rects": []
   },
+  "PreviewEye_s1413": {
+    "width": "14",
+    "height": "15",
+    "viewBox": "0 0 14 15",
+    "fill": "none",
+    "paths": [{
+      "d": "M7 10.125C8.933 10.125 10.5 8.375 10.5 8.375C10.5 8.375 8.933 6.625 7 6.625C5.067 6.625 3.5 8.375 3.5 8.375C3.5 8.375 5.067 10.125 7 10.125Z",
+      "stroke": "#5C5C5C",
+      "strokeWidth": "1.3",
+      "strokeLinejoin": "round"
+    }, {
+      "d": "M7 9.10433C7.48325 9.10433 7.875 8.77787 7.875 8.37516C7.875 7.97246 7.48325 7.646 7 7.646C6.51675 7.646 6.125 7.97246 6.125 8.37516C6.125 8.77787 6.51675 9.10433 7 9.10433Z",
+      "fill": "#5C5C5C",
+      "stroke": "#5C5C5C",
+      "strokeWidth": "1.3",
+      "strokeLinejoin": "round"
+    }, {
+      "d": "M13.125 4.4375H0.875001M13.125 4.4375L13.125 9.95C13.125 10.9301 13.125 11.4201 12.9247 11.7945C12.7486 12.1238 12.4675 12.3915 12.1217 12.5593C11.7286 12.75 11.2141 12.75 10.185 12.75H3.815C2.7859 12.75 2.27135 12.75 1.87829 12.5593C1.53254 12.3915 1.25144 12.1238 1.07528 11.7945C0.875 11.4201 0.875 10.9301 0.875 9.95L0.875001 4.4375M13.125 4.4375C13.125 3.45741 13.125 3.57986 12.9247 3.20552C12.7486 2.87623 12.4675 2.60852 12.1217 2.44074C11.7286 2.25 11.2141 2.25 10.185 2.25L3.815 2.25C2.7859 2.25 2.27136 2.25 1.87829 2.44074C1.53254 2.60852 1.25144 2.87623 1.07528 3.20552C0.875 3.57986 0.875001 3.45741 0.875001 4.4375",
+      "stroke": "#5C5C5C",
+      "strokeWidth": "1.3",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }],
+    "circles": [],
+    "rects": []
+  },
   "PreviewLine_s2013": {
     "width": "20",
     "height": "20",
@@ -6077,6 +6124,7 @@ var ICONS = {
   "FilePlus_s1810": "FilePlus_s1810",
   "FilePlus_s1812": "FilePlus_s1812",
   "FileQuestion02_s1615": "FileQuestion02_s1615",
+  "FileRefresh_s1413": "FileRefresh_s1413",
   "FileRefresh_s1810": "FileRefresh_s1810",
   "FileRefresh_s1812": "FileRefresh_s1812",
   "FileSlash_02_s1810": "FileSlash_02_s1810",
@@ -6158,6 +6206,7 @@ var ICONS = {
   "PlusLines_s1210": "PlusLines_s1210",
   "PlusUpLines_s1413": "PlusUpLines_s1413",
   "Plus_s1610": "Plus_s1610",
+  "PreviewEye_s1413": "PreviewEye_s1413",
   "PreviewLine_s2013": "PreviewLine_s2013",
   "PreviewLine_s2415": "PreviewLine_s2415",
   "PreviewZoom_s2013": "PreviewZoom_s2013",
@@ -8891,7 +8940,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 +8949,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 +9029,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 +9102,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.1",
   "main": "./dist/index.js",
   "author": "zena-42maru",
   "license": "MIT",