@mamrp/components 1.7.56 → 1.7.57

package/dist/selectors/index.d.mts

@@ -167,12 +167,14 @@ interface SeacrchableSelectChipProps<T extends BaseOption$1 = BaseOption$1> {
     name: string;
     control: Control<any>;
     label?: string;
+    placeholder?: string;
     data?: T[];
     inputValue: string;
     isLoading?: boolean;
     disabled?: boolean;
     size?: "small" | "medium";
     disableClearable?: boolean;
+    variant?: "outlined" | "filled" | "standard";
     onChangeHandler?: (value: any, onChange: (data: any) => void) => void;
     valueHandler?: (value: any) => any;
     onFilterOptions: (inputValue: string) => void;
@@ -229,7 +231,7 @@ interface SeacrchableSelectChipProps<T extends BaseOption$1 = BaseOption$1> {
  * )}
  * ```
  */
-declare function SearchableSelector<T extends BaseOption$1 = BaseOption$1>({ name, control, label, data, inputValue, isLoading, disabled, size, disableClearable, onChangeHandler, valueHandler, onFilterOptions, renderOption, }: SeacrchableSelectChipProps<T>): React.JSX.Element;
+declare function SearchableSelector<T extends BaseOption$1 = BaseOption$1>({ name, control, label, placeholder, data, inputValue, isLoading, disabled, size, disableClearable, variant, onChangeHandler, valueHandler, onFilterOptions, renderOption, }: SeacrchableSelectChipProps<T>): React.JSX.Element;
 
 interface BaseOption {
     key: number | string | "false" | true;

package/dist/selectors/index.d.ts

@@ -167,12 +167,14 @@ interface SeacrchableSelectChipProps<T extends BaseOption$1 = BaseOption$1> {
     name: string;
     control: Control<any>;
     label?: string;
+    placeholder?: string;
     data?: T[];
     inputValue: string;
     isLoading?: boolean;
     disabled?: boolean;
     size?: "small" | "medium";
     disableClearable?: boolean;
+    variant?: "outlined" | "filled" | "standard";
     onChangeHandler?: (value: any, onChange: (data: any) => void) => void;
     valueHandler?: (value: any) => any;
     onFilterOptions: (inputValue: string) => void;
@@ -229,7 +231,7 @@ interface SeacrchableSelectChipProps<T extends BaseOption$1 = BaseOption$1> {
  * )}
  * ```
  */
-declare function SearchableSelector<T extends BaseOption$1 = BaseOption$1>({ name, control, label, data, inputValue, isLoading, disabled, size, disableClearable, onChangeHandler, valueHandler, onFilterOptions, renderOption, }: SeacrchableSelectChipProps<T>): React.JSX.Element;
+declare function SearchableSelector<T extends BaseOption$1 = BaseOption$1>({ name, control, label, placeholder, data, inputValue, isLoading, disabled, size, disableClearable, variant, onChangeHandler, valueHandler, onFilterOptions, renderOption, }: SeacrchableSelectChipProps<T>): React.JSX.Element;
 
 interface BaseOption {
     key: number | string | "false" | true;

package/dist/selectors/index.js

@@ -401,12 +401,14 @@ function SearchableSelector({
   name,
   control,
   label,
+  placeholder,
   data,
   inputValue,
   isLoading,
   disabled = false,
   size = "medium",
   disableClearable = false,
+  variant = "outlined",
   onChangeHandler,
   valueHandler,
   onFilterOptions,
@@ -515,7 +517,9 @@ function SearchableSelector({
               import_TextField3.default,
               {
                 ...params,
+                variant,
                 label,
+                placeholder,
                 error: !!error,
                 helperText: error?.message,
                 inputRef: ref,

package/dist/selectors/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/selectors/index.ts","../../react-shim.js","../../src/selectors/multi-check-selector/index.tsx","../../src/selectors/multiple-selector/index.tsx","../../src/selectors/searchable-selector/index.tsx","../../src/selectors/single-client-selector/index.tsx"],"sourcesContent":["export { default as MultiCheckSelector } from \"./multi-check-selector\";\nexport { default as MultipleSelector } from \"./multiple-selector\";\nexport { default as SearchableSelector } from \"./searchable-selector\";\nexport { default as SingleClientSelector } from \"./single-client-selector\";\n","import * as React from \"react\";\nexport { React };\n","import Autocomplete from \"@mui/material/Autocomplete\";\nimport TextField, { TextFieldVariants } from \"@mui/material/TextField\";\nimport * as React from \"react\";\nimport { Control, Controller } from \"react-hook-form\";\nimport { Checkbox, CircularProgress, Popper } from \"@mui/material\";\nimport { FaCheckSquare } from \"react-icons/fa\";\nimport { RiCheckboxBlankLine } from \"react-icons/ri\";\nimport { MdSelectAll } from \"react-icons/md\";\nimport { RiDeleteBin6Line } from \"react-icons/ri\";\ninterface OptionType {\n  title: string;\n  key: string | number;\n  [x: string]: any; // برای پشتیبانی از فیلدهای اضافی\n}\nexport interface AutocompleteRenderOptionState {\n  inputValue: string;\n  index: number;\n  selected: boolean;\n}\ninterface MultipleSelectChipProps<T extends OptionType> {\n  name: string;\n  control: Control<any>;\n  label?: string;\n  data?: T[];\n  isLoading?: boolean;\n  disabled?: boolean;\n  size?: \"small\" | \"medium\";\n  disableClearable?: boolean;\n  variant?: TextFieldVariants;\n  placeholder?: string;\n  renderOption?: (\n    props: React.HTMLAttributes<HTMLLIElement>,\n    option: T,\n    state: AutocompleteRenderOptionState\n  ) => React.ReactNode;\n}\n/**\n * 📦 MultipleSelector — کامپوننت انتخاب چندگزینه‌ای پیشرفته\n *\n * @component MultipleSelector\n *\n * @template T — نوع داده‌ی گزینه‌ها که باید شامل فیلدهای `title` و `key` باشد.\n *\n * @param {string} name - نام فیلد در فرم (برای ثبت در react-hook-form).\n * @param {Control<any>} control - کنترل فرم از کتابخانه react-hook-form.\n * @param {string} [label] - برچسب ورودی.\n * @param {T[]} [data] - آرایه‌ای از گزینه‌ها که هر کدام باید شامل `title` (نمایش) و `key` (شناسه یکتا) باشد.\n * @param {boolean} [isLoading=false] - حالت لودینگ برای نمایش اسپینر در ورودی.\n * @param {boolean} [disabled=false] - غیرفعال‌کردن ورودی.\n * @param {\"small\" | \"medium\"} [size=\"medium\"] - سایز ورودی MUI Autocomplete.\n * @param {boolean} [clear=false] - اگر `false` باشد، قابلیت پاک کردن کامل (Clearable) غیرفعال می‌شود.\n * @param {(props: React.HTMLAttributes<HTMLLIElement>, option: T, state: AutocompleteRenderOptionState) => React.ReactNode} [renderOption] - تابع سفارشی برای رندر هر آیتم در لیست انتخاب.\n *\n * @description\n * این کامپوننت یک `Autocomplete` چندگزینه‌ای با قابلیت‌های زیر است:\n * - اتصال مستقیم به `react-hook-form` (با استفاده از Controller)\n * - انتخاب همه (`انتخاب همه`) یا پاک کردن همه (`پاک کردن همه`)\n * - نمایش تعداد آیتم‌های انتخاب شده به جای تگ‌های جداگانه\n * - پشتیبانی از حالت لودینگ و غیرفعال بودن\n * - امکان سفارشی‌سازی رندر آیتم‌ها (`renderOption`)\n * - آیکون‌های سفارشی برای انتخاب‌ها و گزینه‌های ویژه\n * - جلوگیری از بستن لیست هنگام انتخاب آیتم‌ها (`disableCloseOnSelect`)\n * - مدیریت موقعیت Popper با MUI modifiers\n *\n * @returns {Array<string | number>} آرایه‌ای از کلیدهای آیتم‌های انتخاب شده.\n *\n * @example\n * ```tsx\n * import { useForm, Controller } from \"react-hook-form\";\n *\n * type MyOption = { title: string; key: number };\n *\n * const options: MyOption[] = [\n *   { title: \"محصول ۱\", key: 1 },\n *   { title: \"محصول ۲\", key: 2 },\n * ];\n *\n * export default function MyForm() {\n *   const { control, handleSubmit } = useForm({ defaultValues: { productIds: [] } });\n *\n *   const onSubmit = (data: any) => {\n *     console.log(\"انتخاب شده‌ها:\", data.productIds);\n *   };\n *\n *   return (\n *     <form onSubmit={handleSubmit(onSubmit)}>\n *       <MultipleSelector<MyOption>\n *         name=\"productIds\"\n *         label=\"محصولات\"\n *         control={control}\n *         data={options}\n *         isLoading={false}\n *         size=\"small\"\n *         renderOption={(props, option, state) => (\n *           <li {...props} key={option.key}>\n *             <strong style={{ color: state.selected ? \"green\" : \"black\" }}>\n *               {option.title}\n *             </strong>\n *           </li>\n *         )}\n *       />\n *       <button type=\"submit\">ثبت</button>\n *     </form>\n *   );\n * }\n * ```\n */\nexport default function MultiCheckSelector<T extends OptionType>({\n  name,\n  control,\n  label,\n  data,\n  isLoading,\n  disabled = false,\n  size = \"medium\",\n  disableClearable = false,\n  renderOption,\n  variant,\n  placeholder,\n}: MultipleSelectChipProps<T>) {\n  const dataOptions =\n    data?.map((value) => ({\n      ...value,\n      key: value.key || `key_${Math.random()}`,\n    })) || [];\n\n  const combinedOptions =\n    dataOptions.length > 0\n      ? [\n        { title: \"انتخاب همه\", key: \"All\" } as T,\n        { title: \"پاک کردن همه\", key: \"ClearAll\" } as T,\n        ...dataOptions,\n      ]\n      : [...dataOptions];\n\n  const handleChange = (\n    _event: any,\n    selected: any,\n    onChange: (value: any) => void\n  ) => {\n    if (selected.some((item: any) => item.key === \"All\")) {\n      const allItems = [...dataOptions];\n      onChange(allItems.map((item) => item.key));\n    } else if (selected.some((item: any) => item.key === \"ClearAll\")) {\n      onChange([]);\n    } else {\n      onChange(selected.map((item: any) => item.key));\n    }\n  };\n  const icon = <RiCheckboxBlankLine size={20} />;\n  const checkedIcon = <FaCheckSquare size={20} />;\n\n  return (\n    <Controller\n      name={name}\n      control={control}\n      render={({ field: { onChange, value, ref }, fieldState: { error } }) => {\n        const computedValue = React.useMemo(() => {\n          if (Array.isArray(value) && dataOptions.length > 0) {\n            return dataOptions.filter((option: any) =>\n              value.includes(option.key)\n            );\n          }\n          return [];\n        }, [value, dataOptions]);\n\n        // کنترل باز و بسته شدن آتوکامپلیت\n        const autocompleteRef = React.useRef<any>(null);\n        const [open, setOpen] = React.useState(false);\n        const handleOpen = () => setOpen(true);\n        const handleClose = () => setOpen(false);\n        return (\n          <Autocomplete\n            multiple\n            disableClearable={disableClearable}\n            disabled={disabled || isLoading}\n            size={size}\n            disableCloseOnSelect\n            options={combinedOptions}\n            sx={{ width: \"100%\" }}\n            noOptionsText=\"داده‌ای برای نمایش وجود ندارد\"\n            value={computedValue}\n            onChange={(event, value) =>\n              handleChange(event, value as T[], onChange)\n            }\n            isOptionEqualToValue={(option, value) =>\n              String(option.key) === String(value?.key)\n            }\n            getOptionLabel={(option) => option.title}\n            loading={isLoading}\n            loadingText=\"در حال بارگذاری...\"\n            open={open}\n            onOpen={handleOpen}\n            onClose={handleClose}\n            ref={autocompleteRef}\n            renderOption={(props, option, state) => {\n              if (renderOption) {\n                return renderOption(props, option, state);\n              }\n              // آیکون مناسب برای گزینه‌های انتخاب همه و پاک کردن همه\n              let iconElem = null;\n              if (option.key === \"All\") {\n                iconElem = (\n                  <MdSelectAll\n                    size={18}\n                    style={{ marginLeft: 6, color: \"#2563eb\" }}\n                  />\n                );\n              } else if (option.key === \"ClearAll\") {\n                iconElem = (\n                  <RiDeleteBin6Line\n                    size={18}\n                    style={{ marginLeft: 6, color: \"#ef4444\" }}\n                  />\n                );\n              }\n              return (\n                <li\n                  {...props}\n                  key={`${option.key}`}\n                  style={{ margin: 5, borderRadius: 3 }}\n                >\n                  <div\n                    style={{\n                      display: \"flex\",\n                      flexDirection: \"row\",\n                      width: \"100%\",\n                      alignItems: \"center\",\n                    }}\n                  >\n                    {option.key === \"All\" || option.key === \"ClearAll\" ? (\n                      iconElem\n                    ) : (\n                      <Checkbox\n                        icon={icon}\n                        checkedIcon={checkedIcon}\n                        style={{ marginLeft: 8 }}\n                        checked={state.selected}\n                        sx={{ margin: 0, padding: 0 }}\n                      />\n                    )}\n                    <div style={{ flexDirection: \"row\", width: \"100%\" }}>\n                      <div style={{ fontWeight: \"normal\" }}>{option.title}</div>\n                    </div>\n                  </div>\n                </li>\n              );\n            }}\n            renderTags={(value) => {\n              if (value.length === 0) return null;\n              const total = dataOptions.length;\n              const tagText =\n                value.length === total\n                  ? `${value.length} مورد انتخاب شده`\n                  : `${value.length} مورد از ${total} انتخاب شده`;\n\n              return (\n                <div\n                  style={{\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    height: \"auto\",\n                    minHeight: size === \"small\" ? \"24px\" : \"32px\",\n                    maxHeight: size === \"small\" ? \"32px\" : \"40px\",\n                    overflow: \"hidden\",\n                    whiteSpace: \"nowrap\",\n                    textOverflow: \"ellipsis\",\n                    width: \"100%\",\n                    maxWidth: \"calc(100% - 50px)\", // جا برای آیکون‌های پایانی\n                  }}\n                  onClick={handleOpen}\n                >\n                  <span\n                    style={{\n                      fontWeight: 600,\n                      fontSize: size === \"small\" ? 13 : 15,\n                      overflow: \"hidden\",\n                      textOverflow: \"ellipsis\",\n                      whiteSpace: \"nowrap\",\n                      display: \"block\",\n                      width: \"100%\",\n                    }}\n                    title={tagText} // نمایش متن کامل در tooltip\n                  >\n                    {tagText}\n                  </span>\n                </div>\n              );\n            }}\n            slots={{ popper: Popper }}\n            slotProps={{\n              popper: {\n                modifiers: [\n                  {\n                    name: \"preventOverflow\",\n                    options: {\n                      boundary: \"window\",\n                      rootBoundary: \"viewport\",\n                      altBoundary: true,\n                      padding: 10,\n                    },\n                  },\n                  {\n                    name: \"flip\",\n                    options: {\n                      fallbackPlacements: [\"top\", \"bottom\"],\n                    },\n                  },\n                ],\n              },\n            }}\n            renderInput={(params) => (\n              <TextField\n                {...params}\n                label={label}\n                error={!!error}\n                variant={variant}\n                placeholder={placeholder}\n                helperText={error?.message}\n                inputRef={ref}\n                InputLabelProps={{ shrink: true }}\n                InputProps={{\n                  ...params.InputProps,\n                  endAdornment: (\n                    <React.Fragment>\n                      {isLoading ? (\n                        <CircularProgress color=\"primary\" size={20} />\n                      ) : null}\n                      {params.InputProps.endAdornment}\n                    </React.Fragment>\n                  ),\n                }}\n              />\n            )}\n          />\n        );\n      }}\n    />\n  );\n}\n// ...existing code...\n","import Autocomplete from \"@mui/material/Autocomplete\";\nimport TextField from \"@mui/material/TextField\";\nimport * as React from \"react\";\nimport { Control, Controller } from \"react-hook-form\";\nimport { CircularProgress, Popper } from \"@mui/material\";\n\ninterface OptionType {\n  title: string;\n  key: string | number;\n  [x: string]: any; // برای پشتیبانی از فیلدهای اضافی\n}\n\ninterface MultipleSelectChipProps<T extends OptionType> {\n  name: string;\n  control: Control<any>;\n  label?: string;\n  data?: T[];\n  isLoading?: boolean;\n  disabled?: boolean;\n  size?: \"small\" | \"medium\";\n  disableClearable?: boolean;\n\n  renderOption?: (\n    props: React.HTMLAttributes<HTMLLIElement>,\n    option: T\n  ) => React.ReactNode;\n}\n/**\n * 📦 کامپوننت انتخاب چند گزینه‌ای با پشتیبانی از react-hook-form و MUI Autocomplete\n *\n * @component MultipleSelector\n *\n * @param {string} name - نام فیلدی که در فرم ثبت می‌شود.\n * @param {string} [label] - برچسب نمایشی برای فیلد.\n * @param {Control<any>} control - کنترل فرم از react-hook-form.\n * @param {{ title: string; key: string | number }[]} [data] - لیستی از گزینه‌ها شامل `title` (متن) و `key` (مقدار).\n * @param {boolean} [isLoading=false] - آیا داده‌ها در حال بارگذاری هستند.\n * @param {boolean} [disabled=false] - غیرفعال‌سازی ورودی.\n * @param {\"small\" | \"medium\"} [size=\"medium\"] - سایز ورودی.\n * @param {boolean} [disableClearable=false] - آیا امکان پاک کردن وجود دارد یا نه.\n * @param {string} [tooltip] - متن راهنما هنگام هاور.\n * @param {(props, option) => React.ReactNode} [renderOption] - تابعی سفارشی برای رندر آیتم‌ها در لیست.\n *\n * @returns {Array<{ key: string | number }>} لیستی از آیتم‌های انتخاب‌شده ( فقط آیدی‌ها).\n *\n * @example\n * ```tsx\n * <MultipleSelector<{title:string; key:number;}>\n *   name=\"productIds\"\n *   label=\"محصولات\"\n *   control={control}\n *   data={[{ title: \"محصول ۱\", key: 1 }, { title: \"محصول ۲\", key: 2 }]}\n * />\n * ```\n *\n * @description\n * کامپوننتی چندانتخابی با قابلیت انتخاب همه‌ی موارد، سفارشی‌سازی گزینه‌ها،\n * نمایش راهنمای هاور، و بازگرداندن لیست کامل از آبجکت‌های انتخاب‌شده.\n *\n * برای سفارشی‌سازی نحوه نمایش آیتم‌ها:\n * ```tsx\n * renderOption={(props, option) => (\n *   <li {...props} key={`${option.key}`}>\n *     <span style={{ color: \"green\" }}>{option.title}</span>\n *   </li>\n * )}\n * ```\n */\n\nexport default function MultipleSelector<T extends OptionType>({\n  name,\n  control,\n  label,\n  data,\n  isLoading,\n  disabled = false,\n  size = \"medium\",\n  disableClearable = false,\n  renderOption,\n}: MultipleSelectChipProps<T>) {\n  const dataOptions =\n    data?.map((value) => ({\n      ...value,\n      key: value.key || `key_${Math.random()}`,\n    })) || [];\n\n  const combinedOptions =\n    dataOptions.length > 0\n      ? [{ title: \"انتخاب همه\", key: \"All\" } as T, ...dataOptions]\n      : [...dataOptions];\n\n  const handleChange = (\n    _event: any,\n    selected: any,\n    onChange: (value: any) => void\n  ) => {\n    if (selected.some((item: any) => item.key === \"All\")) {\n      const allItems = [...dataOptions];\n      onChange(allItems.map((item) => item.key));\n    } else {\n      onChange(selected.map((item: any) => item.key));\n    }\n  };\n  return (\n    <Controller\n      name={name}\n      control={control}\n      render={({ field: { onChange, value, ref }, fieldState: { error } }) => {\n        const computedValue = React.useMemo(() => {\n          if (Array.isArray(value) && dataOptions.length > 0) {\n            return dataOptions.filter((option: any) =>\n              value.includes(option.key)\n            );\n          }\n          return [];\n        }, [value, dataOptions]);\n\n        return (\n          <Autocomplete\n            multiple\n            disableClearable={disableClearable}\n            disabled={disabled || isLoading}\n            size={size}\n            disableCloseOnSelect\n            options={combinedOptions}\n            sx={{ width: \"100%\" }}\n            noOptionsText=\"داده‌ای برای نمایش وجود ندارد\"\n            value={computedValue}\n            onChange={(event, value) =>\n              handleChange(event, value as T[], onChange)\n            }\n            isOptionEqualToValue={(option, value) =>\n              String(option.key) === String(value?.key)\n            }\n            getOptionLabel={(option) => option.title}\n            loading={isLoading}\n            loadingText=\"در حال بارگذاری...\"\n            renderOption={(props, option) => {\n              if (renderOption) {\n                return renderOption(props, option);\n              }\n              return (\n                <li\n                  {...props}\n                  key={`${option.key}`}\n                  style={{ margin: 5, borderRadius: 3 }}\n                >\n                  <div\n                    style={{\n                      display: \"flex\",\n                      flexDirection: \"row\",\n                      width: \"100%\",\n                    }}\n                  >\n                    <div style={{ flexDirection: \"column\", width: \"100%\" }}>\n                      <div style={{ fontWeight: \"normal\" }}>{option.title}</div>\n                    </div>\n                  </div>\n                </li>\n              );\n            }}\n            slots={{ popper: Popper }}\n            slotProps={{\n              popper: {\n                modifiers: [\n                  {\n                    name: \"preventOverflow\",\n                    options: {\n                      boundary: \"window\",\n                      rootBoundary: \"viewport\",\n                      altBoundary: true,\n                      padding: 10,\n                    },\n                  },\n                  {\n                    name: \"flip\",\n                    options: {\n                      fallbackPlacements: [\"top\", \"bottom\"],\n                    },\n                  },\n                ],\n              },\n            }}\n            renderInput={(params) => (\n              <TextField\n                {...params}\n                label={label}\n                error={!!error}\n                helperText={error?.message}\n                inputRef={ref}\n                InputLabelProps={{ shrink: true }}\n                InputProps={{\n                  ...params.InputProps,\n                  endAdornment: (\n                    <React.Fragment>\n                      {isLoading ? (\n                        <CircularProgress color=\"primary\" size={20} />\n                      ) : null}\n                      {params.InputProps.endAdornment}\n                    </React.Fragment>\n                  ),\n                }}\n              />\n            )}\n          />\n        );\n      }}\n    />\n  );\n}\n","import { CircularProgress, Popper } from \"@mui/material\";\nimport Autocomplete from \"@mui/material/Autocomplete\";\nimport TextField from \"@mui/material/TextField\";\nimport * as React from \"react\";\nimport { Control, Controller } from \"react-hook-form\";\n\ninterface BaseOption {\n  key: number | string | \"false\" | true;\n  title: string | number;\n  [x: string]: any;\n}\n\ninterface SeacrchableSelectChipProps<T extends BaseOption = BaseOption> {\n  name: string;\n  control: Control<any>;\n  label?: string;\n  data?: T[];\n  inputValue:string;\n  isLoading?: boolean;\n  disabled?: boolean;\n  size?: \"small\" | \"medium\";\n  disableClearable?: boolean;\n  onChangeHandler?: (value: any, onChange: (data: any) => void) => void;\n  valueHandler?: (value: any) => any;\n  onFilterOptions: (inputValue: string) => void;\n  renderOption?: (\n    props: React.HTMLAttributes<HTMLLIElement>,\n    option: T\n  ) => React.ReactNode;\n}\n/**\n * 🔍 کامپوننت انتخاب تکی با قابلیت جست‌وجو، پشتیبانی از react-hook-form و MUI Autocomplete\n *\n * @component SeacrchableSelector\n *\n * @template T - نوع گزینه‌ها که باید شامل `key` و `title` باشد.\n *\n * @param {string} name - نام فیلدی که در فرم ثبت می‌شود.\n * @param {string} [label] - برچسب نمایشی برای فیلد.\n * @param {Control<any>} control - کنترل فرم از `react-hook-form`.\n * @param {T[]} [data] - لیستی از گزینه‌ها شامل `key` و `title` به عنوان مقدار و متن نمایشی.\n * @param {boolean} [isLoading=false] - وضعیت بارگذاری (مثلاً هنگام فراخوانی API).\n * @param {boolean} [disabled=false] - غیرفعال بودن فیلد.\n * @param {\"small\" | \"medium\"} [size=\"medium\"] - اندازه ورودی.\n * @param {boolean} [disableClearable=false] - فعال بودن امکان پاک‌کردن مقدار انتخاب‌شده.\n * @param {(value: any, onChange: (data: any) => void) => void} [onChangeHandler] - تابع هندل انتخاب گزینه (در صورت نیاز به کنترل خارجی).\n * @param {(value: any) => string} [valueHandler] - تابع تبدیل مقدار ذخیره‌شده در فرم به مقدار نمایشی در input (مثلاً عنوان).\n * @param {string} [inputValue] - مقدار ورودی کنونی (برای کنترل ورودی).\n * @param {(inputValue: string) => void} [onFilterOptions] - تابعی برای هندل کردن فیلتر شدن داده‌ها هنگام تایپ کاربر (مثلاً برای fetch کردن).\n * @param {(props: React.HTMLAttributes<HTMLLIElement>, option: T) => React.ReactNode} [renderOption] - تابعی سفارشی برای رندر آیتم‌ها در لیست.\n *\n * @returns {string | number | null} مقدار انتخاب‌شده (کلید گزینه یا null)\n *\n * @example\n * ```tsx\n * <SeacrchableSelector<{ title: string; key: number }>\n *   name=\"categoryId\"\n *   label=\"دسته‌بندی\"\n *   control={control}\n *   data={[{ title: \"کتاب\", key: 1 }, { title: \"لوازم تحریر\", key: 2 }]}\n *   inputValue={inputValue}\n *   onFilterOptions={(input) => fetchUsers(input)}\n * />\n * ```\n *\n * @description\n * این کامپوننت یک ورودی انتخاب‌گر تکی با قابلیت جست‌وجو و پشتیبانی از مقدار دلخواه کاربر (`freeSolo`) است.\n * قابلیت‌هایی مانند بارگذاری داده، سفارشی‌سازی نمایش گزینه‌ها، هماهنگ‌سازی با فرم، پاک‌سازی انتخاب، و پشتیبانی از جست‌وجوی سمت سرور را نیز داراست.\n *\n * اگر `freeSolo` فعال باشد، می‌توان مقادیر تایپ‌شده را نیز ذخیره کرد. مقدار خروجی معمولاً `key` گزینه انتخاب‌شده است،\n * مگر اینکه کاربر متنی وارد کند که در لیست نباشد (در این صورت می‌توان آن را مستقیم ذخیره کرد).\n *\n * برای سفارشی‌سازی گزینه‌ها:\n * ```tsx\n * renderOption={(props, option) => (\n *   <li {...props} key={option.key}>\n *     <b>{option.title}</b>\n *   </li>\n * )}\n * ```\n */\n\nexport default function SearchableSelector<T extends BaseOption = BaseOption>({\n  name,\n  control,\n  label,\n  data,\n  inputValue,\n  isLoading,\n  disabled = false,\n  size = \"medium\",\n  disableClearable = false,\n  onChangeHandler,\n  valueHandler,\n  onFilterOptions,\n  renderOption,\n  \n}: SeacrchableSelectChipProps<T>) {\n  const dataOptions =\n    data?.map((value: T) => ({\n      ...value,\n    })) || [];\n\n\n  return (\n    <Controller\n      name={name}\n      control={control}\n      render={({ field: { onChange, value, ref }, fieldState: { error } }) => {\n        const selectedValues = React.useMemo(\n          () => dataOptions.find((v) => v?.key == value) ?? null,\n          [value, dataOptions]\n        );\n\n        return (\n          <Autocomplete\n            freeSolo={true}\n            disableClearable={disableClearable || isLoading}\n            disabled={disabled}\n            disablePortal\n            size={size}\n            disableCloseOnSelect={false}\n            options={dataOptions}\n            inputValue={valueHandler ? valueHandler(value) : inputValue}\n            onInputChange={(_, newInput, reason) => {\n              reason == \"input\" && onChange(null);\n              // وقتی کاربر داره تایپ می‌کنه یا پاک می‌کنه\n              onFilterOptions(newInput);\n            }}\n            sx={{\n              width: \"100%\",\n            }}\n            noOptionsText=\"داده ای برای نمایش وجود ندارد\"\n            value={selectedValues}\n            onChange={(e, value) => {\n              // ۱) اگر کاربر یک رشته تایپ‌شده (freeSolo) انتخاب کرده\n              if (typeof value === \"string\") {\n                // می‌تونیم key رو هم با خود رشته‌ی ورودی برابر بگیریم،\n                // یا اگر نمی‌خواید freeSolo ذخیره کنید، اینجا onChange(null) بزنید\n                onChange(value as any); // یا onChange(null) بسته به نیاز\n                onFilterOptions(value);\n              }\n              // ۲) اگر گزینه‌ی منظم انتخاب شده\n              else if (value && typeof value === \"object\") {\n                onChangeHandler\n                  ? onChangeHandler(value, onChange)\n                  : onChange(value.key);\n                onFilterOptions(String(value.title));\n              }\n              // ۳) حالت پاک کردن\n              else {\n                onChange(null);\n                onFilterOptions(\"\");\n              }\n            }}\n            getOptionLabel={(option) => {\n              if (typeof option === \"string\") return option;\n              if (option?.title) return String(option.title);\n              return \"\";\n            }}\n            loading={isLoading}\n            loadingText=\"در حال بارگذاری...\"\n            renderOption={(props, option) => {\n              if (renderOption) {\n                return renderOption(props, option);\n              }\n              return (\n                <li\n                  {...props}\n                  key={`${option.key}`}\n                  style={{ margin: 5, borderRadius: 3 }}\n                >\n                  <div\n                    style={{\n                      display: \"flex\",\n                      flexDirection: \"row\",\n                      width: \"100%\",\n                    }}\n                  >\n                    <div style={{ flexDirection: \"column\", width: \"100%\" }}>\n                      <div style={{ fontWeight: \"normal\" }}>{option.title}</div>\n                    </div>\n                  </div>\n                </li>\n              );\n            }}\n            slots={{ popper: Popper }} // New API\n            slotProps={{\n              popper: {\n                modifiers: [\n                  {\n                    name: \"preventOverflow\",\n                    options: {\n                      boundary: \"window\",\n                      rootBoundary: \"viewport\",\n                      altBoundary: true,\n                      padding: 10,\n                    },\n                  },\n                  {\n                    name: \"flip\",\n                    options: {\n                      fallbackPlacements: [\"top\", \"bottom\"], // Ensures it flips to the top if needed\n                    },\n                  },\n                ],\n              },\n            }}\n            renderInput={(params) => (\n              <TextField\n                {...params}\n                label={label}\n                error={!!error}\n                helperText={error?.message}\n                inputRef={ref}\n                InputLabelProps={{ shrink: true }}\n                InputProps={{\n                  ...params.InputProps,\n                  endAdornment: (\n                    <React.Fragment>\n                      {isLoading ? (\n                        <CircularProgress color=\"primary\" size={20} />\n                      ) : null}\n                      {params.InputProps.endAdornment}\n                    </React.Fragment>\n                  ),\n                }}\n              />\n            )}\n          />\n        );\n      }}\n    />\n  );\n}\n","import { CircularProgress, Popper } from \"@mui/material\";\nimport Autocomplete, {\n  AutocompleteRenderOptionState,\n} from \"@mui/material/Autocomplete\";\nimport TextField, { TextFieldVariants } from \"@mui/material/TextField\";\nimport * as React from \"react\";\nimport { Control, Controller } from \"react-hook-form\";\n\ninterface BaseOption {\n  key: number | string | \"false\" | true;\n  title: string | number;\n  [x: string]: any;\n}\n\ninterface SingleClientSelectorProps<T extends BaseOption = BaseOption> {\n  name: string;\n  control: Control<any>;\n  label?: string;\n  data?: T[];\n  isLoading?: boolean;\n  disabled?: boolean;\n  size?: \"small\" | \"medium\";\n  disableClearable?: boolean;\n  variant?: TextFieldVariants;\n  placeholder?: string;\n  renderOption?: (\n    props: React.HTMLAttributes<HTMLLIElement>,\n    option: T,\n    state: AutocompleteRenderOptionState\n  ) => React.ReactNode;\n}\n\n/**\n * 🔍 کامپوننت انتخاب تکی کلاینت با قابلیت جست‌وجو، پشتیبانی از react-hook-form و MUI Autocomplete\n *\n * @component SingleClientSelector\n *\n * @template T - نوع گزینه‌ها که باید شامل `key` و `title` باشد و از BaseOption ارث‌بری کند.\n *\n * @param {string} name - نام فیلدی که در فرم ثبت می‌شود.\n * @param {Control<any>} control - کنترل فرم از `react-hook-form`.\n * @param {string} [label] - برچسب نمایشی برای فیلد.\n * @param {T[]} [data] - لیستی از گزینه‌ها شامل `key` و `title` به عنوان مقدار و متن نمایشی.\n * @param {boolean} [isLoading=false] - وضعیت بارگذاری (مثلاً هنگام فراخوانی API).\n * @param {boolean} [disabled=false] - غیرفعال بودن فیلد.\n * @param {\"small\" | \"medium\"} [size=\"medium\"] - اندازه ورودی.\n * @param {boolean} [disableClearable=false] - غیرفعال کردن امکان پاک‌کردن مقدار انتخاب‌شده.\n * @param {TextFieldVariants} [variant=\"outlined\"] - نوع نمایش TextField (outlined، filled، standard).\n * @param {string} [placeholder] - متن راهنما برای ورودی.\n * @param {(props: React.HTMLAttributes<HTMLLIElement>, option: T, state: AutocompleteRenderOptionState) => React.ReactNode} [renderOption] - تابعی سفارشی برای رندر آیتم‌ها در لیست.\n *\n * @returns {string | number | boolean | null} مقدار انتخاب‌شده (کلید گزینه یا null)\n *\n * @example\n * ```tsx\n * // استفاده ساده\n * <SingleClientSelector<{ title: string; key: number }>\n *   name=\"clientId\"\n *   label=\"انتخاب مشتری\"\n *   control={control}\n *   data={[\n *     { title: \"شرکت الف\", key: 1 },\n *     { title: \"شرکت ب\", key: 2 }\n *   ]}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // استفاده پیشرفته با رندرینگ سفارشی\n * <SingleClientSelector<Client>\n *   name=\"selectedClient\"\n *   label=\"انتخاب مشتری\"\n *   control={control}\n *   data={clients}\n *   isLoading={isLoadingClients}\n *   placeholder=\"جستجو و انتخاب مشتری...\"\n *   renderOption={(props, option) => (\n *     <li {...props} key={option.key}>\n *       <div style={{ display: 'flex', flexDirection: 'column' }}>\n *         <strong>{option.title}</strong>\n *         <small>{option.email}</small>\n *       </div>\n *     </li>\n *   )}\n * />\n * ```\n *\n * @description\n * این کامپوننت یک انتخاب‌گر تکی اختصاصی برای کلاینت‌ها با قابلیت‌های زیر است:\n *\n * ✅ **یکپارچگی با فرم**: پشتیبانی کامل از `react-hook-form` با validation\n * 🔍 **جست‌وجو**: امکان جست‌وجو در لیست گزینه‌ها\n * ⚡ **بارگذاری**: نمایش وضعیت loading هنگام fetch داده‌ها\n * 🎨 **سفارشی‌سازی**: امکان سفارشی‌سازی کامل نمایش آیتم‌ها\n * 🧹 **پاک‌سازی**: قابلیت پاک کردن انتخاب (قابل غیرفعال‌سازی)\n * 📱 **ریسپانسیو**: طراحی مناسب برای همه اندازه صفحه‌ها\n * 🌐 **RTL**: پشتیبانی کامل از راست به چپ\n * 🎯 **بهینه**: بهینه‌سازی شده برای عملکرد بالا با `useMemo`\n *\n * **نکات مهم:**\n * - مقدار خروجی همیشه `key` گزینه انتخاب‌شده است\n * - در صورت عدم انتخاب، مقدار `null` برگردانده می‌شود\n * - هر گزینه باید دارای `key` و `title` یکتا باشد\n * - کامپوننت خطاهای validation فرم را نمایش می‌دهد\n * - از Popper برای بهبود عملکرد dropdown استفاده می‌کند\n *\n * **الگوی استفاده معمول:**\n * ```tsx\n * // تعریف نوع داده\n * interface Client {\n *   key: number;\n *   title: string;\n *   email?: string;\n *   phone?: string;\n * }\n *\n * // در کامپوننت\n * const { control, watch } = useForm();\n * const { data: clients, isLoading } = useGetClients();\n *\n * return (\n *   <SingleClientSelector<Client>\n *     name=\"clientId\"\n *     control={control}\n *     label=\"انتخاب مشتری\"\n *     data={clients}\n *     isLoading={isLoading}\n *   />\n * );\n * ```\n */\nexport default function SingleClientSelector<\n  T extends BaseOption = BaseOption\n>({\n  name,\n  control,\n  label,\n  data,\n  isLoading,\n  disabled = false,\n  size = \"medium\",\n  disableClearable = false,\n  variant = \"outlined\",\n  placeholder,\n  renderOption,\n}: SingleClientSelectorProps<T>) {\n  const dataOptions = React.useMemo(\n    () =>\n      data?.map((value) => ({\n        ...value,\n        key: value.key || `key_${Math.random()}`,\n      })) || [],\n    [data]\n  );\n\n  const handleChange = (\n    _event: React.SyntheticEvent,\n    selected: T | null,\n    onChange: (value: any) => void\n  ) => {\n    // اصلاح: بررسی null و undefined\n    onChange(selected?.key ?? null);\n  };\n\n  return (\n    <Controller\n      name={name}\n      control={control}\n      render={({ field: { onChange, value, ref }, fieldState: { error } }) => {\n        const computedValue = React.useMemo(() => {\n          if (!value) return null;\n\n          // اصلاح: برای single selector از === استفاده می‌کنیم\n          return dataOptions.find(\n            (option) => String(option.key) === String(value)\n          )?.title\n            ? dataOptions.find((option) => String(option.key) === String(value))\n            : null;\n        }, [value, dataOptions]);\n\n        return (\n          <Autocomplete\n            disableClearable={disableClearable || isLoading}\n            disabled={disabled || isLoading}\n            size={size}\n            options={dataOptions}\n            sx={{ width: \"100%\" }}\n            noOptionsText=\"داده‌ای برای نمایش وجود ندارد\"\n            value={computedValue}\n            onChange={(event, newValue) =>\n              handleChange(event, newValue, onChange)\n            }\n            isOptionEqualToValue={(option, value) =>\n              String(option.key) === String(value?.key)\n            }\n            getOptionLabel={(option) => {\n              if (typeof option === \"string\") return option;\n              if (option?.title) return String(option.title);\n              return \"\";\n            }}\n            loading={isLoading}\n            loadingText=\"در حال بارگذاری...\"\n            renderOption={(props, option, state) => {\n              if (renderOption) {\n                return renderOption(props, option, state);\n              }\n              return (\n                <li\n                  {...props}\n                  key={`${option.key}`}\n                  style={{ margin: 5, borderRadius: 3 }}\n                >\n                  <div\n                    style={{\n                      display: \"flex\",\n                      flexDirection: \"row\",\n                      width: \"100%\",\n                    }}\n                  >\n                    <div style={{ flexDirection: \"column\", width: \"100%\" }}>\n                      <div style={{ fontWeight: \"normal\" }}>{option.title}</div>\n                    </div>\n                  </div>\n                </li>\n              );\n            }}\n            slots={{ popper: Popper }}\n            slotProps={{\n              popper: {\n                modifiers: [\n                  {\n                    name: \"preventOverflow\",\n                    options: {\n                      boundary: \"window\",\n                      rootBoundary: \"viewport\",\n                      altBoundary: true,\n                      padding: 10,\n                    },\n                  },\n                  {\n                    name: \"flip\",\n                    options: {\n                      fallbackPlacements: [\"top\", \"bottom\"],\n                    },\n                  },\n                ],\n              },\n            }}\n            renderInput={(params) => (\n              <TextField\n                {...params}\n                label={label}\n                error={!!error}\n                helperText={error?.message}\n                inputRef={ref}\n                variant={variant}\n                placeholder={placeholder}\n                InputLabelProps={{ shrink: true }}\n                InputProps={{\n                  ...params.InputProps,\n                  endAdornment: (\n                    <React.Fragment>\n                      {isLoading ? (\n                        <CircularProgress color=\"primary\" size={20} />\n                      ) : null}\n                      {params.InputProps.endAdornment}\n                    </React.Fragment>\n                  ),\n                }}\n              />\n            )}\n          />\n        );\n      }}\n    />\n  );\n}\n"],"mappings":"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","names":["React","import_ri","Autocomplete","value","TextField","import_Autocomplete","import_TextField","React","import_react_hook_form","import_material","Autocomplete","value","TextField","import_material","import_Autocomplete","import_TextField","React","import_react_hook_form","Autocomplete","value","TextField","import_material","import_Autocomplete","import_TextField","React","import_react_hook_form","Autocomplete","value","TextField"]}
+{"version":3,"sources":["../../src/selectors/index.ts","../../react-shim.js","../../src/selectors/multi-check-selector/index.tsx","../../src/selectors/multiple-selector/index.tsx","../../src/selectors/searchable-selector/index.tsx","../../src/selectors/single-client-selector/index.tsx"],"sourcesContent":["export { default as MultiCheckSelector } from \"./multi-check-selector\";\nexport { default as MultipleSelector } from \"./multiple-selector\";\nexport { default as SearchableSelector } from \"./searchable-selector\";\nexport { default as SingleClientSelector } from \"./single-client-selector\";\n","import * as React from \"react\";\nexport { React };\n","import Autocomplete from \"@mui/material/Autocomplete\";\nimport TextField, { TextFieldVariants } from \"@mui/material/TextField\";\nimport * as React from \"react\";\nimport { Control, Controller } from \"react-hook-form\";\nimport { Checkbox, CircularProgress, Popper } from \"@mui/material\";\nimport { FaCheckSquare } from \"react-icons/fa\";\nimport { RiCheckboxBlankLine } from \"react-icons/ri\";\nimport { MdSelectAll } from \"react-icons/md\";\nimport { RiDeleteBin6Line } from \"react-icons/ri\";\ninterface OptionType {\n  title: string;\n  key: string | number;\n  [x: string]: any; // برای پشتیبانی از فیلدهای اضافی\n}\nexport interface AutocompleteRenderOptionState {\n  inputValue: string;\n  index: number;\n  selected: boolean;\n}\ninterface MultipleSelectChipProps<T extends OptionType> {\n  name: string;\n  control: Control<any>;\n  label?: string;\n  data?: T[];\n  isLoading?: boolean;\n  disabled?: boolean;\n  size?: \"small\" | \"medium\";\n  disableClearable?: boolean;\n  variant?: TextFieldVariants;\n  placeholder?: string;\n  renderOption?: (\n    props: React.HTMLAttributes<HTMLLIElement>,\n    option: T,\n    state: AutocompleteRenderOptionState\n  ) => React.ReactNode;\n}\n/**\n * 📦 MultipleSelector — کامپوننت انتخاب چندگزینه‌ای پیشرفته\n *\n * @component MultipleSelector\n *\n * @template T — نوع داده‌ی گزینه‌ها که باید شامل فیلدهای `title` و `key` باشد.\n *\n * @param {string} name - نام فیلد در فرم (برای ثبت در react-hook-form).\n * @param {Control<any>} control - کنترل فرم از کتابخانه react-hook-form.\n * @param {string} [label] - برچسب ورودی.\n * @param {T[]} [data] - آرایه‌ای از گزینه‌ها که هر کدام باید شامل `title` (نمایش) و `key` (شناسه یکتا) باشد.\n * @param {boolean} [isLoading=false] - حالت لودینگ برای نمایش اسپینر در ورودی.\n * @param {boolean} [disabled=false] - غیرفعال‌کردن ورودی.\n * @param {\"small\" | \"medium\"} [size=\"medium\"] - سایز ورودی MUI Autocomplete.\n * @param {boolean} [clear=false] - اگر `false` باشد، قابلیت پاک کردن کامل (Clearable) غیرفعال می‌شود.\n * @param {(props: React.HTMLAttributes<HTMLLIElement>, option: T, state: AutocompleteRenderOptionState) => React.ReactNode} [renderOption] - تابع سفارشی برای رندر هر آیتم در لیست انتخاب.\n *\n * @description\n * این کامپوننت یک `Autocomplete` چندگزینه‌ای با قابلیت‌های زیر است:\n * - اتصال مستقیم به `react-hook-form` (با استفاده از Controller)\n * - انتخاب همه (`انتخاب همه`) یا پاک کردن همه (`پاک کردن همه`)\n * - نمایش تعداد آیتم‌های انتخاب شده به جای تگ‌های جداگانه\n * - پشتیبانی از حالت لودینگ و غیرفعال بودن\n * - امکان سفارشی‌سازی رندر آیتم‌ها (`renderOption`)\n * - آیکون‌های سفارشی برای انتخاب‌ها و گزینه‌های ویژه\n * - جلوگیری از بستن لیست هنگام انتخاب آیتم‌ها (`disableCloseOnSelect`)\n * - مدیریت موقعیت Popper با MUI modifiers\n *\n * @returns {Array<string | number>} آرایه‌ای از کلیدهای آیتم‌های انتخاب شده.\n *\n * @example\n * ```tsx\n * import { useForm, Controller } from \"react-hook-form\";\n *\n * type MyOption = { title: string; key: number };\n *\n * const options: MyOption[] = [\n *   { title: \"محصول ۱\", key: 1 },\n *   { title: \"محصول ۲\", key: 2 },\n * ];\n *\n * export default function MyForm() {\n *   const { control, handleSubmit } = useForm({ defaultValues: { productIds: [] } });\n *\n *   const onSubmit = (data: any) => {\n *     console.log(\"انتخاب شده‌ها:\", data.productIds);\n *   };\n *\n *   return (\n *     <form onSubmit={handleSubmit(onSubmit)}>\n *       <MultipleSelector<MyOption>\n *         name=\"productIds\"\n *         label=\"محصولات\"\n *         control={control}\n *         data={options}\n *         isLoading={false}\n *         size=\"small\"\n *         renderOption={(props, option, state) => (\n *           <li {...props} key={option.key}>\n *             <strong style={{ color: state.selected ? \"green\" : \"black\" }}>\n *               {option.title}\n *             </strong>\n *           </li>\n *         )}\n *       />\n *       <button type=\"submit\">ثبت</button>\n *     </form>\n *   );\n * }\n * ```\n */\nexport default function MultiCheckSelector<T extends OptionType>({\n  name,\n  control,\n  label,\n  data,\n  isLoading,\n  disabled = false,\n  size = \"medium\",\n  disableClearable = false,\n  renderOption,\n  variant,\n  placeholder,\n}: MultipleSelectChipProps<T>) {\n  const dataOptions =\n    data?.map((value) => ({\n      ...value,\n      key: value.key || `key_${Math.random()}`,\n    })) || [];\n\n  const combinedOptions =\n    dataOptions.length > 0\n      ? [\n        { title: \"انتخاب همه\", key: \"All\" } as T,\n        { title: \"پاک کردن همه\", key: \"ClearAll\" } as T,\n        ...dataOptions,\n      ]\n      : [...dataOptions];\n\n  const handleChange = (\n    _event: any,\n    selected: any,\n    onChange: (value: any) => void\n  ) => {\n    if (selected.some((item: any) => item.key === \"All\")) {\n      const allItems = [...dataOptions];\n      onChange(allItems.map((item) => item.key));\n    } else if (selected.some((item: any) => item.key === \"ClearAll\")) {\n      onChange([]);\n    } else {\n      onChange(selected.map((item: any) => item.key));\n    }\n  };\n  const icon = <RiCheckboxBlankLine size={20} />;\n  const checkedIcon = <FaCheckSquare size={20} />;\n\n  return (\n    <Controller\n      name={name}\n      control={control}\n      render={({ field: { onChange, value, ref }, fieldState: { error } }) => {\n        const computedValue = React.useMemo(() => {\n          if (Array.isArray(value) && dataOptions.length > 0) {\n            return dataOptions.filter((option: any) =>\n              value.includes(option.key)\n            );\n          }\n          return [];\n        }, [value, dataOptions]);\n\n        // کنترل باز و بسته شدن آتوکامپلیت\n        const autocompleteRef = React.useRef<any>(null);\n        const [open, setOpen] = React.useState(false);\n        const handleOpen = () => setOpen(true);\n        const handleClose = () => setOpen(false);\n        return (\n          <Autocomplete\n            multiple\n            disableClearable={disableClearable}\n            disabled={disabled || isLoading}\n            size={size}\n            disableCloseOnSelect\n            options={combinedOptions}\n            sx={{ width: \"100%\" }}\n            noOptionsText=\"داده‌ای برای نمایش وجود ندارد\"\n            value={computedValue}\n            onChange={(event, value) =>\n              handleChange(event, value as T[], onChange)\n            }\n            isOptionEqualToValue={(option, value) =>\n              String(option.key) === String(value?.key)\n            }\n            getOptionLabel={(option) => option.title}\n            loading={isLoading}\n            loadingText=\"در حال بارگذاری...\"\n            open={open}\n            onOpen={handleOpen}\n            onClose={handleClose}\n            ref={autocompleteRef}\n            renderOption={(props, option, state) => {\n              if (renderOption) {\n                return renderOption(props, option, state);\n              }\n              // آیکون مناسب برای گزینه‌های انتخاب همه و پاک کردن همه\n              let iconElem = null;\n              if (option.key === \"All\") {\n                iconElem = (\n                  <MdSelectAll\n                    size={18}\n                    style={{ marginLeft: 6, color: \"#2563eb\" }}\n                  />\n                );\n              } else if (option.key === \"ClearAll\") {\n                iconElem = (\n                  <RiDeleteBin6Line\n                    size={18}\n                    style={{ marginLeft: 6, color: \"#ef4444\" }}\n                  />\n                );\n              }\n              return (\n                <li\n                  {...props}\n                  key={`${option.key}`}\n                  style={{ margin: 5, borderRadius: 3 }}\n                >\n                  <div\n                    style={{\n                      display: \"flex\",\n                      flexDirection: \"row\",\n                      width: \"100%\",\n                      alignItems: \"center\",\n                    }}\n                  >\n                    {option.key === \"All\" || option.key === \"ClearAll\" ? (\n                      iconElem\n                    ) : (\n                      <Checkbox\n                        icon={icon}\n                        checkedIcon={checkedIcon}\n                        style={{ marginLeft: 8 }}\n                        checked={state.selected}\n                        sx={{ margin: 0, padding: 0 }}\n                      />\n                    )}\n                    <div style={{ flexDirection: \"row\", width: \"100%\" }}>\n                      <div style={{ fontWeight: \"normal\" }}>{option.title}</div>\n                    </div>\n                  </div>\n                </li>\n              );\n            }}\n            renderTags={(value) => {\n              if (value.length === 0) return null;\n              const total = dataOptions.length;\n              const tagText =\n                value.length === total\n                  ? `${value.length} مورد انتخاب شده`\n                  : `${value.length} مورد از ${total} انتخاب شده`;\n\n              return (\n                <div\n                  style={{\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    height: \"auto\",\n                    minHeight: size === \"small\" ? \"24px\" : \"32px\",\n                    maxHeight: size === \"small\" ? \"32px\" : \"40px\",\n                    overflow: \"hidden\",\n                    whiteSpace: \"nowrap\",\n                    textOverflow: \"ellipsis\",\n                    width: \"100%\",\n                    maxWidth: \"calc(100% - 50px)\", // جا برای آیکون‌های پایانی\n                  }}\n                  onClick={handleOpen}\n                >\n                  <span\n                    style={{\n                      fontWeight: 600,\n                      fontSize: size === \"small\" ? 13 : 15,\n                      overflow: \"hidden\",\n                      textOverflow: \"ellipsis\",\n                      whiteSpace: \"nowrap\",\n                      display: \"block\",\n                      width: \"100%\",\n                    }}\n                    title={tagText} // نمایش متن کامل در tooltip\n                  >\n                    {tagText}\n                  </span>\n                </div>\n              );\n            }}\n            slots={{ popper: Popper }}\n            slotProps={{\n              popper: {\n                modifiers: [\n                  {\n                    name: \"preventOverflow\",\n                    options: {\n                      boundary: \"window\",\n                      rootBoundary: \"viewport\",\n                      altBoundary: true,\n                      padding: 10,\n                    },\n                  },\n                  {\n                    name: \"flip\",\n                    options: {\n                      fallbackPlacements: [\"top\", \"bottom\"],\n                    },\n                  },\n                ],\n              },\n            }}\n            renderInput={(params) => (\n              <TextField\n                {...params}\n                label={label}\n                error={!!error}\n                variant={variant}\n                placeholder={placeholder}\n                helperText={error?.message}\n                inputRef={ref}\n                InputLabelProps={{ shrink: true }}\n                InputProps={{\n                  ...params.InputProps,\n                  endAdornment: (\n                    <React.Fragment>\n                      {isLoading ? (\n                        <CircularProgress color=\"primary\" size={20} />\n                      ) : null}\n                      {params.InputProps.endAdornment}\n                    </React.Fragment>\n                  ),\n                }}\n              />\n            )}\n          />\n        );\n      }}\n    />\n  );\n}\n// ...existing code...\n","import Autocomplete from \"@mui/material/Autocomplete\";\nimport TextField from \"@mui/material/TextField\";\nimport * as React from \"react\";\nimport { Control, Controller } from \"react-hook-form\";\nimport { CircularProgress, Popper } from \"@mui/material\";\n\ninterface OptionType {\n  title: string;\n  key: string | number;\n  [x: string]: any; // برای پشتیبانی از فیلدهای اضافی\n}\n\ninterface MultipleSelectChipProps<T extends OptionType> {\n  name: string;\n  control: Control<any>;\n  label?: string;\n  data?: T[];\n  isLoading?: boolean;\n  disabled?: boolean;\n  size?: \"small\" | \"medium\";\n  disableClearable?: boolean;\n\n  renderOption?: (\n    props: React.HTMLAttributes<HTMLLIElement>,\n    option: T\n  ) => React.ReactNode;\n}\n/**\n * 📦 کامپوننت انتخاب چند گزینه‌ای با پشتیبانی از react-hook-form و MUI Autocomplete\n *\n * @component MultipleSelector\n *\n * @param {string} name - نام فیلدی که در فرم ثبت می‌شود.\n * @param {string} [label] - برچسب نمایشی برای فیلد.\n * @param {Control<any>} control - کنترل فرم از react-hook-form.\n * @param {{ title: string; key: string | number }[]} [data] - لیستی از گزینه‌ها شامل `title` (متن) و `key` (مقدار).\n * @param {boolean} [isLoading=false] - آیا داده‌ها در حال بارگذاری هستند.\n * @param {boolean} [disabled=false] - غیرفعال‌سازی ورودی.\n * @param {\"small\" | \"medium\"} [size=\"medium\"] - سایز ورودی.\n * @param {boolean} [disableClearable=false] - آیا امکان پاک کردن وجود دارد یا نه.\n * @param {string} [tooltip] - متن راهنما هنگام هاور.\n * @param {(props, option) => React.ReactNode} [renderOption] - تابعی سفارشی برای رندر آیتم‌ها در لیست.\n *\n * @returns {Array<{ key: string | number }>} لیستی از آیتم‌های انتخاب‌شده ( فقط آیدی‌ها).\n *\n * @example\n * ```tsx\n * <MultipleSelector<{title:string; key:number;}>\n *   name=\"productIds\"\n *   label=\"محصولات\"\n *   control={control}\n *   data={[{ title: \"محصول ۱\", key: 1 }, { title: \"محصول ۲\", key: 2 }]}\n * />\n * ```\n *\n * @description\n * کامپوننتی چندانتخابی با قابلیت انتخاب همه‌ی موارد، سفارشی‌سازی گزینه‌ها،\n * نمایش راهنمای هاور، و بازگرداندن لیست کامل از آبجکت‌های انتخاب‌شده.\n *\n * برای سفارشی‌سازی نحوه نمایش آیتم‌ها:\n * ```tsx\n * renderOption={(props, option) => (\n *   <li {...props} key={`${option.key}`}>\n *     <span style={{ color: \"green\" }}>{option.title}</span>\n *   </li>\n * )}\n * ```\n */\n\nexport default function MultipleSelector<T extends OptionType>({\n  name,\n  control,\n  label,\n  data,\n  isLoading,\n  disabled = false,\n  size = \"medium\",\n  disableClearable = false,\n  renderOption,\n}: MultipleSelectChipProps<T>) {\n  const dataOptions =\n    data?.map((value) => ({\n      ...value,\n      key: value.key || `key_${Math.random()}`,\n    })) || [];\n\n  const combinedOptions =\n    dataOptions.length > 0\n      ? [{ title: \"انتخاب همه\", key: \"All\" } as T, ...dataOptions]\n      : [...dataOptions];\n\n  const handleChange = (\n    _event: any,\n    selected: any,\n    onChange: (value: any) => void\n  ) => {\n    if (selected.some((item: any) => item.key === \"All\")) {\n      const allItems = [...dataOptions];\n      onChange(allItems.map((item) => item.key));\n    } else {\n      onChange(selected.map((item: any) => item.key));\n    }\n  };\n  return (\n    <Controller\n      name={name}\n      control={control}\n      render={({ field: { onChange, value, ref }, fieldState: { error } }) => {\n        const computedValue = React.useMemo(() => {\n          if (Array.isArray(value) && dataOptions.length > 0) {\n            return dataOptions.filter((option: any) =>\n              value.includes(option.key)\n            );\n          }\n          return [];\n        }, [value, dataOptions]);\n\n        return (\n          <Autocomplete\n            multiple\n            disableClearable={disableClearable}\n            disabled={disabled || isLoading}\n            size={size}\n            disableCloseOnSelect\n            options={combinedOptions}\n            sx={{ width: \"100%\" }}\n            noOptionsText=\"داده‌ای برای نمایش وجود ندارد\"\n            value={computedValue}\n            onChange={(event, value) =>\n              handleChange(event, value as T[], onChange)\n            }\n            isOptionEqualToValue={(option, value) =>\n              String(option.key) === String(value?.key)\n            }\n            getOptionLabel={(option) => option.title}\n            loading={isLoading}\n            loadingText=\"در حال بارگذاری...\"\n            renderOption={(props, option) => {\n              if (renderOption) {\n                return renderOption(props, option);\n              }\n              return (\n                <li\n                  {...props}\n                  key={`${option.key}`}\n                  style={{ margin: 5, borderRadius: 3 }}\n                >\n                  <div\n                    style={{\n                      display: \"flex\",\n                      flexDirection: \"row\",\n                      width: \"100%\",\n                    }}\n                  >\n                    <div style={{ flexDirection: \"column\", width: \"100%\" }}>\n                      <div style={{ fontWeight: \"normal\" }}>{option.title}</div>\n                    </div>\n                  </div>\n                </li>\n              );\n            }}\n            slots={{ popper: Popper }}\n            slotProps={{\n              popper: {\n                modifiers: [\n                  {\n                    name: \"preventOverflow\",\n                    options: {\n                      boundary: \"window\",\n                      rootBoundary: \"viewport\",\n                      altBoundary: true,\n                      padding: 10,\n                    },\n                  },\n                  {\n                    name: \"flip\",\n                    options: {\n                      fallbackPlacements: [\"top\", \"bottom\"],\n                    },\n                  },\n                ],\n              },\n            }}\n            renderInput={(params) => (\n              <TextField\n                {...params}\n                label={label}\n                error={!!error}\n                helperText={error?.message}\n                inputRef={ref}\n                InputLabelProps={{ shrink: true }}\n                InputProps={{\n                  ...params.InputProps,\n                  endAdornment: (\n                    <React.Fragment>\n                      {isLoading ? (\n                        <CircularProgress color=\"primary\" size={20} />\n                      ) : null}\n                      {params.InputProps.endAdornment}\n                    </React.Fragment>\n                  ),\n                }}\n              />\n            )}\n          />\n        );\n      }}\n    />\n  );\n}\n","import { CircularProgress, Popper } from \"@mui/material\";\nimport Autocomplete from \"@mui/material/Autocomplete\";\nimport TextField from \"@mui/material/TextField\";\nimport * as React from \"react\";\nimport { Control, Controller } from \"react-hook-form\";\n\ninterface BaseOption {\n  key: number | string | \"false\" | true;\n  title: string | number;\n  [x: string]: any;\n}\n\ninterface SeacrchableSelectChipProps<T extends BaseOption = BaseOption> {\n  name: string;\n  control: Control<any>;\n  label?: string;\n  placeholder?: string;\n  data?: T[];\n  inputValue: string;\n  isLoading?: boolean;\n  disabled?: boolean;\n  size?: \"small\" | \"medium\";\n  disableClearable?: boolean;\n  variant?: \"outlined\" | \"filled\" | \"standard\";\n  onChangeHandler?: (value: any, onChange: (data: any) => void) => void;\n  valueHandler?: (value: any) => any;\n  onFilterOptions: (inputValue: string) => void;\n  renderOption?: (\n    props: React.HTMLAttributes<HTMLLIElement>,\n    option: T\n  ) => React.ReactNode;\n}\n/**\n * 🔍 کامپوننت انتخاب تکی با قابلیت جست‌وجو، پشتیبانی از react-hook-form و MUI Autocomplete\n *\n * @component SeacrchableSelector\n *\n * @template T - نوع گزینه‌ها که باید شامل `key` و `title` باشد.\n *\n * @param {string} name - نام فیلدی که در فرم ثبت می‌شود.\n * @param {string} [label] - برچسب نمایشی برای فیلد.\n * @param {Control<any>} control - کنترل فرم از `react-hook-form`.\n * @param {T[]} [data] - لیستی از گزینه‌ها شامل `key` و `title` به عنوان مقدار و متن نمایشی.\n * @param {boolean} [isLoading=false] - وضعیت بارگذاری (مثلاً هنگام فراخوانی API).\n * @param {boolean} [disabled=false] - غیرفعال بودن فیلد.\n * @param {\"small\" | \"medium\"} [size=\"medium\"] - اندازه ورودی.\n * @param {boolean} [disableClearable=false] - فعال بودن امکان پاک‌کردن مقدار انتخاب‌شده.\n * @param {(value: any, onChange: (data: any) => void) => void} [onChangeHandler] - تابع هندل انتخاب گزینه (در صورت نیاز به کنترل خارجی).\n * @param {(value: any) => string} [valueHandler] - تابع تبدیل مقدار ذخیره‌شده در فرم به مقدار نمایشی در input (مثلاً عنوان).\n * @param {string} [inputValue] - مقدار ورودی کنونی (برای کنترل ورودی).\n * @param {(inputValue: string) => void} [onFilterOptions] - تابعی برای هندل کردن فیلتر شدن داده‌ها هنگام تایپ کاربر (مثلاً برای fetch کردن).\n * @param {(props: React.HTMLAttributes<HTMLLIElement>, option: T) => React.ReactNode} [renderOption] - تابعی سفارشی برای رندر آیتم‌ها در لیست.\n *\n * @returns {string | number | null} مقدار انتخاب‌شده (کلید گزینه یا null)\n *\n * @example\n * ```tsx\n * <SeacrchableSelector<{ title: string; key: number }>\n *   name=\"categoryId\"\n *   label=\"دسته‌بندی\"\n *   control={control}\n *   data={[{ title: \"کتاب\", key: 1 }, { title: \"لوازم تحریر\", key: 2 }]}\n *   inputValue={inputValue}\n *   onFilterOptions={(input) => fetchUsers(input)}\n * />\n * ```\n *\n * @description\n * این کامپوننت یک ورودی انتخاب‌گر تکی با قابلیت جست‌وجو و پشتیبانی از مقدار دلخواه کاربر (`freeSolo`) است.\n * قابلیت‌هایی مانند بارگذاری داده، سفارشی‌سازی نمایش گزینه‌ها، هماهنگ‌سازی با فرم، پاک‌سازی انتخاب، و پشتیبانی از جست‌وجوی سمت سرور را نیز داراست.\n *\n * اگر `freeSolo` فعال باشد، می‌توان مقادیر تایپ‌شده را نیز ذخیره کرد. مقدار خروجی معمولاً `key` گزینه انتخاب‌شده است،\n * مگر اینکه کاربر متنی وارد کند که در لیست نباشد (در این صورت می‌توان آن را مستقیم ذخیره کرد).\n *\n * برای سفارشی‌سازی گزینه‌ها:\n * ```tsx\n * renderOption={(props, option) => (\n *   <li {...props} key={option.key}>\n *     <b>{option.title}</b>\n *   </li>\n * )}\n * ```\n */\n\nexport default function SearchableSelector<T extends BaseOption = BaseOption>({\n  name,\n  control,\n  label,\n  placeholder,\n  data,\n  inputValue,\n  isLoading,\n  disabled = false,\n  size = \"medium\",\n  disableClearable = false,\n  variant = \"outlined\",\n  onChangeHandler,\n  valueHandler,\n  onFilterOptions,\n  renderOption,\n}: SeacrchableSelectChipProps<T>) {\n  const dataOptions =\n    data?.map((value: T) => ({\n      ...value,\n    })) || [];\n\n  return (\n    <Controller\n      name={name}\n      control={control}\n      render={({ field: { onChange, value, ref }, fieldState: { error } }) => {\n        const selectedValues = React.useMemo(\n          () => dataOptions.find((v) => v?.key == value) ?? null,\n          [value, dataOptions]\n        );\n\n        return (\n          <Autocomplete\n            freeSolo={true}\n            disableClearable={disableClearable || isLoading}\n            disabled={disabled}\n            disablePortal\n            size={size}\n            disableCloseOnSelect={false}\n            options={dataOptions}\n            inputValue={valueHandler ? valueHandler(value) : inputValue}\n            onInputChange={(_, newInput, reason) => {\n              reason == \"input\" && onChange(null);\n              // وقتی کاربر داره تایپ می‌کنه یا پاک می‌کنه\n              onFilterOptions(newInput);\n            }}\n            sx={{\n              width: \"100%\",\n            }}\n            noOptionsText=\"داده ای برای نمایش وجود ندارد\"\n            value={selectedValues}\n            onChange={(e, value) => {\n              // ۱) اگر کاربر یک رشته تایپ‌شده (freeSolo) انتخاب کرده\n              if (typeof value === \"string\") {\n                // می‌تونیم key رو هم با خود رشته‌ی ورودی برابر بگیریم،\n                // یا اگر نمی‌خواید freeSolo ذخیره کنید، اینجا onChange(null) بزنید\n                onChange(value as any); // یا onChange(null) بسته به نیاز\n                onFilterOptions(value);\n              }\n              // ۲) اگر گزینه‌ی منظم انتخاب شده\n              else if (value && typeof value === \"object\") {\n                onChangeHandler\n                  ? onChangeHandler(value, onChange)\n                  : onChange(value.key);\n                onFilterOptions(String(value.title));\n              }\n              // ۳) حالت پاک کردن\n              else {\n                onChange(null);\n                onFilterOptions(\"\");\n              }\n            }}\n            getOptionLabel={(option) => {\n              if (typeof option === \"string\") return option;\n              if (option?.title) return String(option.title);\n              return \"\";\n            }}\n            loading={isLoading}\n            loadingText=\"در حال بارگذاری...\"\n            renderOption={(props, option) => {\n              if (renderOption) {\n                return renderOption(props, option);\n              }\n              return (\n                <li\n                  {...props}\n                  key={`${option.key}`}\n                  style={{ margin: 5, borderRadius: 3 }}\n                >\n                  <div\n                    style={{\n                      display: \"flex\",\n                      flexDirection: \"row\",\n                      width: \"100%\",\n                    }}\n                  >\n                    <div style={{ flexDirection: \"column\", width: \"100%\" }}>\n                      <div style={{ fontWeight: \"normal\" }}>{option.title}</div>\n                    </div>\n                  </div>\n                </li>\n              );\n            }}\n            slots={{ popper: Popper }} // New API\n            slotProps={{\n              popper: {\n                modifiers: [\n                  {\n                    name: \"preventOverflow\",\n                    options: {\n                      boundary: \"window\",\n                      rootBoundary: \"viewport\",\n                      altBoundary: true,\n                      padding: 10,\n                    },\n                  },\n                  {\n                    name: \"flip\",\n                    options: {\n                      fallbackPlacements: [\"top\", \"bottom\"], // Ensures it flips to the top if needed\n                    },\n                  },\n                ],\n              },\n            }}\n            renderInput={(params) => (\n              <TextField\n                {...params}\n                variant={variant}\n                label={label}\n                placeholder={placeholder}\n                error={!!error}\n                helperText={error?.message}\n                inputRef={ref}\n                InputLabelProps={{ shrink: true }}\n                InputProps={{\n                  ...params.InputProps,\n                  endAdornment: (\n                    <React.Fragment>\n                      {isLoading ? (\n                        <CircularProgress color=\"primary\" size={20} />\n                      ) : null}\n                      {params.InputProps.endAdornment}\n                    </React.Fragment>\n                  ),\n                }}\n              />\n            )}\n          />\n        );\n      }}\n    />\n  );\n}\n","import { CircularProgress, Popper } from \"@mui/material\";\nimport Autocomplete, {\n  AutocompleteRenderOptionState,\n} from \"@mui/material/Autocomplete\";\nimport TextField, { TextFieldVariants } from \"@mui/material/TextField\";\nimport * as React from \"react\";\nimport { Control, Controller } from \"react-hook-form\";\n\ninterface BaseOption {\n  key: number | string | \"false\" | true;\n  title: string | number;\n  [x: string]: any;\n}\n\ninterface SingleClientSelectorProps<T extends BaseOption = BaseOption> {\n  name: string;\n  control: Control<any>;\n  label?: string;\n  data?: T[];\n  isLoading?: boolean;\n  disabled?: boolean;\n  size?: \"small\" | \"medium\";\n  disableClearable?: boolean;\n  variant?: TextFieldVariants;\n  placeholder?: string;\n  renderOption?: (\n    props: React.HTMLAttributes<HTMLLIElement>,\n    option: T,\n    state: AutocompleteRenderOptionState\n  ) => React.ReactNode;\n}\n\n/**\n * 🔍 کامپوننت انتخاب تکی کلاینت با قابلیت جست‌وجو، پشتیبانی از react-hook-form و MUI Autocomplete\n *\n * @component SingleClientSelector\n *\n * @template T - نوع گزینه‌ها که باید شامل `key` و `title` باشد و از BaseOption ارث‌بری کند.\n *\n * @param {string} name - نام فیلدی که در فرم ثبت می‌شود.\n * @param {Control<any>} control - کنترل فرم از `react-hook-form`.\n * @param {string} [label] - برچسب نمایشی برای فیلد.\n * @param {T[]} [data] - لیستی از گزینه‌ها شامل `key` و `title` به عنوان مقدار و متن نمایشی.\n * @param {boolean} [isLoading=false] - وضعیت بارگذاری (مثلاً هنگام فراخوانی API).\n * @param {boolean} [disabled=false] - غیرفعال بودن فیلد.\n * @param {\"small\" | \"medium\"} [size=\"medium\"] - اندازه ورودی.\n * @param {boolean} [disableClearable=false] - غیرفعال کردن امکان پاک‌کردن مقدار انتخاب‌شده.\n * @param {TextFieldVariants} [variant=\"outlined\"] - نوع نمایش TextField (outlined، filled، standard).\n * @param {string} [placeholder] - متن راهنما برای ورودی.\n * @param {(props: React.HTMLAttributes<HTMLLIElement>, option: T, state: AutocompleteRenderOptionState) => React.ReactNode} [renderOption] - تابعی سفارشی برای رندر آیتم‌ها در لیست.\n *\n * @returns {string | number | boolean | null} مقدار انتخاب‌شده (کلید گزینه یا null)\n *\n * @example\n * ```tsx\n * // استفاده ساده\n * <SingleClientSelector<{ title: string; key: number }>\n *   name=\"clientId\"\n *   label=\"انتخاب مشتری\"\n *   control={control}\n *   data={[\n *     { title: \"شرکت الف\", key: 1 },\n *     { title: \"شرکت ب\", key: 2 }\n *   ]}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // استفاده پیشرفته با رندرینگ سفارشی\n * <SingleClientSelector<Client>\n *   name=\"selectedClient\"\n *   label=\"انتخاب مشتری\"\n *   control={control}\n *   data={clients}\n *   isLoading={isLoadingClients}\n *   placeholder=\"جستجو و انتخاب مشتری...\"\n *   renderOption={(props, option) => (\n *     <li {...props} key={option.key}>\n *       <div style={{ display: 'flex', flexDirection: 'column' }}>\n *         <strong>{option.title}</strong>\n *         <small>{option.email}</small>\n *       </div>\n *     </li>\n *   )}\n * />\n * ```\n *\n * @description\n * این کامپوننت یک انتخاب‌گر تکی اختصاصی برای کلاینت‌ها با قابلیت‌های زیر است:\n *\n * ✅ **یکپارچگی با فرم**: پشتیبانی کامل از `react-hook-form` با validation\n * 🔍 **جست‌وجو**: امکان جست‌وجو در لیست گزینه‌ها\n * ⚡ **بارگذاری**: نمایش وضعیت loading هنگام fetch داده‌ها\n * 🎨 **سفارشی‌سازی**: امکان سفارشی‌سازی کامل نمایش آیتم‌ها\n * 🧹 **پاک‌سازی**: قابلیت پاک کردن انتخاب (قابل غیرفعال‌سازی)\n * 📱 **ریسپانسیو**: طراحی مناسب برای همه اندازه صفحه‌ها\n * 🌐 **RTL**: پشتیبانی کامل از راست به چپ\n * 🎯 **بهینه**: بهینه‌سازی شده برای عملکرد بالا با `useMemo`\n *\n * **نکات مهم:**\n * - مقدار خروجی همیشه `key` گزینه انتخاب‌شده است\n * - در صورت عدم انتخاب، مقدار `null` برگردانده می‌شود\n * - هر گزینه باید دارای `key` و `title` یکتا باشد\n * - کامپوننت خطاهای validation فرم را نمایش می‌دهد\n * - از Popper برای بهبود عملکرد dropdown استفاده می‌کند\n *\n * **الگوی استفاده معمول:**\n * ```tsx\n * // تعریف نوع داده\n * interface Client {\n *   key: number;\n *   title: string;\n *   email?: string;\n *   phone?: string;\n * }\n *\n * // در کامپوننت\n * const { control, watch } = useForm();\n * const { data: clients, isLoading } = useGetClients();\n *\n * return (\n *   <SingleClientSelector<Client>\n *     name=\"clientId\"\n *     control={control}\n *     label=\"انتخاب مشتری\"\n *     data={clients}\n *     isLoading={isLoading}\n *   />\n * );\n * ```\n */\nexport default function SingleClientSelector<\n  T extends BaseOption = BaseOption\n>({\n  name,\n  control,\n  label,\n  data,\n  isLoading,\n  disabled = false,\n  size = \"medium\",\n  disableClearable = false,\n  variant = \"outlined\",\n  placeholder,\n  renderOption,\n}: SingleClientSelectorProps<T>) {\n  const dataOptions = React.useMemo(\n    () =>\n      data?.map((value) => ({\n        ...value,\n        key: value.key || `key_${Math.random()}`,\n      })) || [],\n    [data]\n  );\n\n  const handleChange = (\n    _event: React.SyntheticEvent,\n    selected: T | null,\n    onChange: (value: any) => void\n  ) => {\n    // اصلاح: بررسی null و undefined\n    onChange(selected?.key ?? null);\n  };\n\n  return (\n    <Controller\n      name={name}\n      control={control}\n      render={({ field: { onChange, value, ref }, fieldState: { error } }) => {\n        const computedValue = React.useMemo(() => {\n          if (!value) return null;\n\n          // اصلاح: برای single selector از === استفاده می‌کنیم\n          return dataOptions.find(\n            (option) => String(option.key) === String(value)\n          )?.title\n            ? dataOptions.find((option) => String(option.key) === String(value))\n            : null;\n        }, [value, dataOptions]);\n\n        return (\n          <Autocomplete\n            disableClearable={disableClearable || isLoading}\n            disabled={disabled || isLoading}\n            size={size}\n            options={dataOptions}\n            sx={{ width: \"100%\" }}\n            noOptionsText=\"داده‌ای برای نمایش وجود ندارد\"\n            value={computedValue}\n            onChange={(event, newValue) =>\n              handleChange(event, newValue, onChange)\n            }\n            isOptionEqualToValue={(option, value) =>\n              String(option.key) === String(value?.key)\n            }\n            getOptionLabel={(option) => {\n              if (typeof option === \"string\") return option;\n              if (option?.title) return String(option.title);\n              return \"\";\n            }}\n            loading={isLoading}\n            loadingText=\"در حال بارگذاری...\"\n            renderOption={(props, option, state) => {\n              if (renderOption) {\n                return renderOption(props, option, state);\n              }\n              return (\n                <li\n                  {...props}\n                  key={`${option.key}`}\n                  style={{ margin: 5, borderRadius: 3 }}\n                >\n                  <div\n                    style={{\n                      display: \"flex\",\n                      flexDirection: \"row\",\n                      width: \"100%\",\n                    }}\n                  >\n                    <div style={{ flexDirection: \"column\", width: \"100%\" }}>\n                      <div style={{ fontWeight: \"normal\" }}>{option.title}</div>\n                    </div>\n                  </div>\n                </li>\n              );\n            }}\n            slots={{ popper: Popper }}\n            slotProps={{\n              popper: {\n                modifiers: [\n                  {\n                    name: \"preventOverflow\",\n                    options: {\n                      boundary: \"window\",\n                      rootBoundary: \"viewport\",\n                      altBoundary: true,\n                      padding: 10,\n                    },\n                  },\n                  {\n                    name: \"flip\",\n                    options: {\n                      fallbackPlacements: [\"top\", \"bottom\"],\n                    },\n                  },\n                ],\n              },\n            }}\n            renderInput={(params) => (\n              <TextField\n                {...params}\n                label={label}\n                error={!!error}\n                helperText={error?.message}\n                inputRef={ref}\n                variant={variant}\n                placeholder={placeholder}\n                InputLabelProps={{ shrink: true }}\n                InputProps={{\n                  ...params.InputProps,\n                  endAdornment: (\n                    <React.Fragment>\n                      {isLoading ? (\n                        <CircularProgress color=\"primary\" size={20} />\n                      ) : null}\n                      {params.InputProps.endAdornment}\n                    </React.Fragment>\n                  ),\n                }}\n              />\n            )}\n          />\n        );\n      }}\n    />\n  );\n}\n"],"mappings":"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","names":["React","import_ri","Autocomplete","value","TextField","import_Autocomplete","import_TextField","React","import_react_hook_form","import_material","Autocomplete","value","TextField","import_material","import_Autocomplete","import_TextField","React","import_react_hook_form","Autocomplete","value","TextField","import_material","import_Autocomplete","import_TextField","React","import_react_hook_form","Autocomplete","value","TextField"]}

package/dist/selectors/index.mjs

@@ -362,12 +362,14 @@ function SearchableSelector({
   name,
   control,
   label,
+  placeholder,
   data,
   inputValue,
   isLoading,
   disabled = false,
   size = "medium",
   disableClearable = false,
+  variant = "outlined",
   onChangeHandler,
   valueHandler,
   onFilterOptions,
@@ -476,7 +478,9 @@ function SearchableSelector({
               TextField3,
               {
                 ...params,
+                variant,
                 label,
+                placeholder,
                 error: !!error,
                 helperText: error?.message,
                 inputRef: ref,