@shoplflow/base 0.42.8 → 0.42.9

package/dist/index.cjs

@@ -7089,7 +7089,6 @@ var DEFAULT_DEBOUNCE_TIME = 300;
 var SearchBarInput = (_a) => {
   var _b = _a, {
     value,
-    defaultValue,
     onChange,
     onClear,
     placeholder,
@@ -7098,10 +7097,10 @@ var SearchBarInput = (_a) => {
     type = "default",
     onSearch,
     debounceTime = type === "default" ? 0 : DEFAULT_DEBOUNCE_TIME,
-    icon = /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.SearchIcon, color: "neutral350", sizeVar: "S" })
+    icon = /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.SearchIcon, color: "neutral350", sizeVar: "S" }),
+    maxLength
   } = _b, rest = __objRest(_b, [
     "value",
-    "defaultValue",
     "onChange",
     "onClear",
     "placeholder",
@@ -7110,16 +7109,11 @@ var SearchBarInput = (_a) => {
     "type",
     "onSearch",
     "debounceTime",
-    "icon"
+    "icon",
+    "maxLength"
   ]);
   const { useFlexibleWidth, isSelected } = useSearchBarContext();
   const [text, setText] = React3.useState("");
-  const convertToString = React3.useCallback((value2) => {
-    if (typeof value2 !== "number") {
-      return typeof value2 === "string" ? value2 : value2.join("");
-    }
-    return String(value2);
-  }, []);
   const debouncedOnChange = React3.useRef(
     utils.debounce(
       (event) => {
@@ -7134,7 +7128,18 @@ var SearchBarInput = (_a) => {
     )
   ).current;
   const handleOnChange = (event) => {
-    debouncedOnChange(event);
+    const newValue = event.target.value;
+    if (maxLength && newValue.length > maxLength) {
+      event.target.value = value === void 0 ? text : String(value);
+      return;
+    }
+    setText(newValue);
+    if (debounceTime === 0 || maxLength && newValue.length === maxLength) {
+      onChange && onChange(event);
+    }
+    if (type === "real-time") {
+      debouncedOnChange(event);
+    }
   };
   const handleOnClear = React3.useCallback(() => {
     setText("");
@@ -7157,19 +7162,6 @@ var SearchBarInput = (_a) => {
   if (useFlexibleWidth && !isSelected) {
     _placeholder = flexiblePlaceholder;
   }
-  const getInitialValue = React3.useCallback(() => {
-    if (value !== void 0) {
-      return convertToString(value);
-    }
-    if (defaultValue !== void 0) {
-      return convertToString(defaultValue);
-    }
-    return "";
-  }, [convertToString, defaultValue, value]);
-  React3.useEffect(() => {
-    const initialValue = getInitialValue();
-    setText(initialValue);
-  }, [getInitialValue]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     type === "default" && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { styleVar: "GHOST", sizeVar: "S", onClick: handleIconClick, "aria-label": "\uAC80\uC0C9", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.SearchIcon, color: text ? "neutral700" : "neutral350", sizeVar: "S" }) }),
     type === "real-time" && icon,
@@ -7179,7 +7171,7 @@ var SearchBarInput = (_a) => {
         placeholder: _placeholder,
         onChange: handleOnChange,
         onKeyDown: handleKeyDown,
-        value: text,
+        value: value === void 0 ? text : value,
         onClear: handleOnClear,
         width: "100%",
         disabled,

package/dist/index.d.cts

@@ -1683,6 +1683,8 @@ interface SearchBarInputProps {
     onSearch?: (value: string) => void;
     /** 디바운스 시간 (ms) */
     debounceTime?: number;
+    /** 최대 길이 */
+    maxLength?: number;
 }
 /** 검색바 props */
 declare type SearchBarProps = SearchBarBaseProps;

package/dist/index.d.ts

@@ -1683,6 +1683,8 @@ interface SearchBarInputProps {
     onSearch?: (value: string) => void;
     /** 디바운스 시간 (ms) */
     debounceTime?: number;
+    /** 최대 길이 */
+    maxLength?: number;
 }
 /** 검색바 props */
 declare type SearchBarProps = SearchBarBaseProps;

package/dist/index.js

@@ -7062,7 +7062,6 @@ var DEFAULT_DEBOUNCE_TIME = 300;
 var SearchBarInput = (_a) => {
   var _b = _a, {
     value,
-    defaultValue,
     onChange,
     onClear,
     placeholder,
@@ -7071,10 +7070,10 @@ var SearchBarInput = (_a) => {
     type = "default",
     onSearch,
     debounceTime = type === "default" ? 0 : DEFAULT_DEBOUNCE_TIME,
-    icon = /* @__PURE__ */ jsx(Icon_default, { iconSource: SearchIcon, color: "neutral350", sizeVar: "S" })
+    icon = /* @__PURE__ */ jsx(Icon_default, { iconSource: SearchIcon, color: "neutral350", sizeVar: "S" }),
+    maxLength
   } = _b, rest = __objRest(_b, [
     "value",
-    "defaultValue",
     "onChange",
     "onClear",
     "placeholder",
@@ -7083,16 +7082,11 @@ var SearchBarInput = (_a) => {
     "type",
     "onSearch",
     "debounceTime",
-    "icon"
+    "icon",
+    "maxLength"
   ]);
   const { useFlexibleWidth, isSelected } = useSearchBarContext();
   const [text, setText] = useState("");
-  const convertToString = useCallback((value2) => {
-    if (typeof value2 !== "number") {
-      return typeof value2 === "string" ? value2 : value2.join("");
-    }
-    return String(value2);
-  }, []);
   const debouncedOnChange = useRef(
     debounce(
       (event) => {
@@ -7107,7 +7101,18 @@ var SearchBarInput = (_a) => {
     )
   ).current;
   const handleOnChange = (event) => {
-    debouncedOnChange(event);
+    const newValue = event.target.value;
+    if (maxLength && newValue.length > maxLength) {
+      event.target.value = value === void 0 ? text : String(value);
+      return;
+    }
+    setText(newValue);
+    if (debounceTime === 0 || maxLength && newValue.length === maxLength) {
+      onChange && onChange(event);
+    }
+    if (type === "real-time") {
+      debouncedOnChange(event);
+    }
   };
   const handleOnClear = useCallback(() => {
     setText("");
@@ -7130,19 +7135,6 @@ var SearchBarInput = (_a) => {
   if (useFlexibleWidth && !isSelected) {
     _placeholder = flexiblePlaceholder;
   }
-  const getInitialValue = useCallback(() => {
-    if (value !== void 0) {
-      return convertToString(value);
-    }
-    if (defaultValue !== void 0) {
-      return convertToString(defaultValue);
-    }
-    return "";
-  }, [convertToString, defaultValue, value]);
-  useEffect(() => {
-    const initialValue = getInitialValue();
-    setText(initialValue);
-  }, [getInitialValue]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     type === "default" && /* @__PURE__ */ jsx(IconButton_default, { styleVar: "GHOST", sizeVar: "S", onClick: handleIconClick, "aria-label": "\uAC80\uC0C9", children: /* @__PURE__ */ jsx(Icon_default, { iconSource: SearchIcon, color: text ? "neutral700" : "neutral350", sizeVar: "S" }) }),
     type === "real-time" && icon,
@@ -7152,7 +7144,7 @@ var SearchBarInput = (_a) => {
         placeholder: _placeholder,
         onChange: handleOnChange,
         onKeyDown: handleKeyDown,
-        value: text,
+        value: value === void 0 ? text : value,
         onClear: handleOnClear,
         width: "100%",
         disabled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.42.8",
+  "version": "0.42.9",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -91,8 +91,8 @@
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
     "@shoplflow/hada-assets": "^0.1.7",
-    "@shoplflow/utils": "^0.7.0",
-    "@shoplflow/shopl-assets": "^0.12.22"
+    "@shoplflow/shopl-assets": "^0.12.22",
+    "@shoplflow/utils": "^0.7.0"
   },
   "scripts": {
     "type-check": "tsc --noEmit",