@shoplflow/base 0.42.8 → 0.42.10

package/dist/index.cjs

@@ -276,9 +276,17 @@ var StyledAvatarBadge = styled6__default.default.div`
 // src/assets/mocks/AvatarNone.png
 var AvatarNone_default = "./AvatarNone-F5VQQNT7.png";
 var Avatar = (_a) => {
-  var _b = _a, { src, badge } = _b, rest = __objRest(_b, ["src", "badge"]);
+  var _b = _a, { src, badge, fallbackUrl } = _b, rest = __objRest(_b, ["src", "badge", "fallbackUrl"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(StyledAvatarContainer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(StyledAvatar, __spreadProps(__spreadValues({ "data-shoplflow": "Avatar" }, rest), { children: /* @__PURE__ */ jsxRuntime.jsx(StyledAvatarImage, { src: src != null ? src : AvatarNone_default }) })),
+    /* @__PURE__ */ jsxRuntime.jsx(StyledAvatar, __spreadProps(__spreadValues({ "data-shoplflow": "Avatar" }, rest), { children: /* @__PURE__ */ jsxRuntime.jsx(
+      StyledAvatarImage,
+      {
+        src: src != null ? src : fallbackUrl,
+        onError: (e) => {
+          e.currentTarget.src = fallbackUrl != null ? fallbackUrl : AvatarNone_default;
+        }
+      }
+    ) })),
     /* @__PURE__ */ jsxRuntime.jsx(StyledAvatarBadge, { children: badge })
   ] });
 };
@@ -7089,7 +7097,6 @@ var DEFAULT_DEBOUNCE_TIME = 300;
 var SearchBarInput = (_a) => {
   var _b = _a, {
     value,
-    defaultValue,
     onChange,
     onClear,
     placeholder,
@@ -7098,10 +7105,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 +7117,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 +7136,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 +7170,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 +7179,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

@@ -282,6 +282,7 @@ declare const AvatarSizeVariants: {
 };
 declare type AvatarSizeVariantType = $Values<typeof AvatarSizeVariants>;
 interface AvatarProps extends AvatarOptionProps {
+    fallbackUrl?: string;
 }
 interface AvatarOptionProps extends SizeVariantProps<AvatarSizeVariantType>, ImgHTMLAttributes<HTMLImageElement> {
     /**
@@ -290,7 +291,7 @@ interface AvatarOptionProps extends SizeVariantProps<AvatarSizeVariantType>, Img
     badge?: ReactNode;
 }
 
-declare const Avatar: ({ src, badge, ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
+declare const Avatar: ({ src, badge, fallbackUrl, ...rest }: AvatarProps) => JSX.Element;
 
 declare type StackGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackProps & HTMLPropsWithoutRef<T>;
 declare type StackComponentType = ForwardRefExoticComponent<PropsWithoutRef<StackGenericProps> & RefAttributes<HTMLElement>>;
@@ -1683,6 +1684,8 @@ interface SearchBarInputProps {
     onSearch?: (value: string) => void;
     /** 디바운스 시간 (ms) */
     debounceTime?: number;
+    /** 최대 길이 */
+    maxLength?: number;
 }
 /** 검색바 props */
 declare type SearchBarProps = SearchBarBaseProps;

package/dist/index.d.ts

@@ -282,6 +282,7 @@ declare const AvatarSizeVariants: {
 };
 declare type AvatarSizeVariantType = $Values<typeof AvatarSizeVariants>;
 interface AvatarProps extends AvatarOptionProps {
+    fallbackUrl?: string;
 }
 interface AvatarOptionProps extends SizeVariantProps<AvatarSizeVariantType>, ImgHTMLAttributes<HTMLImageElement> {
     /**
@@ -290,7 +291,7 @@ interface AvatarOptionProps extends SizeVariantProps<AvatarSizeVariantType>, Img
     badge?: ReactNode;
 }
 
-declare const Avatar: ({ src, badge, ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
+declare const Avatar: ({ src, badge, fallbackUrl, ...rest }: AvatarProps) => JSX.Element;
 
 declare type StackGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackProps & HTMLPropsWithoutRef<T>;
 declare type StackComponentType = ForwardRefExoticComponent<PropsWithoutRef<StackGenericProps> & RefAttributes<HTMLElement>>;
@@ -1683,6 +1684,8 @@ interface SearchBarInputProps {
     onSearch?: (value: string) => void;
     /** 디바운스 시간 (ms) */
     debounceTime?: number;
+    /** 최대 길이 */
+    maxLength?: number;
 }
 /** 검색바 props */
 declare type SearchBarProps = SearchBarBaseProps;

package/dist/index.js

@@ -249,9 +249,17 @@ var StyledAvatarBadge = styled6.div`
 // src/assets/mocks/AvatarNone.png
 var AvatarNone_default = "./AvatarNone-F5VQQNT7.png";
 var Avatar = (_a) => {
-  var _b = _a, { src, badge } = _b, rest = __objRest(_b, ["src", "badge"]);
+  var _b = _a, { src, badge, fallbackUrl } = _b, rest = __objRest(_b, ["src", "badge", "fallbackUrl"]);
   return /* @__PURE__ */ jsxs(StyledAvatarContainer, { children: [
-    /* @__PURE__ */ jsx(StyledAvatar, __spreadProps(__spreadValues({ "data-shoplflow": "Avatar" }, rest), { children: /* @__PURE__ */ jsx(StyledAvatarImage, { src: src != null ? src : AvatarNone_default }) })),
+    /* @__PURE__ */ jsx(StyledAvatar, __spreadProps(__spreadValues({ "data-shoplflow": "Avatar" }, rest), { children: /* @__PURE__ */ jsx(
+      StyledAvatarImage,
+      {
+        src: src != null ? src : fallbackUrl,
+        onError: (e) => {
+          e.currentTarget.src = fallbackUrl != null ? fallbackUrl : AvatarNone_default;
+        }
+      }
+    ) })),
     /* @__PURE__ */ jsx(StyledAvatarBadge, { children: badge })
   ] });
 };
@@ -7062,7 +7070,6 @@ var DEFAULT_DEBOUNCE_TIME = 300;
 var SearchBarInput = (_a) => {
   var _b = _a, {
     value,
-    defaultValue,
     onChange,
     onClear,
     placeholder,
@@ -7071,10 +7078,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 +7090,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 +7109,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 +7143,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 +7152,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.10",
   "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",