@farmzone/fz-react-ui 1.1.5 → 1.1.6

package/dist/index.d.cts

@@ -91,6 +91,8 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
     showPasswordToggle?: boolean;
+    clearable?: boolean;
+    onClear?: () => void;
 }
 declare function Input(props: InputProps): react.JSX.Element;
 
@@ -194,6 +196,9 @@ interface SelectOptionType {
     label: string | ReactNode;
     value: string;
     disabled?: boolean;
+    icon?: ReactNode;
+    avatarUrl?: string;
+    avatarAlt?: string;
 }
 
 interface SelectProps<T extends SelectOptionType = SelectOptionType> extends Omit<React.ComponentProps<typeof Select$1>, "onValueChange" | "value" | "defaultValue"> {
@@ -973,6 +978,8 @@ type InputOption<P> = BaseOption<P> & {
     placeholder?: string;
     /** 입력창 왼쪽에 돋보기 아이콘을 보여줄지 여부. 기본값 true. */
     leftIcon?: boolean;
+    /** 입력값이 있을 때 x(clear) 버튼을 보여줄지 여부. 기본값 true. */
+    canReset?: boolean;
 };
 type SelectOption<P> = BaseOption<P> & {
     type: "select";

package/dist/index.d.ts

@@ -91,6 +91,8 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
     showPasswordToggle?: boolean;
+    clearable?: boolean;
+    onClear?: () => void;
 }
 declare function Input(props: InputProps): react.JSX.Element;
 
@@ -194,6 +196,9 @@ interface SelectOptionType {
     label: string | ReactNode;
     value: string;
     disabled?: boolean;
+    icon?: ReactNode;
+    avatarUrl?: string;
+    avatarAlt?: string;
 }
 
 interface SelectProps<T extends SelectOptionType = SelectOptionType> extends Omit<React.ComponentProps<typeof Select$1>, "onValueChange" | "value" | "defaultValue"> {
@@ -973,6 +978,8 @@ type InputOption<P> = BaseOption<P> & {
     placeholder?: string;
     /** 입력창 왼쪽에 돋보기 아이콘을 보여줄지 여부. 기본값 true. */
     leftIcon?: boolean;
+    /** 입력값이 있을 때 x(clear) 버튼을 보여줄지 여부. 기본값 true. */
+    canReset?: boolean;
 };
 type SelectOption<P> = BaseOption<P> & {
     type: "select";

package/dist/index.js

@@ -6,7 +6,7 @@ import * as React6 from 'react';
 import React6__default, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useCallback, memo, createContext, useContext, useMemo, useId, useLayoutEffect, useDeferredValue, Fragment as Fragment$1 } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { ChevronLeft, ChevronRight, FileText, ZoomIn, ZoomOut, RotateCcw, RotateCw, Download, X, Heading1, Heading2, Heading3, Heading4, Bold, Italic, Strikethrough, Code, AlignLeft, AlignCenter, AlignRight, List, ListOrdered, Quote, FileCode, Table as Table$1, Plus, Minus, Trash2, EyeOff, Eye, Check, CircleX, ChevronDown, Calendar, CircleIcon, ChevronUp, Search, TriangleAlert, Info, Pencil, BadgePlus, FileSearch2, Upload, FileUp, PanelRightClose, PanelLeftClose, ChevronFirst, ChevronLast } from 'lucide-react';
+import { ChevronLeft, ChevronRight, FileText, ZoomIn, ZoomOut, RotateCcw, RotateCw, Download, X, Heading1, Heading2, Heading3, Heading4, Bold, Italic, Strikethrough, Code, AlignLeft, AlignCenter, AlignRight, List, ListOrdered, Quote, FileCode, Table as Table$1, Plus, Minus, Trash2, CircleX, EyeOff, Eye, Check, ChevronDown, Calendar, CircleIcon, ChevronUp, Search, TriangleAlert, Info, Pencil, BadgePlus, FileSearch2, Upload, FileUp, PanelRightClose, PanelLeftClose, ChevronFirst, ChevronLast } from 'lucide-react';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as RadixSlider from '@radix-ui/react-slider';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -445,6 +445,8 @@ function Input2(props) {
     leftIcon,
     rightIcon,
     showPasswordToggle = true,
+    clearable = false,
+    onClear,
     onChange,
     ...rest
   } = props;
@@ -474,7 +476,16 @@ function Input2(props) {
   const shouldShowPasswordToggle = type === "password" && showPasswordToggle;
   const actualType = type === "password" && showPassword ? "text" : type;
   const handlePasswordToggle = () => setShowPassword((prev) => !prev);
-  const finalRightIcon = rightIcon || (shouldShowPasswordToggle ? /* @__PURE__ */ jsx(
+  const handleClear = () => onClear?.();
+  const shouldShowClearButton = clearable && !disabled && typeof rest.value === "string" && rest.value.length > 0;
+  const finalRightIcon = rightIcon || (shouldShowClearButton ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      onClick: handleClear,
+      className: "text-muted-foreground hover:text-foreground cursor-pointer transition-colors",
+      children: /* @__PURE__ */ jsx(CircleX, { className: "h-4 w-4" })
+    }
+  ) : null) || (shouldShowPasswordToggle ? /* @__PURE__ */ jsx(
     "div",
     {
       onClick: handlePasswordToggle,
@@ -940,6 +951,29 @@ function SelectScrollDownButton({
     }
   );
 }
+function SelectOptionVisual(props) {
+  const { icon, avatarUrl, avatarAlt, fallbackLabel } = props;
+  const [hasAvatarError, setHasAvatarError] = useState(false);
+  const handleAvatarError = () => setHasAvatarError(true);
+  if (avatarUrl && !hasAvatarError) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: avatarUrl,
+        alt: avatarAlt ?? "",
+        className: "size-5 shrink-0 rounded-full object-cover",
+        onError: handleAvatarError
+      }
+    );
+  }
+  if (avatarUrl && hasAvatarError) {
+    return /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-gray-200 text-[10px] font-medium text-gray-500", children: fallbackLabel?.charAt(0).toUpperCase() ?? "?" });
+  }
+  if (icon) {
+    return /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center text-gray-500", children: icon });
+  }
+  return null;
+}
 
 // src/components/Select/config/default.ts
 var SELECT_BORDER_COLORS = {
@@ -1031,7 +1065,18 @@ function Select2(props) {
                     itemClassName,
                     option.disabled && cn("opacity-50 cursor-not-allowed text-gray-300 bg-white", disabledItemClassName)
                   ),
-                  children: option.label
+                  children: /* @__PURE__ */ jsxs("span", { className: "flex w-full min-w-0 items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      SelectOptionVisual,
+                      {
+                        icon: option.icon,
+                        avatarUrl: option.avatarUrl,
+                        avatarAlt: option.avatarAlt,
+                        fallbackLabel: typeof option.label === "string" ? option.label : void 0
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label })
+                  ] })
                 },
                 String(option.value)
               )) })
@@ -7847,6 +7892,9 @@ function PageFilter(props) {
   const handleInputChange = (key) => (e) => {
     onChange({ [key]: e.target.value });
   };
+  const handleInputClear = (key) => () => {
+    onChange({ [key]: "" });
+  };
   const handleSelectChange = (key, autoSubmit) => (value) => {
     onChange({ [key]: value });
     if (autoSubmit) pendingAutoSubmitRef.current = { key, value };
@@ -7891,6 +7939,8 @@ function PageFilter(props) {
               if (e.key === "Enter") handleSubmit();
             },
             leftIcon: option.leftIcon !== false ? /* @__PURE__ */ jsx(Search, { size: 16 }) : void 0,
+            clearable: option.canReset ?? true,
+            onClear: handleInputClear(optionKey),
             className: option.className
           }
         ) }, String(optionKey));