@mamrp/components 1.0.49 → 1.2.0

package/dist/selectors/index.js

@@ -126,9 +126,21 @@ function MultiCheckSelector({
               }
               let iconElem = null;
               if (option.key === "All") {
-                iconElem = /* @__PURE__ */ React2.createElement(import_md.MdSelectAll, { size: 18, style: { marginLeft: 6, color: "#2563eb" } });
+                iconElem = /* @__PURE__ */ React2.createElement(
+                  import_md.MdSelectAll,
+                  {
+                    size: 18,
+                    style: { marginLeft: 6, color: "#2563eb" }
+                  }
+                );
               } else if (option.key === "ClearAll") {
-                iconElem = /* @__PURE__ */ React2.createElement(import_ri2.RiDeleteBin6Line, { size: 18, style: { marginLeft: 6, color: "#ef4444" } });
+                iconElem = /* @__PURE__ */ React2.createElement(
+                  import_ri2.RiDeleteBin6Line,
+                  {
+                    size: 18,
+                    style: { marginLeft: 6, color: "#ef4444" }
+                  }
+                );
               }
               return /* @__PURE__ */ React2.createElement(
                 "li",
@@ -166,26 +178,20 @@ function MultiCheckSelector({
               const total = dataOptions.length;
               const tagText = value2.length === total ? `${value2.length} \u0645\u0648\u0631\u062F \u0627\u0646\u062A\u062E\u0627\u0628 \u0634\u062F\u0647` : `${value2.length} \u0645\u0648\u0631\u062F \u0627\u0632 ${total} \u0627\u0646\u062A\u062E\u0627\u0628 \u0634\u062F\u0647`;
               return /* @__PURE__ */ React2.createElement(
-                "span",
+                "div",
                 {
                   style: {
-                    fontWeight: 600,
-                    fontSize: 15,
-                    padding: "2px 8px",
-                    borderRadius: 6,
-                    margin: "2px 0",
-                    letterSpacing: 0.2,
-                    userSelect: "none",
-                    maxWidth: "100%",
-                    whiteSpace: "nowrap",
+                    display: "flex",
+                    alignItems: "center",
+                    height: 36,
+                    // ارتفاع ثابت ورودی
                     overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    display: "inline-block",
-                    cursor: "pointer"
+                    whiteSpace: "nowrap",
+                    textOverflow: "ellipsis"
                   },
                   onClick: handleOpen
                 },
-                tagText
+                /* @__PURE__ */ React2.createElement("span", { style: { fontWeight: 600, fontSize: 15 } }, tagText)
               );
             },
             slots: { popper: import_material.Popper },
@@ -218,6 +224,7 @@ function MultiCheckSelector({
                 error: !!error,
                 helperText: error?.message,
                 inputRef: ref,
+                InputLabelProps: { shrink: true },
                 InputProps: {
                   ...params.InputProps,
                   endAdornment: /* @__PURE__ */ React2.createElement(React2.Fragment, null, isLoading ? /* @__PURE__ */ React2.createElement(import_material.CircularProgress, { color: "primary", size: 20 }) : null, params.InputProps.endAdornment)
@@ -346,6 +353,7 @@ function MultipleSelector({
                 error: !!error,
                 helperText: error?.message,
                 inputRef: ref,
+                InputLabelProps: { shrink: true },
                 InputProps: {
                   ...params.InputProps,
                   endAdornment: /* @__PURE__ */ React3.createElement(React3.Fragment, null, isLoading ? /* @__PURE__ */ React3.createElement(import_material2.CircularProgress, { color: "primary", size: 20 }) : null, params.InputProps.endAdornment)
@@ -487,6 +495,7 @@ function SearchableSelector({
                 error: !!error,
                 helperText: error?.message,
                 inputRef: ref,
+                InputLabelProps: { shrink: true },
                 InputProps: {
                   ...params.InputProps,
                   endAdornment: /* @__PURE__ */ React4.createElement(React4.Fragment, null, isLoading ? /* @__PURE__ */ React4.createElement(import_material3.CircularProgress, { color: "primary", size: 20 }) : null, params.InputProps.endAdornment)

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"],"sourcesContent":["export { default as MultiCheckSelector } from \"./multi-check-selector\";\nexport { default as MultipleSelector } from \"./multiple-selector\";\nexport { default as SearchableSelector } from \"./searchable-selector\";\n","import * as React from \"react\";\nexport { React };\n","import Autocomplete from \"@mui/material/Autocomplete\";\r\nimport TextField from \"@mui/material/TextField\";\r\nimport * as React from \"react\";\r\nimport { Control, Controller } from \"react-hook-form\";\r\nimport { Checkbox, CircularProgress, Popper } from \"@mui/material\";\r\nimport { FaCheckSquare } from \"react-icons/fa\";\r\nimport { RiCheckboxBlankLine } from \"react-icons/ri\";\r\nimport { MdSelectAll } from \"react-icons/md\";\r\nimport { RiDeleteBin6Line } from \"react-icons/ri\";\r\ninterface OptionType {\r\n  title: string;\r\n  key: string | number;\r\n  [x: string]: any; // برای پشتیبانی از فیلدهای اضافی\r\n}\r\nexport interface AutocompleteRenderOptionState {\r\n  inputValue: string;\r\n  index: number;\r\n  selected: boolean;\r\n}\r\ninterface MultipleSelectChipProps<T extends OptionType> {\r\n  name: string;\r\n  control: Control<any>;\r\n  label?: string;\r\n  data?: T[];\r\n  isLoading?: boolean;\r\n  disabled?: boolean;\r\n  size?: \"small\" | \"medium\";\r\n  clear?: boolean;\r\n\r\n  renderOption?: (\r\n    props: React.HTMLAttributes<HTMLLIElement>,\r\n    option: T,\r\n    state:AutocompleteRenderOptionState\r\n  ) => React.ReactNode;\r\n}\r\n/**\r\n * 📦 MultipleSelector — کامپوننت انتخاب چندگزینه‌ای پیشرفته\r\n *\r\n * @component MultipleSelector\r\n *\r\n * @template T — نوع داده‌ی گزینه‌ها که باید شامل فیلدهای `title` و `key` باشد.\r\n *\r\n * @param {string} name - نام فیلد در فرم (برای ثبت در react-hook-form).\r\n * @param {Control<any>} control - کنترل فرم از کتابخانه react-hook-form.\r\n * @param {string} [label] - برچسب ورودی.\r\n * @param {T[]} [data] - آرایه‌ای از گزینه‌ها که هر کدام باید شامل `title` (نمایش) و `key` (شناسه یکتا) باشد.\r\n * @param {boolean} [isLoading=false] - حالت لودینگ برای نمایش اسپینر در ورودی.\r\n * @param {boolean} [disabled=false] - غیرفعال‌کردن ورودی.\r\n * @param {\"small\" | \"medium\"} [size=\"medium\"] - سایز ورودی MUI Autocomplete.\r\n * @param {boolean} [clear=false] - اگر `false` باشد، قابلیت پاک کردن کامل (Clearable) غیرفعال می‌شود.\r\n * @param {(props: React.HTMLAttributes<HTMLLIElement>, option: T, state: AutocompleteRenderOptionState) => React.ReactNode} [renderOption] - تابع سفارشی برای رندر هر آیتم در لیست انتخاب.\r\n *\r\n * @description\r\n * این کامپوننت یک `Autocomplete` چندگزینه‌ای با قابلیت‌های زیر است:\r\n * - اتصال مستقیم به `react-hook-form` (با استفاده از Controller)\r\n * - انتخاب همه (`انتخاب همه`) یا پاک کردن همه (`پاک کردن همه`)\r\n * - نمایش تعداد آیتم‌های انتخاب شده به جای تگ‌های جداگانه\r\n * - پشتیبانی از حالت لودینگ و غیرفعال بودن\r\n * - امکان سفارشی‌سازی رندر آیتم‌ها (`renderOption`)\r\n * - آیکون‌های سفارشی برای انتخاب‌ها و گزینه‌های ویژه\r\n * - جلوگیری از بستن لیست هنگام انتخاب آیتم‌ها (`disableCloseOnSelect`)\r\n * - مدیریت موقعیت Popper با MUI modifiers\r\n *\r\n * @returns {Array<string | number>} آرایه‌ای از کلیدهای آیتم‌های انتخاب شده.\r\n *\r\n * @example\r\n * ```tsx\r\n * import { useForm, Controller } from \"react-hook-form\";\r\n *\r\n * type MyOption = { title: string; key: number };\r\n *\r\n * const options: MyOption[] = [\r\n *   { title: \"محصول ۱\", key: 1 },\r\n *   { title: \"محصول ۲\", key: 2 },\r\n * ];\r\n *\r\n * export default function MyForm() {\r\n *   const { control, handleSubmit } = useForm({ defaultValues: { productIds: [] } });\r\n *\r\n *   const onSubmit = (data: any) => {\r\n *     console.log(\"انتخاب شده‌ها:\", data.productIds);\r\n *   };\r\n *\r\n *   return (\r\n *     <form onSubmit={handleSubmit(onSubmit)}>\r\n *       <MultipleSelector<MyOption>\r\n *         name=\"productIds\"\r\n *         label=\"محصولات\"\r\n *         control={control}\r\n *         data={options}\r\n *         isLoading={false}\r\n *         size=\"small\"\r\n *         renderOption={(props, option, state) => (\r\n *           <li {...props} key={option.key}>\r\n *             <strong style={{ color: state.selected ? \"green\" : \"black\" }}>\r\n *               {option.title}\r\n *             </strong>\r\n *           </li>\r\n *         )}\r\n *       />\r\n *       <button type=\"submit\">ثبت</button>\r\n *     </form>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport default function MultiCheckSelector<T extends OptionType>({\r\n  name,\r\n  control,\r\n  label,\r\n  data,\r\n  isLoading,\r\n  disabled = false,\r\n  size = \"medium\",\r\n  clear = false,\r\n  renderOption,\r\n}: MultipleSelectChipProps<T>) {\r\n  const dataOptions =\r\n    data?.map((value) => ({\r\n      ...value,\r\n      key: value.key || `key_${Math.random()}`,\r\n    })) || [];\r\n\r\n  const combinedOptions =\r\n    dataOptions.length > 0\r\n      ? [\r\n          { title: \"انتخاب همه\", key: \"All\" } as T,\r\n          { title: \"پاک کردن همه\", key: \"ClearAll\" } as T,\r\n          ...dataOptions,\r\n        ]\r\n      : [...dataOptions];\r\n\r\n  const handleChange = (\r\n    _event: any,\r\n    selected: any,\r\n    onChange: (value: any) => void\r\n  ) => {\r\n    if (selected.some((item: any) => item.key === \"All\")) {\r\n      const allItems = [...dataOptions];\r\n      onChange(allItems.map((item) => item.key));\r\n    } else if (selected.some((item: any) => item.key === \"ClearAll\")) {\r\n      onChange([]);\r\n    } else {\r\n      onChange(selected.map((item: any) => item.key));\r\n    }\r\n  };\r\n  const icon = <RiCheckboxBlankLine size={20} />;\r\n  const checkedIcon = <FaCheckSquare size={20} />;\r\n\r\n  return (\r\n    <Controller\r\n      name={name}\r\n      control={control}\r\n      render={({ field: { onChange, value, ref }, fieldState: { error } }) => {\r\n        const computedValue = React.useMemo(() => {\r\n          if (Array.isArray(value) && dataOptions.length > 0) {\r\n            return dataOptions.filter((option: any) =>\r\n              value.includes(option.key)\r\n            );\r\n          }\r\n          return [];\r\n        }, [value, dataOptions]);\r\n\r\n        // کنترل باز و بسته شدن آتوکامپلیت\r\n        const autocompleteRef = React.useRef<any>(null);\r\n        const [open, setOpen] = React.useState(false);\r\n        const handleOpen = () => setOpen(true);\r\n        const handleClose = () => setOpen(false);\r\n        return (\r\n          <Autocomplete\r\n            multiple\r\n            disableClearable={clear}\r\n            disabled={disabled || isLoading}\r\n            size={size}\r\n            disableCloseOnSelect\r\n            options={combinedOptions}\r\n            sx={{ width: \"100%\" }}\r\n            noOptionsText=\"داده‌ای برای نمایش وجود ندارد\"\r\n            value={computedValue}\r\n            onChange={(event, value) =>\r\n              handleChange(event, value as T[], onChange)\r\n            }\r\n            isOptionEqualToValue={(option, value) =>\r\n              String(option.key) === String(value?.key)\r\n            }\r\n            getOptionLabel={(option) => option.title}\r\n            loading={isLoading}\r\n            loadingText=\"در حال بارگذاری...\"\r\n            open={open}\r\n            onOpen={handleOpen}\r\n            onClose={handleClose}\r\n            ref={autocompleteRef}\r\n            renderOption={(props, option, state) => {                \r\n              if (renderOption) {\r\n                return renderOption(props, option,state);\r\n              }\r\n              // آیکون مناسب برای گزینه‌های انتخاب همه و پاک کردن همه\r\n              let iconElem = null;\r\n              if (option.key === \"All\") {\r\n                iconElem = <MdSelectAll size={18} style={{ marginLeft: 6, color: '#2563eb' }} />;\r\n              } else if (option.key === \"ClearAll\") {\r\n                iconElem = <RiDeleteBin6Line size={18} style={{ marginLeft: 6, color: '#ef4444' }} />;\r\n              }\r\n              return (\r\n                <li\r\n                  {...props}\r\n                  key={`${option.key}`}\r\n                  style={{ margin: 5, borderRadius: 3 }}\r\n                >\r\n                  <div\r\n                    style={{\r\n                      display: \"flex\",\r\n                      flexDirection: \"row\",\r\n                      width: \"100%\",\r\n                      alignItems: \"center\",\r\n                    }}\r\n                  >\r\n                    {option.key === \"All\" || option.key === \"ClearAll\"\r\n                      ? iconElem\r\n                      : <Checkbox\r\n                          icon={icon}\r\n                          checkedIcon={checkedIcon}\r\n                          style={{ marginLeft: 8 }}\r\n                          checked={state.selected}\r\n                          sx={{margin:0 , padding:0}}\r\n                        />}\r\n                    <div style={{ flexDirection: \"row\", width: \"100%\" }}>\r\n                      <div style={{ fontWeight: \"normal\" }}>{option.title}</div>\r\n                    </div>\r\n                  </div>\r\n                </li>\r\n              );\r\n            }}\r\n            renderTags={(value) => {\r\n              if (value.length === 0) return null;\r\n              const total = dataOptions.length;\r\n              const tagText = value.length === total\r\n                ? `${value.length} مورد انتخاب شده`\r\n                : `${value.length} مورد از ${total} انتخاب شده`;\r\n              return (\r\n                <span\r\n                  style={{\r\n                    fontWeight: 600,\r\n                    fontSize: 15,\r\n                    padding: '2px 8px',\r\n                    borderRadius: 6,\r\n                    margin: '2px 0',\r\n                    letterSpacing: 0.2,\r\n                    userSelect: 'none',\r\n                    maxWidth: '100%',\r\n                    whiteSpace: 'nowrap',\r\n                    overflow: 'hidden',\r\n                    textOverflow: 'ellipsis',\r\n                    display: 'inline-block',\r\n                    cursor: 'pointer',\r\n                  }}\r\n                  onClick={handleOpen}\r\n                >\r\n                  {tagText}\r\n                </span>\r\n              );\r\n            }}\r\n            slots={{ popper: Popper }}\r\n            slotProps={{\r\n              popper: {\r\n                modifiers: [\r\n                  {\r\n                    name: \"preventOverflow\",\r\n                    options: {\r\n                      boundary: \"window\",\r\n                      rootBoundary: \"viewport\",\r\n                      altBoundary: true,\r\n                      padding: 10,\r\n                    },\r\n                  },\r\n                  {\r\n                    name: \"flip\",\r\n                    options: {\r\n                      fallbackPlacements: [\"top\", \"bottom\"],\r\n                    },\r\n                  },\r\n                ],\r\n              },\r\n            }}\r\n            renderInput={(params) => (\r\n              <TextField\r\n                {...params}\r\n                label={label}\r\n                error={!!error}\r\n                helperText={error?.message}\r\n                inputRef={ref}\r\n                InputProps={{\r\n                  ...params.InputProps,\r\n                  endAdornment: (\r\n                    <React.Fragment>\r\n                      {isLoading ? (\r\n                        <CircularProgress color=\"primary\" size={20} />\r\n                      ) : null}\r\n                      {params.InputProps.endAdornment}\r\n                    </React.Fragment>\r\n                  ),\r\n                }}\r\n              />\r\n            )}\r\n          />\r\n        );\r\n      }}\r\n    />\r\n  );\r\n}\r\n// ...existing code...\r\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  clear?: 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} [clear=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  clear = 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={clear}\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                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  clear?: 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} [clear=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  clear = 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={clear || 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                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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,0BAAyB;AACzB,uBAAsB;AACtB,IAAAA,SAAuB;AACvB,6BAAoC;AACpC,sBAAmD;AACnD,gBAA8B;AAC9B,gBAAoC;AACpC,gBAA4B;AAC5B,IAAAC,aAAiC;AAkGlB,SAAR,mBAA0D;AAAA,EAC/D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AACF,GAA+B;AAC7B,QAAM,cACJ,MAAM,IAAI,CAAC,WAAW;AAAA,IACpB,GAAG;AAAA,IACH,KAAK,MAAM,OAAO,OAAO,KAAK,OAAO,CAAC;AAAA,EACxC,EAAE,KAAK,CAAC;AAEV,QAAM,kBACJ,YAAY,SAAS,IACjB;AAAA,IACE,EAAE,OAAO,2DAAc,KAAK,MAAM;AAAA,IAClC,EAAE,OAAO,kEAAgB,KAAK,WAAW;AAAA,IACzC,GAAG;AAAA,EACL,IACA,CAAC,GAAG,WAAW;AAErB,QAAM,eAAe,CACnB,QACA,UACA,aACG;AACH,QAAI,SAAS,KAAK,CAAC,SAAc,KAAK,QAAQ,KAAK,GAAG;AACpD,YAAM,WAAW,CAAC,GAAG,WAAW;AAChC,eAAS,SAAS,IAAI,CAAC,SAAS,KAAK,GAAG,CAAC;AAAA,IAC3C,WAAW,SAAS,KAAK,CAAC,SAAc,KAAK,QAAQ,UAAU,GAAG;AAChE,eAAS,CAAC,CAAC;AAAA,IACb,OAAO;AACL,eAAS,SAAS,IAAI,CAAC,SAAc,KAAK,GAAG,CAAC;AAAA,IAChD;AAAA,EACF;AACA,QAAM,OAAO,qCAAC,iCAAoB,MAAM,IAAI;AAC5C,QAAM,cAAc,qCAAC,2BAAc,MAAM,IAAI;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,OAAO,IAAI,GAAG,YAAY,EAAE,MAAM,EAAE,MAAM;AACtE,cAAM,gBAAsB,eAAQ,MAAM;AACxC,cAAI,MAAM,QAAQ,KAAK,KAAK,YAAY,SAAS,GAAG;AAClD,mBAAO,YAAY;AAAA,cAAO,CAAC,WACzB,MAAM,SAAS,OAAO,GAAG;AAAA,YAC3B;AAAA,UACF;AACA,iBAAO,CAAC;AAAA,QACV,GAAG,CAAC,OAAO,WAAW,CAAC;AAGvB,cAAM,kBAAwB,cAAY,IAAI;AAC9C,cAAM,CAAC,MAAM,OAAO,IAAU,gBAAS,KAAK;AAC5C,cAAM,aAAa,MAAM,QAAQ,IAAI;AACrC,cAAM,cAAc,MAAM,QAAQ,KAAK;AACvC,eACE;AAAA,UAAC,oBAAAC;AAAA,UAAA;AAAA,YACC,UAAQ;AAAA,YACR,kBAAkB;AAAA,YAClB,UAAU,YAAY;AAAA,YACtB;AAAA,YACA,sBAAoB;AAAA,YACpB,SAAS;AAAA,YACT,IAAI,EAAE,OAAO,OAAO;AAAA,YACpB,eAAc;AAAA,YACd,OAAO;AAAA,YACP,UAAU,CAAC,OAAOC,WAChB,aAAa,OAAOA,QAAc,QAAQ;AAAA,YAE5C,sBAAsB,CAAC,QAAQA,WAC7B,OAAO,OAAO,GAAG,MAAM,OAAOA,QAAO,GAAG;AAAA,YAE1C,gBAAgB,CAAC,WAAW,OAAO;AAAA,YACnC,SAAS;AAAA,YACT,aAAY;AAAA,YACZ;AAAA,YACA,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,KAAK;AAAA,YACL,cAAc,CAAC,OAAO,QAAQ,UAAU;AACtC,kBAAI,cAAc;AAChB,uBAAO,aAAa,OAAO,QAAO,KAAK;AAAA,cACzC;AAEA,kBAAI,WAAW;AACf,kBAAI,OAAO,QAAQ,OAAO;AACxB,2BAAW,qCAAC,yBAAY,MAAM,IAAI,OAAO,EAAE,YAAY,GAAG,OAAO,UAAU,GAAG;AAAA,cAChF,WAAW,OAAO,QAAQ,YAAY;AACpC,2BAAW,qCAAC,+BAAiB,MAAM,IAAI,OAAO,EAAE,YAAY,GAAG,OAAO,UAAU,GAAG;AAAA,cACrF;AACA,qBACE;AAAA,gBAAC;AAAA;AAAA,kBACE,GAAG;AAAA,kBACJ,KAAK,GAAG,OAAO,GAAG;AAAA,kBAClB,OAAO,EAAE,QAAQ,GAAG,cAAc,EAAE;AAAA;AAAA,gBAEpC;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO;AAAA,sBACL,SAAS;AAAA,sBACT,eAAe;AAAA,sBACf,OAAO;AAAA,sBACP,YAAY;AAAA,oBACd;AAAA;AAAA,kBAEC,OAAO,QAAQ,SAAS,OAAO,QAAQ,aACpC,WACA;AAAA,oBAAC;AAAA;AAAA,sBACC;AAAA,sBACA;AAAA,sBACA,OAAO,EAAE,YAAY,EAAE;AAAA,sBACvB,SAAS,MAAM;AAAA,sBACf,IAAI,EAAC,QAAO,GAAI,SAAQ,EAAC;AAAA;AAAA,kBAC3B;AAAA,kBACJ,qCAAC,SAAI,OAAO,EAAE,eAAe,OAAO,OAAO,OAAO,KAChD,qCAAC,SAAI,OAAO,EAAE,YAAY,SAAS,KAAI,OAAO,KAAM,CACtD;AAAA,gBACF;AAAA,cACF;AAAA,YAEJ;AAAA,YACA,YAAY,CAACA,WAAU;AACrB,kBAAIA,OAAM,WAAW,EAAG,QAAO;AAC/B,oBAAM,QAAQ,YAAY;AAC1B,oBAAM,UAAUA,OAAM,WAAW,QAC7B,GAAGA,OAAM,MAAM,sFACf,GAAGA,OAAM,MAAM,0CAAY,KAAK;AACpC,qBACE;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO;AAAA,oBACL,YAAY;AAAA,oBACZ,UAAU;AAAA,oBACV,SAAS;AAAA,oBACT,cAAc;AAAA,oBACd,QAAQ;AAAA,oBACR,eAAe;AAAA,oBACf,YAAY;AAAA,oBACZ,UAAU;AAAA,oBACV,YAAY;AAAA,oBACZ,UAAU;AAAA,oBACV,cAAc;AAAA,oBACd,SAAS;AAAA,oBACT,QAAQ;AAAA,kBACV;AAAA,kBACA,SAAS;AAAA;AAAA,gBAER;AAAA,cACH;AAAA,YAEJ;AAAA,YACA,OAAO,EAAE,QAAQ,uBAAO;AAAA,YACxB,WAAW;AAAA,cACT,QAAQ;AAAA,gBACN,WAAW;AAAA,kBACT;AAAA,oBACE,MAAM;AAAA,oBACN,SAAS;AAAA,sBACP,UAAU;AAAA,sBACV,cAAc;AAAA,sBACd,aAAa;AAAA,sBACb,SAAS;AAAA,oBACX;AAAA,kBACF;AAAA,kBACA;AAAA,oBACE,MAAM;AAAA,oBACN,SAAS;AAAA,sBACP,oBAAoB,CAAC,OAAO,QAAQ;AAAA,oBACtC;AAAA,kBACF;AAAA,gBACF;AAAA,cACF;AAAA,YACF;AAAA,YACA,aAAa,CAAC,WACZ;AAAA,cAAC,iBAAAC;AAAA,cAAA;AAAA,gBACE,GAAG;AAAA,gBACJ;AAAA,gBACA,OAAO,CAAC,CAAC;AAAA,gBACT,YAAY,OAAO;AAAA,gBACnB,UAAU;AAAA,gBACV,YAAY;AAAA,kBACV,GAAG,OAAO;AAAA,kBACV,cACE,qCAAO,iBAAN,MACE,YACC,qCAAC,oCAAiB,OAAM,WAAU,MAAM,IAAI,IAC1C,MACH,OAAO,WAAW,YACrB;AAAA,gBAEJ;AAAA;AAAA,YACF;AAAA;AAAA,QAEJ;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;;;ACrTA,IAAAC,uBAAyB;AACzB,IAAAC,oBAAsB;AACtB,IAAAC,SAAuB;AACvB,IAAAC,0BAAoC;AACpC,IAAAC,mBAAyC;AAiE1B,SAAR,iBAAwD;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AACF,GAA+B;AAC7B,QAAM,cACJ,MAAM,IAAI,CAAC,WAAW;AAAA,IACpB,GAAG;AAAA,IACH,KAAK,MAAM,OAAO,OAAO,KAAK,OAAO,CAAC;AAAA,EACxC,EAAE,KAAK,CAAC;AAEV,QAAM,kBACJ,YAAY,SAAS,IACjB,CAAC,EAAE,OAAO,2DAAc,KAAK,MAAM,GAAQ,GAAG,WAAW,IACzD,CAAC,GAAG,WAAW;AAErB,QAAM,eAAe,CACnB,QACA,UACA,aACG;AACH,QAAI,SAAS,KAAK,CAAC,SAAc,KAAK,QAAQ,KAAK,GAAG;AACpD,YAAM,WAAW,CAAC,GAAG,WAAW;AAChC,eAAS,SAAS,IAAI,CAAC,SAAS,KAAK,GAAG,CAAC;AAAA,IAC3C,OAAO;AACL,eAAS,SAAS,IAAI,CAAC,SAAc,KAAK,GAAG,CAAC;AAAA,IAChD;AAAA,EACF;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,OAAO,IAAI,GAAG,YAAY,EAAE,MAAM,EAAE,MAAM;AACtE,cAAM,gBAAsB,eAAQ,MAAM;AACxC,cAAI,MAAM,QAAQ,KAAK,KAAK,YAAY,SAAS,GAAG;AAClD,mBAAO,YAAY;AAAA,cAAO,CAAC,WACzB,MAAM,SAAS,OAAO,GAAG;AAAA,YAC3B;AAAA,UACF;AACA,iBAAO,CAAC;AAAA,QACV,GAAG,CAAC,OAAO,WAAW,CAAC;AAEvB,eACE;AAAA,UAAC,qBAAAC;AAAA,UAAA;AAAA,YACC,UAAQ;AAAA,YACR,kBAAkB;AAAA,YAClB,UAAU,YAAY;AAAA,YACtB;AAAA,YACA,sBAAoB;AAAA,YACpB,SAAS;AAAA,YACT,IAAI,EAAE,OAAO,OAAO;AAAA,YACpB,eAAc;AAAA,YACd,OAAO;AAAA,YACP,UAAU,CAAC,OAAOC,WAChB,aAAa,OAAOA,QAAc,QAAQ;AAAA,YAE5C,sBAAsB,CAAC,QAAQA,WAC7B,OAAO,OAAO,GAAG,MAAM,OAAOA,QAAO,GAAG;AAAA,YAE1C,gBAAgB,CAAC,WAAW,OAAO;AAAA,YACnC,SAAS;AAAA,YACT,aAAY;AAAA,YACZ,cAAc,CAAC,OAAO,WAAW;AAC/B,kBAAI,cAAc;AAChB,uBAAO,aAAa,OAAO,MAAM;AAAA,cACnC;AACA,qBACE;AAAA,gBAAC;AAAA;AAAA,kBACE,GAAG;AAAA,kBACJ,KAAK,GAAG,OAAO,GAAG;AAAA,kBAClB,OAAO,EAAE,QAAQ,GAAG,cAAc,EAAE;AAAA;AAAA,gBAEpC;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO;AAAA,sBACL,SAAS;AAAA,sBACT,eAAe;AAAA,sBACf,OAAO;AAAA,oBACT;AAAA;AAAA,kBAEA,qCAAC,SAAI,OAAO,EAAE,eAAe,UAAU,OAAO,OAAO,KACnD,qCAAC,SAAI,OAAO,EAAE,YAAY,SAAS,KAAI,OAAO,KAAM,CACtD;AAAA,gBACF;AAAA,cACF;AAAA,YAEJ;AAAA,YACA,OAAO,EAAE,QAAQ,wBAAO;AAAA,YACxB,WAAW;AAAA,cACT,QAAQ;AAAA,gBACN,WAAW;AAAA,kBACT;AAAA,oBACE,MAAM;AAAA,oBACN,SAAS;AAAA,sBACP,UAAU;AAAA,sBACV,cAAc;AAAA,sBACd,aAAa;AAAA,sBACb,SAAS;AAAA,oBACX;AAAA,kBACF;AAAA,kBACA;AAAA,oBACE,MAAM;AAAA,oBACN,SAAS;AAAA,sBACP,oBAAoB,CAAC,OAAO,QAAQ;AAAA,oBACtC;AAAA,kBACF;AAAA,gBACF;AAAA,cACF;AAAA,YACF;AAAA,YACA,aAAa,CAAC,WACZ;AAAA,cAAC,kBAAAC;AAAA,cAAA;AAAA,gBACE,GAAG;AAAA,gBACJ;AAAA,gBACA,OAAO,CAAC,CAAC;AAAA,gBACT,YAAY,OAAO;AAAA,gBACnB,UAAU;AAAA,gBACV,YAAY;AAAA,kBACV,GAAG,OAAO;AAAA,kBACV,cACE,qCAAO,iBAAN,MACE,YACC,qCAAC,qCAAiB,OAAM,WAAU,MAAM,IAAI,IAC1C,MACH,OAAO,WAAW,YACrB;AAAA,gBAEJ;AAAA;AAAA,YACF;AAAA;AAAA,QAEJ;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;;;AChNA,IAAAC,mBAAyC;AACzC,IAAAC,uBAAyB;AACzB,IAAAC,oBAAsB;AACtB,IAAAC,SAAuB;AACvB,IAAAC,0BAAoC;AA8ErB,SAAR,mBAAuE;AAAA,EAC5E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAEF,GAAkC;AAChC,QAAM,cACJ,MAAM,IAAI,CAAC,WAAc;AAAA,IACvB,GAAG;AAAA,EACL,EAAE,KAAK,CAAC;AAGV,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,OAAO,IAAI,GAAG,YAAY,EAAE,MAAM,EAAE,MAAM;AACtE,cAAM,iBAAuB;AAAA,UAC3B,MAAM,YAAY,KAAK,CAAC,MAAM,GAAG,OAAO,KAAK,KAAK;AAAA,UAClD,CAAC,OAAO,WAAW;AAAA,QACrB;AAEA,eACE;AAAA,UAAC,qBAAAC;AAAA,UAAA;AAAA,YACC,UAAU;AAAA,YACV,kBAAkB,SAAS;AAAA,YAC3B;AAAA,YACA,eAAa;AAAA,YACb;AAAA,YACA,sBAAsB;AAAA,YACtB,SAAS;AAAA,YACT,YAAY,eAAe,aAAa,KAAK,IAAI;AAAA,YACjD,eAAe,CAAC,GAAG,UAAU,WAAW;AACtC,wBAAU,WAAW,SAAS,IAAI;AAElC,8BAAgB,QAAQ;AAAA,YAC1B;AAAA,YACA,IAAI;AAAA,cACF,OAAO;AAAA,YACT;AAAA,YACA,eAAc;AAAA,YACd,OAAO;AAAA,YACP,UAAU,CAAC,GAAGC,WAAU;AAEtB,kBAAI,OAAOA,WAAU,UAAU;AAG7B,yBAASA,MAAY;AACrB,gCAAgBA,MAAK;AAAA,cACvB,WAESA,UAAS,OAAOA,WAAU,UAAU;AAC3C,kCACI,gBAAgBA,QAAO,QAAQ,IAC/B,SAASA,OAAM,GAAG;AACtB,gCAAgB,OAAOA,OAAM,KAAK,CAAC;AAAA,cACrC,OAEK;AACH,yBAAS,IAAI;AACb,gCAAgB,EAAE;AAAA,cACpB;AAAA,YACF;AAAA,YACA,gBAAgB,CAAC,WAAW;AAC1B,kBAAI,OAAO,WAAW,SAAU,QAAO;AACvC,kBAAI,QAAQ,MAAO,QAAO,OAAO,OAAO,KAAK;AAC7C,qBAAO;AAAA,YACT;AAAA,YACA,SAAS;AAAA,YACT,aAAY;AAAA,YACZ,cAAc,CAAC,OAAO,WAAW;AAC/B,kBAAI,cAAc;AAChB,uBAAO,aAAa,OAAO,MAAM;AAAA,cACnC;AACA,qBACE;AAAA,gBAAC;AAAA;AAAA,kBACE,GAAG;AAAA,kBACJ,KAAK,GAAG,OAAO,GAAG;AAAA,kBAClB,OAAO,EAAE,QAAQ,GAAG,cAAc,EAAE;AAAA;AAAA,gBAEpC;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO;AAAA,sBACL,SAAS;AAAA,sBACT,eAAe;AAAA,sBACf,OAAO;AAAA,oBACT;AAAA;AAAA,kBAEA,qCAAC,SAAI,OAAO,EAAE,eAAe,UAAU,OAAO,OAAO,KACnD,qCAAC,SAAI,OAAO,EAAE,YAAY,SAAS,KAAI,OAAO,KAAM,CACtD;AAAA,gBACF;AAAA,cACF;AAAA,YAEJ;AAAA,YACA,OAAO,EAAE,QAAQ,wBAAO;AAAA,YACxB,WAAW;AAAA,cACT,QAAQ;AAAA,gBACN,WAAW;AAAA,kBACT;AAAA,oBACE,MAAM;AAAA,oBACN,SAAS;AAAA,sBACP,UAAU;AAAA,sBACV,cAAc;AAAA,sBACd,aAAa;AAAA,sBACb,SAAS;AAAA,oBACX;AAAA,kBACF;AAAA,kBACA;AAAA,oBACE,MAAM;AAAA,oBACN,SAAS;AAAA,sBACP,oBAAoB,CAAC,OAAO,QAAQ;AAAA;AAAA,oBACtC;AAAA,kBACF;AAAA,gBACF;AAAA,cACF;AAAA,YACF;AAAA,YACA,aAAa,CAAC,WACZ;AAAA,cAAC,kBAAAC;AAAA,cAAA;AAAA,gBACE,GAAG;AAAA,gBACJ;AAAA,gBACA,OAAO,CAAC,CAAC;AAAA,gBACT,YAAY,OAAO;AAAA,gBACnB,UAAU;AAAA,gBACV,YAAY;AAAA,kBACV,GAAG,OAAO;AAAA,kBACV,cACE,qCAAO,iBAAN,MACE,YACC,qCAAC,qCAAiB,OAAM,WAAU,MAAM,IAAI,IAC1C,MACH,OAAO,WAAW,YACrB;AAAA,gBAEJ;AAAA;AAAA,YACF;AAAA;AAAA,QAEJ;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;","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"]}
+{"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"],"sourcesContent":["export { default as MultiCheckSelector } from \"./multi-check-selector\";\nexport { default as MultipleSelector } from \"./multiple-selector\";\nexport { default as SearchableSelector } from \"./searchable-selector\";\n","import * as React from \"react\";\nexport { React };\n","import Autocomplete from \"@mui/material/Autocomplete\";\r\nimport TextField from \"@mui/material/TextField\";\r\nimport * as React from \"react\";\r\nimport { Control, Controller } from \"react-hook-form\";\r\nimport { Checkbox, CircularProgress, Popper } from \"@mui/material\";\r\nimport { FaCheckSquare } from \"react-icons/fa\";\r\nimport { RiCheckboxBlankLine } from \"react-icons/ri\";\r\nimport { MdSelectAll } from \"react-icons/md\";\r\nimport { RiDeleteBin6Line } from \"react-icons/ri\";\r\ninterface OptionType {\r\n  title: string;\r\n  key: string | number;\r\n  [x: string]: any; // برای پشتیبانی از فیلدهای اضافی\r\n}\r\nexport interface AutocompleteRenderOptionState {\r\n  inputValue: string;\r\n  index: number;\r\n  selected: boolean;\r\n}\r\ninterface MultipleSelectChipProps<T extends OptionType> {\r\n  name: string;\r\n  control: Control<any>;\r\n  label?: string;\r\n  data?: T[];\r\n  isLoading?: boolean;\r\n  disabled?: boolean;\r\n  size?: \"small\" | \"medium\";\r\n  clear?: boolean;\r\n\r\n  renderOption?: (\r\n    props: React.HTMLAttributes<HTMLLIElement>,\r\n    option: T,\r\n    state: AutocompleteRenderOptionState\r\n  ) => React.ReactNode;\r\n}\r\n/**\r\n * 📦 MultipleSelector — کامپوننت انتخاب چندگزینه‌ای پیشرفته\r\n *\r\n * @component MultipleSelector\r\n *\r\n * @template T — نوع داده‌ی گزینه‌ها که باید شامل فیلدهای `title` و `key` باشد.\r\n *\r\n * @param {string} name - نام فیلد در فرم (برای ثبت در react-hook-form).\r\n * @param {Control<any>} control - کنترل فرم از کتابخانه react-hook-form.\r\n * @param {string} [label] - برچسب ورودی.\r\n * @param {T[]} [data] - آرایه‌ای از گزینه‌ها که هر کدام باید شامل `title` (نمایش) و `key` (شناسه یکتا) باشد.\r\n * @param {boolean} [isLoading=false] - حالت لودینگ برای نمایش اسپینر در ورودی.\r\n * @param {boolean} [disabled=false] - غیرفعال‌کردن ورودی.\r\n * @param {\"small\" | \"medium\"} [size=\"medium\"] - سایز ورودی MUI Autocomplete.\r\n * @param {boolean} [clear=false] - اگر `false` باشد، قابلیت پاک کردن کامل (Clearable) غیرفعال می‌شود.\r\n * @param {(props: React.HTMLAttributes<HTMLLIElement>, option: T, state: AutocompleteRenderOptionState) => React.ReactNode} [renderOption] - تابع سفارشی برای رندر هر آیتم در لیست انتخاب.\r\n *\r\n * @description\r\n * این کامپوننت یک `Autocomplete` چندگزینه‌ای با قابلیت‌های زیر است:\r\n * - اتصال مستقیم به `react-hook-form` (با استفاده از Controller)\r\n * - انتخاب همه (`انتخاب همه`) یا پاک کردن همه (`پاک کردن همه`)\r\n * - نمایش تعداد آیتم‌های انتخاب شده به جای تگ‌های جداگانه\r\n * - پشتیبانی از حالت لودینگ و غیرفعال بودن\r\n * - امکان سفارشی‌سازی رندر آیتم‌ها (`renderOption`)\r\n * - آیکون‌های سفارشی برای انتخاب‌ها و گزینه‌های ویژه\r\n * - جلوگیری از بستن لیست هنگام انتخاب آیتم‌ها (`disableCloseOnSelect`)\r\n * - مدیریت موقعیت Popper با MUI modifiers\r\n *\r\n * @returns {Array<string | number>} آرایه‌ای از کلیدهای آیتم‌های انتخاب شده.\r\n *\r\n * @example\r\n * ```tsx\r\n * import { useForm, Controller } from \"react-hook-form\";\r\n *\r\n * type MyOption = { title: string; key: number };\r\n *\r\n * const options: MyOption[] = [\r\n *   { title: \"محصول ۱\", key: 1 },\r\n *   { title: \"محصول ۲\", key: 2 },\r\n * ];\r\n *\r\n * export default function MyForm() {\r\n *   const { control, handleSubmit } = useForm({ defaultValues: { productIds: [] } });\r\n *\r\n *   const onSubmit = (data: any) => {\r\n *     console.log(\"انتخاب شده‌ها:\", data.productIds);\r\n *   };\r\n *\r\n *   return (\r\n *     <form onSubmit={handleSubmit(onSubmit)}>\r\n *       <MultipleSelector<MyOption>\r\n *         name=\"productIds\"\r\n *         label=\"محصولات\"\r\n *         control={control}\r\n *         data={options}\r\n *         isLoading={false}\r\n *         size=\"small\"\r\n *         renderOption={(props, option, state) => (\r\n *           <li {...props} key={option.key}>\r\n *             <strong style={{ color: state.selected ? \"green\" : \"black\" }}>\r\n *               {option.title}\r\n *             </strong>\r\n *           </li>\r\n *         )}\r\n *       />\r\n *       <button type=\"submit\">ثبت</button>\r\n *     </form>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport default function MultiCheckSelector<T extends OptionType>({\r\n  name,\r\n  control,\r\n  label,\r\n  data,\r\n  isLoading,\r\n  disabled = false,\r\n  size = \"medium\",\r\n  clear = false,\r\n  renderOption,\r\n}: MultipleSelectChipProps<T>) {\r\n  const dataOptions =\r\n    data?.map((value) => ({\r\n      ...value,\r\n      key: value.key || `key_${Math.random()}`,\r\n    })) || [];\r\n\r\n  const combinedOptions =\r\n    dataOptions.length > 0\r\n      ? [\r\n          { title: \"انتخاب همه\", key: \"All\" } as T,\r\n          { title: \"پاک کردن همه\", key: \"ClearAll\" } as T,\r\n          ...dataOptions,\r\n        ]\r\n      : [...dataOptions];\r\n\r\n  const handleChange = (\r\n    _event: any,\r\n    selected: any,\r\n    onChange: (value: any) => void\r\n  ) => {\r\n    if (selected.some((item: any) => item.key === \"All\")) {\r\n      const allItems = [...dataOptions];\r\n      onChange(allItems.map((item) => item.key));\r\n    } else if (selected.some((item: any) => item.key === \"ClearAll\")) {\r\n      onChange([]);\r\n    } else {\r\n      onChange(selected.map((item: any) => item.key));\r\n    }\r\n  };\r\n  const icon = <RiCheckboxBlankLine size={20} />;\r\n  const checkedIcon = <FaCheckSquare size={20} />;\r\n\r\n  return (\r\n    <Controller\r\n      name={name}\r\n      control={control}\r\n      render={({ field: { onChange, value, ref }, fieldState: { error } }) => {\r\n        const computedValue = React.useMemo(() => {\r\n          if (Array.isArray(value) && dataOptions.length > 0) {\r\n            return dataOptions.filter((option: any) =>\r\n              value.includes(option.key)\r\n            );\r\n          }\r\n          return [];\r\n        }, [value, dataOptions]);\r\n\r\n        // کنترل باز و بسته شدن آتوکامپلیت\r\n        const autocompleteRef = React.useRef<any>(null);\r\n        const [open, setOpen] = React.useState(false);\r\n        const handleOpen = () => setOpen(true);\r\n        const handleClose = () => setOpen(false);\r\n        return (\r\n          <Autocomplete\r\n            multiple\r\n            disableClearable={clear}\r\n            disabled={disabled || isLoading}\r\n            size={size}\r\n            disableCloseOnSelect\r\n            options={combinedOptions}\r\n            sx={{ width: \"100%\" }}\r\n            noOptionsText=\"داده‌ای برای نمایش وجود ندارد\"\r\n            value={computedValue}\r\n            onChange={(event, value) =>\r\n              handleChange(event, value as T[], onChange)\r\n            }\r\n            isOptionEqualToValue={(option, value) =>\r\n              String(option.key) === String(value?.key)\r\n            }\r\n            getOptionLabel={(option) => option.title}\r\n            loading={isLoading}\r\n            loadingText=\"در حال بارگذاری...\"\r\n            open={open}\r\n            onOpen={handleOpen}\r\n            onClose={handleClose}\r\n            ref={autocompleteRef}\r\n            renderOption={(props, option, state) => {\r\n              if (renderOption) {\r\n                return renderOption(props, option, state);\r\n              }\r\n              // آیکون مناسب برای گزینه‌های انتخاب همه و پاک کردن همه\r\n              let iconElem = null;\r\n              if (option.key === \"All\") {\r\n                iconElem = (\r\n                  <MdSelectAll\r\n                    size={18}\r\n                    style={{ marginLeft: 6, color: \"#2563eb\" }}\r\n                  />\r\n                );\r\n              } else if (option.key === \"ClearAll\") {\r\n                iconElem = (\r\n                  <RiDeleteBin6Line\r\n                    size={18}\r\n                    style={{ marginLeft: 6, color: \"#ef4444\" }}\r\n                  />\r\n                );\r\n              }\r\n              return (\r\n                <li\r\n                  {...props}\r\n                  key={`${option.key}`}\r\n                  style={{ margin: 5, borderRadius: 3 }}\r\n                >\r\n                  <div\r\n                    style={{\r\n                      display: \"flex\",\r\n                      flexDirection: \"row\",\r\n                      width: \"100%\",\r\n                      alignItems: \"center\",\r\n                    }}\r\n                  >\r\n                    {option.key === \"All\" || option.key === \"ClearAll\" ? (\r\n                      iconElem\r\n                    ) : (\r\n                      <Checkbox\r\n                        icon={icon}\r\n                        checkedIcon={checkedIcon}\r\n                        style={{ marginLeft: 8 }}\r\n                        checked={state.selected}\r\n                        sx={{ margin: 0, padding: 0 }}\r\n                      />\r\n                    )}\r\n                    <div style={{ flexDirection: \"row\", width: \"100%\" }}>\r\n                      <div style={{ fontWeight: \"normal\" }}>{option.title}</div>\r\n                    </div>\r\n                  </div>\r\n                </li>\r\n              );\r\n            }}\r\n            renderTags={(value) => {\r\n              if (value.length === 0) return null;\r\n              const total = dataOptions.length;\r\n              const tagText =\r\n                value.length === total\r\n                  ? `${value.length} مورد انتخاب شده`\r\n                  : `${value.length} مورد از ${total} انتخاب شده`;\r\n\r\n              return (\r\n                <div\r\n                  style={{\r\n                    display: \"flex\",\r\n                    alignItems: \"center\",\r\n                    height: 36, // ارتفاع ثابت ورودی\r\n                    overflow: \"hidden\",\r\n                    whiteSpace: \"nowrap\",\r\n                    textOverflow: \"ellipsis\",\r\n                  }}\r\n                  onClick={handleOpen}\r\n                >\r\n                  <span style={{ fontWeight: 600, fontSize: 15 }}>\r\n                    {tagText}\r\n                  </span>\r\n                </div>\r\n              );\r\n            }}\r\n            slots={{ popper: Popper }}\r\n            slotProps={{\r\n              popper: {\r\n                modifiers: [\r\n                  {\r\n                    name: \"preventOverflow\",\r\n                    options: {\r\n                      boundary: \"window\",\r\n                      rootBoundary: \"viewport\",\r\n                      altBoundary: true,\r\n                      padding: 10,\r\n                    },\r\n                  },\r\n                  {\r\n                    name: \"flip\",\r\n                    options: {\r\n                      fallbackPlacements: [\"top\", \"bottom\"],\r\n                    },\r\n                  },\r\n                ],\r\n              },\r\n            }}\r\n            renderInput={(params) => (\r\n              <TextField\r\n                {...params}\r\n                label={label}\r\n                error={!!error}\r\n                helperText={error?.message}\r\n                inputRef={ref}\r\n                InputLabelProps={{ shrink: true }}\r\n                InputProps={{\r\n                  ...params.InputProps,\r\n                  endAdornment: (\r\n                    <React.Fragment>\r\n                      {isLoading ? (\r\n                        <CircularProgress color=\"primary\" size={20} />\r\n                      ) : null}\r\n                      {params.InputProps.endAdornment}\r\n                    </React.Fragment>\r\n                  ),\r\n                }}\r\n              />\r\n            )}\r\n          />\r\n        );\r\n      }}\r\n    />\r\n  );\r\n}\r\n// ...existing code...\r\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  clear?: 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} [clear=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  clear = 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={clear}\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  clear?: 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} [clear=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  clear = 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={clear || 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"],"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"]}

package/dist/selectors/index.mjs

@@ -88,9 +88,21 @@ function MultiCheckSelector({
               }
               let iconElem = null;
               if (option.key === "All") {
-                iconElem = /* @__PURE__ */ React2.createElement(MdSelectAll, { size: 18, style: { marginLeft: 6, color: "#2563eb" } });
+                iconElem = /* @__PURE__ */ React2.createElement(
+                  MdSelectAll,
+                  {
+                    size: 18,
+                    style: { marginLeft: 6, color: "#2563eb" }
+                  }
+                );
               } else if (option.key === "ClearAll") {
-                iconElem = /* @__PURE__ */ React2.createElement(RiDeleteBin6Line, { size: 18, style: { marginLeft: 6, color: "#ef4444" } });
+                iconElem = /* @__PURE__ */ React2.createElement(
+                  RiDeleteBin6Line,
+                  {
+                    size: 18,
+                    style: { marginLeft: 6, color: "#ef4444" }
+                  }
+                );
               }
               return /* @__PURE__ */ React2.createElement(
                 "li",
@@ -128,26 +140,20 @@ function MultiCheckSelector({
               const total = dataOptions.length;
               const tagText = value2.length === total ? `${value2.length} \u0645\u0648\u0631\u062F \u0627\u0646\u062A\u062E\u0627\u0628 \u0634\u062F\u0647` : `${value2.length} \u0645\u0648\u0631\u062F \u0627\u0632 ${total} \u0627\u0646\u062A\u062E\u0627\u0628 \u0634\u062F\u0647`;
               return /* @__PURE__ */ React2.createElement(
-                "span",
+                "div",
                 {
                   style: {
-                    fontWeight: 600,
-                    fontSize: 15,
-                    padding: "2px 8px",
-                    borderRadius: 6,
-                    margin: "2px 0",
-                    letterSpacing: 0.2,
-                    userSelect: "none",
-                    maxWidth: "100%",
-                    whiteSpace: "nowrap",
+                    display: "flex",
+                    alignItems: "center",
+                    height: 36,
+                    // ارتفاع ثابت ورودی
                     overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    display: "inline-block",
-                    cursor: "pointer"
+                    whiteSpace: "nowrap",
+                    textOverflow: "ellipsis"
                   },
                   onClick: handleOpen
                 },
-                tagText
+                /* @__PURE__ */ React2.createElement("span", { style: { fontWeight: 600, fontSize: 15 } }, tagText)
               );
             },
             slots: { popper: Popper },
@@ -180,6 +186,7 @@ function MultiCheckSelector({
                 error: !!error,
                 helperText: error?.message,
                 inputRef: ref,
+                InputLabelProps: { shrink: true },
                 InputProps: {
                   ...params.InputProps,
                   endAdornment: /* @__PURE__ */ React2.createElement(React2.Fragment, null, isLoading ? /* @__PURE__ */ React2.createElement(CircularProgress, { color: "primary", size: 20 }) : null, params.InputProps.endAdornment)
@@ -308,6 +315,7 @@ function MultipleSelector({
                 error: !!error,
                 helperText: error?.message,
                 inputRef: ref,
+                InputLabelProps: { shrink: true },
                 InputProps: {
                   ...params.InputProps,
                   endAdornment: /* @__PURE__ */ React3.createElement(React3.Fragment, null, isLoading ? /* @__PURE__ */ React3.createElement(CircularProgress2, { color: "primary", size: 20 }) : null, params.InputProps.endAdornment)
@@ -449,6 +457,7 @@ function SearchableSelector({
                 error: !!error,
                 helperText: error?.message,
                 inputRef: ref,
+                InputLabelProps: { shrink: true },
                 InputProps: {
                   ...params.InputProps,
                   endAdornment: /* @__PURE__ */ React4.createElement(React4.Fragment, null, isLoading ? /* @__PURE__ */ React4.createElement(CircularProgress3, { color: "primary", size: 20 }) : null, params.InputProps.endAdornment)

package/dist/selectors/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../react-shim.js","../../src/selectors/multi-check-selector/index.tsx","../../src/selectors/multiple-selector/index.tsx","../../src/selectors/searchable-selector/index.tsx"],"sourcesContent":["import * as React from \"react\";\nexport { React };\n","import Autocomplete from \"@mui/material/Autocomplete\";\r\nimport TextField from \"@mui/material/TextField\";\r\nimport * as React from \"react\";\r\nimport { Control, Controller } from \"react-hook-form\";\r\nimport { Checkbox, CircularProgress, Popper } from \"@mui/material\";\r\nimport { FaCheckSquare } from \"react-icons/fa\";\r\nimport { RiCheckboxBlankLine } from \"react-icons/ri\";\r\nimport { MdSelectAll } from \"react-icons/md\";\r\nimport { RiDeleteBin6Line } from \"react-icons/ri\";\r\ninterface OptionType {\r\n  title: string;\r\n  key: string | number;\r\n  [x: string]: any; // برای پشتیبانی از فیلدهای اضافی\r\n}\r\nexport interface AutocompleteRenderOptionState {\r\n  inputValue: string;\r\n  index: number;\r\n  selected: boolean;\r\n}\r\ninterface MultipleSelectChipProps<T extends OptionType> {\r\n  name: string;\r\n  control: Control<any>;\r\n  label?: string;\r\n  data?: T[];\r\n  isLoading?: boolean;\r\n  disabled?: boolean;\r\n  size?: \"small\" | \"medium\";\r\n  clear?: boolean;\r\n\r\n  renderOption?: (\r\n    props: React.HTMLAttributes<HTMLLIElement>,\r\n    option: T,\r\n    state:AutocompleteRenderOptionState\r\n  ) => React.ReactNode;\r\n}\r\n/**\r\n * 📦 MultipleSelector — کامپوننت انتخاب چندگزینه‌ای پیشرفته\r\n *\r\n * @component MultipleSelector\r\n *\r\n * @template T — نوع داده‌ی گزینه‌ها که باید شامل فیلدهای `title` و `key` باشد.\r\n *\r\n * @param {string} name - نام فیلد در فرم (برای ثبت در react-hook-form).\r\n * @param {Control<any>} control - کنترل فرم از کتابخانه react-hook-form.\r\n * @param {string} [label] - برچسب ورودی.\r\n * @param {T[]} [data] - آرایه‌ای از گزینه‌ها که هر کدام باید شامل `title` (نمایش) و `key` (شناسه یکتا) باشد.\r\n * @param {boolean} [isLoading=false] - حالت لودینگ برای نمایش اسپینر در ورودی.\r\n * @param {boolean} [disabled=false] - غیرفعال‌کردن ورودی.\r\n * @param {\"small\" | \"medium\"} [size=\"medium\"] - سایز ورودی MUI Autocomplete.\r\n * @param {boolean} [clear=false] - اگر `false` باشد، قابلیت پاک کردن کامل (Clearable) غیرفعال می‌شود.\r\n * @param {(props: React.HTMLAttributes<HTMLLIElement>, option: T, state: AutocompleteRenderOptionState) => React.ReactNode} [renderOption] - تابع سفارشی برای رندر هر آیتم در لیست انتخاب.\r\n *\r\n * @description\r\n * این کامپوننت یک `Autocomplete` چندگزینه‌ای با قابلیت‌های زیر است:\r\n * - اتصال مستقیم به `react-hook-form` (با استفاده از Controller)\r\n * - انتخاب همه (`انتخاب همه`) یا پاک کردن همه (`پاک کردن همه`)\r\n * - نمایش تعداد آیتم‌های انتخاب شده به جای تگ‌های جداگانه\r\n * - پشتیبانی از حالت لودینگ و غیرفعال بودن\r\n * - امکان سفارشی‌سازی رندر آیتم‌ها (`renderOption`)\r\n * - آیکون‌های سفارشی برای انتخاب‌ها و گزینه‌های ویژه\r\n * - جلوگیری از بستن لیست هنگام انتخاب آیتم‌ها (`disableCloseOnSelect`)\r\n * - مدیریت موقعیت Popper با MUI modifiers\r\n *\r\n * @returns {Array<string | number>} آرایه‌ای از کلیدهای آیتم‌های انتخاب شده.\r\n *\r\n * @example\r\n * ```tsx\r\n * import { useForm, Controller } from \"react-hook-form\";\r\n *\r\n * type MyOption = { title: string; key: number };\r\n *\r\n * const options: MyOption[] = [\r\n *   { title: \"محصول ۱\", key: 1 },\r\n *   { title: \"محصول ۲\", key: 2 },\r\n * ];\r\n *\r\n * export default function MyForm() {\r\n *   const { control, handleSubmit } = useForm({ defaultValues: { productIds: [] } });\r\n *\r\n *   const onSubmit = (data: any) => {\r\n *     console.log(\"انتخاب شده‌ها:\", data.productIds);\r\n *   };\r\n *\r\n *   return (\r\n *     <form onSubmit={handleSubmit(onSubmit)}>\r\n *       <MultipleSelector<MyOption>\r\n *         name=\"productIds\"\r\n *         label=\"محصولات\"\r\n *         control={control}\r\n *         data={options}\r\n *         isLoading={false}\r\n *         size=\"small\"\r\n *         renderOption={(props, option, state) => (\r\n *           <li {...props} key={option.key}>\r\n *             <strong style={{ color: state.selected ? \"green\" : \"black\" }}>\r\n *               {option.title}\r\n *             </strong>\r\n *           </li>\r\n *         )}\r\n *       />\r\n *       <button type=\"submit\">ثبت</button>\r\n *     </form>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport default function MultiCheckSelector<T extends OptionType>({\r\n  name,\r\n  control,\r\n  label,\r\n  data,\r\n  isLoading,\r\n  disabled = false,\r\n  size = \"medium\",\r\n  clear = false,\r\n  renderOption,\r\n}: MultipleSelectChipProps<T>) {\r\n  const dataOptions =\r\n    data?.map((value) => ({\r\n      ...value,\r\n      key: value.key || `key_${Math.random()}`,\r\n    })) || [];\r\n\r\n  const combinedOptions =\r\n    dataOptions.length > 0\r\n      ? [\r\n          { title: \"انتخاب همه\", key: \"All\" } as T,\r\n          { title: \"پاک کردن همه\", key: \"ClearAll\" } as T,\r\n          ...dataOptions,\r\n        ]\r\n      : [...dataOptions];\r\n\r\n  const handleChange = (\r\n    _event: any,\r\n    selected: any,\r\n    onChange: (value: any) => void\r\n  ) => {\r\n    if (selected.some((item: any) => item.key === \"All\")) {\r\n      const allItems = [...dataOptions];\r\n      onChange(allItems.map((item) => item.key));\r\n    } else if (selected.some((item: any) => item.key === \"ClearAll\")) {\r\n      onChange([]);\r\n    } else {\r\n      onChange(selected.map((item: any) => item.key));\r\n    }\r\n  };\r\n  const icon = <RiCheckboxBlankLine size={20} />;\r\n  const checkedIcon = <FaCheckSquare size={20} />;\r\n\r\n  return (\r\n    <Controller\r\n      name={name}\r\n      control={control}\r\n      render={({ field: { onChange, value, ref }, fieldState: { error } }) => {\r\n        const computedValue = React.useMemo(() => {\r\n          if (Array.isArray(value) && dataOptions.length > 0) {\r\n            return dataOptions.filter((option: any) =>\r\n              value.includes(option.key)\r\n            );\r\n          }\r\n          return [];\r\n        }, [value, dataOptions]);\r\n\r\n        // کنترل باز و بسته شدن آتوکامپلیت\r\n        const autocompleteRef = React.useRef<any>(null);\r\n        const [open, setOpen] = React.useState(false);\r\n        const handleOpen = () => setOpen(true);\r\n        const handleClose = () => setOpen(false);\r\n        return (\r\n          <Autocomplete\r\n            multiple\r\n            disableClearable={clear}\r\n            disabled={disabled || isLoading}\r\n            size={size}\r\n            disableCloseOnSelect\r\n            options={combinedOptions}\r\n            sx={{ width: \"100%\" }}\r\n            noOptionsText=\"داده‌ای برای نمایش وجود ندارد\"\r\n            value={computedValue}\r\n            onChange={(event, value) =>\r\n              handleChange(event, value as T[], onChange)\r\n            }\r\n            isOptionEqualToValue={(option, value) =>\r\n              String(option.key) === String(value?.key)\r\n            }\r\n            getOptionLabel={(option) => option.title}\r\n            loading={isLoading}\r\n            loadingText=\"در حال بارگذاری...\"\r\n            open={open}\r\n            onOpen={handleOpen}\r\n            onClose={handleClose}\r\n            ref={autocompleteRef}\r\n            renderOption={(props, option, state) => {                \r\n              if (renderOption) {\r\n                return renderOption(props, option,state);\r\n              }\r\n              // آیکون مناسب برای گزینه‌های انتخاب همه و پاک کردن همه\r\n              let iconElem = null;\r\n              if (option.key === \"All\") {\r\n                iconElem = <MdSelectAll size={18} style={{ marginLeft: 6, color: '#2563eb' }} />;\r\n              } else if (option.key === \"ClearAll\") {\r\n                iconElem = <RiDeleteBin6Line size={18} style={{ marginLeft: 6, color: '#ef4444' }} />;\r\n              }\r\n              return (\r\n                <li\r\n                  {...props}\r\n                  key={`${option.key}`}\r\n                  style={{ margin: 5, borderRadius: 3 }}\r\n                >\r\n                  <div\r\n                    style={{\r\n                      display: \"flex\",\r\n                      flexDirection: \"row\",\r\n                      width: \"100%\",\r\n                      alignItems: \"center\",\r\n                    }}\r\n                  >\r\n                    {option.key === \"All\" || option.key === \"ClearAll\"\r\n                      ? iconElem\r\n                      : <Checkbox\r\n                          icon={icon}\r\n                          checkedIcon={checkedIcon}\r\n                          style={{ marginLeft: 8 }}\r\n                          checked={state.selected}\r\n                          sx={{margin:0 , padding:0}}\r\n                        />}\r\n                    <div style={{ flexDirection: \"row\", width: \"100%\" }}>\r\n                      <div style={{ fontWeight: \"normal\" }}>{option.title}</div>\r\n                    </div>\r\n                  </div>\r\n                </li>\r\n              );\r\n            }}\r\n            renderTags={(value) => {\r\n              if (value.length === 0) return null;\r\n              const total = dataOptions.length;\r\n              const tagText = value.length === total\r\n                ? `${value.length} مورد انتخاب شده`\r\n                : `${value.length} مورد از ${total} انتخاب شده`;\r\n              return (\r\n                <span\r\n                  style={{\r\n                    fontWeight: 600,\r\n                    fontSize: 15,\r\n                    padding: '2px 8px',\r\n                    borderRadius: 6,\r\n                    margin: '2px 0',\r\n                    letterSpacing: 0.2,\r\n                    userSelect: 'none',\r\n                    maxWidth: '100%',\r\n                    whiteSpace: 'nowrap',\r\n                    overflow: 'hidden',\r\n                    textOverflow: 'ellipsis',\r\n                    display: 'inline-block',\r\n                    cursor: 'pointer',\r\n                  }}\r\n                  onClick={handleOpen}\r\n                >\r\n                  {tagText}\r\n                </span>\r\n              );\r\n            }}\r\n            slots={{ popper: Popper }}\r\n            slotProps={{\r\n              popper: {\r\n                modifiers: [\r\n                  {\r\n                    name: \"preventOverflow\",\r\n                    options: {\r\n                      boundary: \"window\",\r\n                      rootBoundary: \"viewport\",\r\n                      altBoundary: true,\r\n                      padding: 10,\r\n                    },\r\n                  },\r\n                  {\r\n                    name: \"flip\",\r\n                    options: {\r\n                      fallbackPlacements: [\"top\", \"bottom\"],\r\n                    },\r\n                  },\r\n                ],\r\n              },\r\n            }}\r\n            renderInput={(params) => (\r\n              <TextField\r\n                {...params}\r\n                label={label}\r\n                error={!!error}\r\n                helperText={error?.message}\r\n                inputRef={ref}\r\n                InputProps={{\r\n                  ...params.InputProps,\r\n                  endAdornment: (\r\n                    <React.Fragment>\r\n                      {isLoading ? (\r\n                        <CircularProgress color=\"primary\" size={20} />\r\n                      ) : null}\r\n                      {params.InputProps.endAdornment}\r\n                    </React.Fragment>\r\n                  ),\r\n                }}\r\n              />\r\n            )}\r\n          />\r\n        );\r\n      }}\r\n    />\r\n  );\r\n}\r\n// ...existing code...\r\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  clear?: 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} [clear=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  clear = 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={clear}\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                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  clear?: 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} [clear=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  clear = 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={clear || 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                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","value","Autocomplete","TextField","React","Controller","CircularProgress","Popper","value","CircularProgress","Popper","Autocomplete","TextField","React","Controller","value"]}
+{"version":3,"sources":["../../react-shim.js","../../src/selectors/multi-check-selector/index.tsx","../../src/selectors/multiple-selector/index.tsx","../../src/selectors/searchable-selector/index.tsx"],"sourcesContent":["import * as React from \"react\";\nexport { React };\n","import Autocomplete from \"@mui/material/Autocomplete\";\r\nimport TextField from \"@mui/material/TextField\";\r\nimport * as React from \"react\";\r\nimport { Control, Controller } from \"react-hook-form\";\r\nimport { Checkbox, CircularProgress, Popper } from \"@mui/material\";\r\nimport { FaCheckSquare } from \"react-icons/fa\";\r\nimport { RiCheckboxBlankLine } from \"react-icons/ri\";\r\nimport { MdSelectAll } from \"react-icons/md\";\r\nimport { RiDeleteBin6Line } from \"react-icons/ri\";\r\ninterface OptionType {\r\n  title: string;\r\n  key: string | number;\r\n  [x: string]: any; // برای پشتیبانی از فیلدهای اضافی\r\n}\r\nexport interface AutocompleteRenderOptionState {\r\n  inputValue: string;\r\n  index: number;\r\n  selected: boolean;\r\n}\r\ninterface MultipleSelectChipProps<T extends OptionType> {\r\n  name: string;\r\n  control: Control<any>;\r\n  label?: string;\r\n  data?: T[];\r\n  isLoading?: boolean;\r\n  disabled?: boolean;\r\n  size?: \"small\" | \"medium\";\r\n  clear?: boolean;\r\n\r\n  renderOption?: (\r\n    props: React.HTMLAttributes<HTMLLIElement>,\r\n    option: T,\r\n    state: AutocompleteRenderOptionState\r\n  ) => React.ReactNode;\r\n}\r\n/**\r\n * 📦 MultipleSelector — کامپوننت انتخاب چندگزینه‌ای پیشرفته\r\n *\r\n * @component MultipleSelector\r\n *\r\n * @template T — نوع داده‌ی گزینه‌ها که باید شامل فیلدهای `title` و `key` باشد.\r\n *\r\n * @param {string} name - نام فیلد در فرم (برای ثبت در react-hook-form).\r\n * @param {Control<any>} control - کنترل فرم از کتابخانه react-hook-form.\r\n * @param {string} [label] - برچسب ورودی.\r\n * @param {T[]} [data] - آرایه‌ای از گزینه‌ها که هر کدام باید شامل `title` (نمایش) و `key` (شناسه یکتا) باشد.\r\n * @param {boolean} [isLoading=false] - حالت لودینگ برای نمایش اسپینر در ورودی.\r\n * @param {boolean} [disabled=false] - غیرفعال‌کردن ورودی.\r\n * @param {\"small\" | \"medium\"} [size=\"medium\"] - سایز ورودی MUI Autocomplete.\r\n * @param {boolean} [clear=false] - اگر `false` باشد، قابلیت پاک کردن کامل (Clearable) غیرفعال می‌شود.\r\n * @param {(props: React.HTMLAttributes<HTMLLIElement>, option: T, state: AutocompleteRenderOptionState) => React.ReactNode} [renderOption] - تابع سفارشی برای رندر هر آیتم در لیست انتخاب.\r\n *\r\n * @description\r\n * این کامپوننت یک `Autocomplete` چندگزینه‌ای با قابلیت‌های زیر است:\r\n * - اتصال مستقیم به `react-hook-form` (با استفاده از Controller)\r\n * - انتخاب همه (`انتخاب همه`) یا پاک کردن همه (`پاک کردن همه`)\r\n * - نمایش تعداد آیتم‌های انتخاب شده به جای تگ‌های جداگانه\r\n * - پشتیبانی از حالت لودینگ و غیرفعال بودن\r\n * - امکان سفارشی‌سازی رندر آیتم‌ها (`renderOption`)\r\n * - آیکون‌های سفارشی برای انتخاب‌ها و گزینه‌های ویژه\r\n * - جلوگیری از بستن لیست هنگام انتخاب آیتم‌ها (`disableCloseOnSelect`)\r\n * - مدیریت موقعیت Popper با MUI modifiers\r\n *\r\n * @returns {Array<string | number>} آرایه‌ای از کلیدهای آیتم‌های انتخاب شده.\r\n *\r\n * @example\r\n * ```tsx\r\n * import { useForm, Controller } from \"react-hook-form\";\r\n *\r\n * type MyOption = { title: string; key: number };\r\n *\r\n * const options: MyOption[] = [\r\n *   { title: \"محصول ۱\", key: 1 },\r\n *   { title: \"محصول ۲\", key: 2 },\r\n * ];\r\n *\r\n * export default function MyForm() {\r\n *   const { control, handleSubmit } = useForm({ defaultValues: { productIds: [] } });\r\n *\r\n *   const onSubmit = (data: any) => {\r\n *     console.log(\"انتخاب شده‌ها:\", data.productIds);\r\n *   };\r\n *\r\n *   return (\r\n *     <form onSubmit={handleSubmit(onSubmit)}>\r\n *       <MultipleSelector<MyOption>\r\n *         name=\"productIds\"\r\n *         label=\"محصولات\"\r\n *         control={control}\r\n *         data={options}\r\n *         isLoading={false}\r\n *         size=\"small\"\r\n *         renderOption={(props, option, state) => (\r\n *           <li {...props} key={option.key}>\r\n *             <strong style={{ color: state.selected ? \"green\" : \"black\" }}>\r\n *               {option.title}\r\n *             </strong>\r\n *           </li>\r\n *         )}\r\n *       />\r\n *       <button type=\"submit\">ثبت</button>\r\n *     </form>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport default function MultiCheckSelector<T extends OptionType>({\r\n  name,\r\n  control,\r\n  label,\r\n  data,\r\n  isLoading,\r\n  disabled = false,\r\n  size = \"medium\",\r\n  clear = false,\r\n  renderOption,\r\n}: MultipleSelectChipProps<T>) {\r\n  const dataOptions =\r\n    data?.map((value) => ({\r\n      ...value,\r\n      key: value.key || `key_${Math.random()}`,\r\n    })) || [];\r\n\r\n  const combinedOptions =\r\n    dataOptions.length > 0\r\n      ? [\r\n          { title: \"انتخاب همه\", key: \"All\" } as T,\r\n          { title: \"پاک کردن همه\", key: \"ClearAll\" } as T,\r\n          ...dataOptions,\r\n        ]\r\n      : [...dataOptions];\r\n\r\n  const handleChange = (\r\n    _event: any,\r\n    selected: any,\r\n    onChange: (value: any) => void\r\n  ) => {\r\n    if (selected.some((item: any) => item.key === \"All\")) {\r\n      const allItems = [...dataOptions];\r\n      onChange(allItems.map((item) => item.key));\r\n    } else if (selected.some((item: any) => item.key === \"ClearAll\")) {\r\n      onChange([]);\r\n    } else {\r\n      onChange(selected.map((item: any) => item.key));\r\n    }\r\n  };\r\n  const icon = <RiCheckboxBlankLine size={20} />;\r\n  const checkedIcon = <FaCheckSquare size={20} />;\r\n\r\n  return (\r\n    <Controller\r\n      name={name}\r\n      control={control}\r\n      render={({ field: { onChange, value, ref }, fieldState: { error } }) => {\r\n        const computedValue = React.useMemo(() => {\r\n          if (Array.isArray(value) && dataOptions.length > 0) {\r\n            return dataOptions.filter((option: any) =>\r\n              value.includes(option.key)\r\n            );\r\n          }\r\n          return [];\r\n        }, [value, dataOptions]);\r\n\r\n        // کنترل باز و بسته شدن آتوکامپلیت\r\n        const autocompleteRef = React.useRef<any>(null);\r\n        const [open, setOpen] = React.useState(false);\r\n        const handleOpen = () => setOpen(true);\r\n        const handleClose = () => setOpen(false);\r\n        return (\r\n          <Autocomplete\r\n            multiple\r\n            disableClearable={clear}\r\n            disabled={disabled || isLoading}\r\n            size={size}\r\n            disableCloseOnSelect\r\n            options={combinedOptions}\r\n            sx={{ width: \"100%\" }}\r\n            noOptionsText=\"داده‌ای برای نمایش وجود ندارد\"\r\n            value={computedValue}\r\n            onChange={(event, value) =>\r\n              handleChange(event, value as T[], onChange)\r\n            }\r\n            isOptionEqualToValue={(option, value) =>\r\n              String(option.key) === String(value?.key)\r\n            }\r\n            getOptionLabel={(option) => option.title}\r\n            loading={isLoading}\r\n            loadingText=\"در حال بارگذاری...\"\r\n            open={open}\r\n            onOpen={handleOpen}\r\n            onClose={handleClose}\r\n            ref={autocompleteRef}\r\n            renderOption={(props, option, state) => {\r\n              if (renderOption) {\r\n                return renderOption(props, option, state);\r\n              }\r\n              // آیکون مناسب برای گزینه‌های انتخاب همه و پاک کردن همه\r\n              let iconElem = null;\r\n              if (option.key === \"All\") {\r\n                iconElem = (\r\n                  <MdSelectAll\r\n                    size={18}\r\n                    style={{ marginLeft: 6, color: \"#2563eb\" }}\r\n                  />\r\n                );\r\n              } else if (option.key === \"ClearAll\") {\r\n                iconElem = (\r\n                  <RiDeleteBin6Line\r\n                    size={18}\r\n                    style={{ marginLeft: 6, color: \"#ef4444\" }}\r\n                  />\r\n                );\r\n              }\r\n              return (\r\n                <li\r\n                  {...props}\r\n                  key={`${option.key}`}\r\n                  style={{ margin: 5, borderRadius: 3 }}\r\n                >\r\n                  <div\r\n                    style={{\r\n                      display: \"flex\",\r\n                      flexDirection: \"row\",\r\n                      width: \"100%\",\r\n                      alignItems: \"center\",\r\n                    }}\r\n                  >\r\n                    {option.key === \"All\" || option.key === \"ClearAll\" ? (\r\n                      iconElem\r\n                    ) : (\r\n                      <Checkbox\r\n                        icon={icon}\r\n                        checkedIcon={checkedIcon}\r\n                        style={{ marginLeft: 8 }}\r\n                        checked={state.selected}\r\n                        sx={{ margin: 0, padding: 0 }}\r\n                      />\r\n                    )}\r\n                    <div style={{ flexDirection: \"row\", width: \"100%\" }}>\r\n                      <div style={{ fontWeight: \"normal\" }}>{option.title}</div>\r\n                    </div>\r\n                  </div>\r\n                </li>\r\n              );\r\n            }}\r\n            renderTags={(value) => {\r\n              if (value.length === 0) return null;\r\n              const total = dataOptions.length;\r\n              const tagText =\r\n                value.length === total\r\n                  ? `${value.length} مورد انتخاب شده`\r\n                  : `${value.length} مورد از ${total} انتخاب شده`;\r\n\r\n              return (\r\n                <div\r\n                  style={{\r\n                    display: \"flex\",\r\n                    alignItems: \"center\",\r\n                    height: 36, // ارتفاع ثابت ورودی\r\n                    overflow: \"hidden\",\r\n                    whiteSpace: \"nowrap\",\r\n                    textOverflow: \"ellipsis\",\r\n                  }}\r\n                  onClick={handleOpen}\r\n                >\r\n                  <span style={{ fontWeight: 600, fontSize: 15 }}>\r\n                    {tagText}\r\n                  </span>\r\n                </div>\r\n              );\r\n            }}\r\n            slots={{ popper: Popper }}\r\n            slotProps={{\r\n              popper: {\r\n                modifiers: [\r\n                  {\r\n                    name: \"preventOverflow\",\r\n                    options: {\r\n                      boundary: \"window\",\r\n                      rootBoundary: \"viewport\",\r\n                      altBoundary: true,\r\n                      padding: 10,\r\n                    },\r\n                  },\r\n                  {\r\n                    name: \"flip\",\r\n                    options: {\r\n                      fallbackPlacements: [\"top\", \"bottom\"],\r\n                    },\r\n                  },\r\n                ],\r\n              },\r\n            }}\r\n            renderInput={(params) => (\r\n              <TextField\r\n                {...params}\r\n                label={label}\r\n                error={!!error}\r\n                helperText={error?.message}\r\n                inputRef={ref}\r\n                InputLabelProps={{ shrink: true }}\r\n                InputProps={{\r\n                  ...params.InputProps,\r\n                  endAdornment: (\r\n                    <React.Fragment>\r\n                      {isLoading ? (\r\n                        <CircularProgress color=\"primary\" size={20} />\r\n                      ) : null}\r\n                      {params.InputProps.endAdornment}\r\n                    </React.Fragment>\r\n                  ),\r\n                }}\r\n              />\r\n            )}\r\n          />\r\n        );\r\n      }}\r\n    />\r\n  );\r\n}\r\n// ...existing code...\r\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  clear?: 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} [clear=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  clear = 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={clear}\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  clear?: 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} [clear=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  clear = 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={clear || 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"],"mappings":"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","names":["React","value","Autocomplete","TextField","React","Controller","CircularProgress","Popper","value","CircularProgress","Popper","Autocomplete","TextField","React","Controller","value"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mamrp/components",
-  "version": "1.0.49",
+  "version": "1.2.0",
   "description": "A comprehensive suite of reusable React components.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -57,6 +57,7 @@
     "react": "^19.0.0",
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^19.0.0",
+    "react-draggable": "^4.5.0",
     "react-hook-form": "^7.54.2",
     "react-hot-toast": "^2.5.2",
     "react-icons": "^5.5.0",