@mamrp/components 1.0.34 → 1.0.36

package/dist/selectors/index.js

@@ -0,0 +1,509 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/selectors/index.ts
+var selectors_exports = {};
+__export(selectors_exports, {
+  MultiCheckSelector: () => MultiCheckSelector,
+  MultipleSelector: () => MultipleSelector,
+  SearchableSelector: () => SearchableSelector
+});
+module.exports = __toCommonJS(selectors_exports);
+
+// react-shim.js
+var React = __toESM(require("react"));
+
+// src/selectors/multi-check-selector/index.tsx
+var import_Autocomplete = __toESM(require("@mui/material/Autocomplete"));
+var import_TextField = __toESM(require("@mui/material/TextField"));
+var React2 = __toESM(require("react"));
+var import_react_hook_form = require("react-hook-form");
+var import_material = require("@mui/material");
+var import_fa = require("react-icons/fa");
+var import_ri = require("react-icons/ri");
+var import_md = require("react-icons/md");
+var import_ri2 = require("react-icons/ri");
+function MultiCheckSelector({
+  name,
+  control,
+  label,
+  data,
+  isLoading,
+  disabled = false,
+  size = "medium",
+  clear = false,
+  renderOption
+}) {
+  const dataOptions = data?.map((value) => ({
+    ...value,
+    key: value.key || `key_${Math.random()}`
+  })) || [];
+  const combinedOptions = dataOptions.length > 0 ? [
+    { title: "\u0627\u0646\u062A\u062E\u0627\u0628 \u0647\u0645\u0647", key: "All" },
+    { title: "\u067E\u0627\u06A9 \u06A9\u0631\u062F\u0646 \u0647\u0645\u0647", key: "ClearAll" },
+    ...dataOptions
+  ] : [...dataOptions];
+  const handleChange = (_event, selected, onChange) => {
+    if (selected.some((item) => item.key === "All")) {
+      const allItems = [...dataOptions];
+      onChange(allItems.map((item) => item.key));
+    } else if (selected.some((item) => item.key === "ClearAll")) {
+      onChange([]);
+    } else {
+      onChange(selected.map((item) => item.key));
+    }
+  };
+  const icon = /* @__PURE__ */ React2.createElement(import_ri.RiCheckboxBlankLine, { size: 20 });
+  const checkedIcon = /* @__PURE__ */ React2.createElement(import_fa.FaCheckSquare, { size: 20 });
+  return /* @__PURE__ */ React2.createElement(
+    import_react_hook_form.Controller,
+    {
+      name,
+      control,
+      render: ({ field: { onChange, value, ref }, fieldState: { error } }) => {
+        const computedValue = React2.useMemo(() => {
+          if (Array.isArray(value) && dataOptions.length > 0) {
+            return dataOptions.filter(
+              (option) => value.includes(option.key)
+            );
+          }
+          return [];
+        }, [value, dataOptions]);
+        const autocompleteRef = React2.useRef(null);
+        const [open, setOpen] = React2.useState(false);
+        const handleOpen = () => setOpen(true);
+        const handleClose = () => setOpen(false);
+        return /* @__PURE__ */ React2.createElement(
+          import_Autocomplete.default,
+          {
+            multiple: true,
+            disableClearable: clear,
+            disabled: disabled || isLoading,
+            size,
+            disableCloseOnSelect: true,
+            options: combinedOptions,
+            sx: { width: "100%" },
+            noOptionsText: "\u062F\u0627\u062F\u0647\u200C\u0627\u06CC \u0628\u0631\u0627\u06CC \u0646\u0645\u0627\u06CC\u0634 \u0648\u062C\u0648\u062F \u0646\u062F\u0627\u0631\u062F",
+            value: computedValue,
+            onChange: (event, value2) => handleChange(event, value2, onChange),
+            isOptionEqualToValue: (option, value2) => String(option.key) === String(value2?.key),
+            getOptionLabel: (option) => option.title,
+            loading: isLoading,
+            loadingText: "\u062F\u0631 \u062D\u0627\u0644 \u0628\u0627\u0631\u06AF\u0630\u0627\u0631\u06CC...",
+            open,
+            onOpen: handleOpen,
+            onClose: handleClose,
+            ref: autocompleteRef,
+            renderOption: (props, option, state) => {
+              if (renderOption) {
+                return renderOption(props, option, state);
+              }
+              let iconElem = null;
+              if (option.key === "All") {
+                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" } });
+              }
+              return /* @__PURE__ */ React2.createElement(
+                "li",
+                {
+                  ...props,
+                  key: `${option.key}`,
+                  style: { margin: 5, borderRadius: 3 }
+                },
+                /* @__PURE__ */ React2.createElement(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      flexDirection: "row",
+                      width: "100%",
+                      alignItems: "center"
+                    }
+                  },
+                  option.key === "All" || option.key === "ClearAll" ? iconElem : /* @__PURE__ */ React2.createElement(
+                    import_material.Checkbox,
+                    {
+                      icon,
+                      checkedIcon,
+                      style: { marginLeft: 8 },
+                      checked: state.selected,
+                      sx: { margin: 0, padding: 0 }
+                    }
+                  ),
+                  /* @__PURE__ */ React2.createElement("div", { style: { flexDirection: "row", width: "100%" } }, /* @__PURE__ */ React2.createElement("div", { style: { fontWeight: "normal" } }, option.title))
+                )
+              );
+            },
+            renderTags: (value2) => {
+              if (value2.length === 0) return null;
+              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",
+                {
+                  style: {
+                    fontWeight: 600,
+                    fontSize: 15,
+                    padding: "2px 8px",
+                    borderRadius: 6,
+                    margin: "2px 0",
+                    letterSpacing: 0.2,
+                    userSelect: "none",
+                    maxWidth: "100%",
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    display: "inline-block",
+                    cursor: "pointer"
+                  },
+                  onClick: handleOpen
+                },
+                tagText
+              );
+            },
+            slots: { popper: import_material.Popper },
+            slotProps: {
+              popper: {
+                modifiers: [
+                  {
+                    name: "preventOverflow",
+                    options: {
+                      boundary: "window",
+                      rootBoundary: "viewport",
+                      altBoundary: true,
+                      padding: 10
+                    }
+                  },
+                  {
+                    name: "flip",
+                    options: {
+                      fallbackPlacements: ["top", "bottom"]
+                    }
+                  }
+                ]
+              }
+            },
+            renderInput: (params) => /* @__PURE__ */ React2.createElement(
+              import_TextField.default,
+              {
+                ...params,
+                label,
+                error: !!error,
+                helperText: error?.message,
+                inputRef: ref,
+                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)
+                }
+              }
+            )
+          }
+        );
+      }
+    }
+  );
+}
+
+// src/selectors/multiple-selector/index.tsx
+var import_Autocomplete2 = __toESM(require("@mui/material/Autocomplete"));
+var import_TextField2 = __toESM(require("@mui/material/TextField"));
+var React3 = __toESM(require("react"));
+var import_react_hook_form2 = require("react-hook-form");
+var import_material2 = require("@mui/material");
+function MultipleSelector({
+  name,
+  control,
+  label,
+  data,
+  isLoading,
+  disabled = false,
+  size = "medium",
+  clear = false,
+  renderOption
+}) {
+  const dataOptions = data?.map((value) => ({
+    ...value,
+    key: value.key || `key_${Math.random()}`
+  })) || [];
+  const combinedOptions = dataOptions.length > 0 ? [{ title: "\u0627\u0646\u062A\u062E\u0627\u0628 \u0647\u0645\u0647", key: "All" }, ...dataOptions] : [...dataOptions];
+  const handleChange = (_event, selected, onChange) => {
+    if (selected.some((item) => item.key === "All")) {
+      const allItems = [...dataOptions];
+      onChange(allItems.map((item) => item.key));
+    } else {
+      onChange(selected.map((item) => item.key));
+    }
+  };
+  return /* @__PURE__ */ React3.createElement(
+    import_react_hook_form2.Controller,
+    {
+      name,
+      control,
+      render: ({ field: { onChange, value, ref }, fieldState: { error } }) => {
+        const computedValue = React3.useMemo(() => {
+          if (Array.isArray(value) && dataOptions.length > 0) {
+            return dataOptions.filter(
+              (option) => value.includes(option.key)
+            );
+          }
+          return [];
+        }, [value, dataOptions]);
+        return /* @__PURE__ */ React3.createElement(
+          import_Autocomplete2.default,
+          {
+            multiple: true,
+            disableClearable: clear,
+            disabled: disabled || isLoading,
+            size,
+            disableCloseOnSelect: true,
+            options: combinedOptions,
+            sx: { width: "100%" },
+            noOptionsText: "\u062F\u0627\u062F\u0647\u200C\u0627\u06CC \u0628\u0631\u0627\u06CC \u0646\u0645\u0627\u06CC\u0634 \u0648\u062C\u0648\u062F \u0646\u062F\u0627\u0631\u062F",
+            value: computedValue,
+            onChange: (event, value2) => handleChange(event, value2, onChange),
+            isOptionEqualToValue: (option, value2) => String(option.key) === String(value2?.key),
+            getOptionLabel: (option) => option.title,
+            loading: isLoading,
+            loadingText: "\u062F\u0631 \u062D\u0627\u0644 \u0628\u0627\u0631\u06AF\u0630\u0627\u0631\u06CC...",
+            renderOption: (props, option) => {
+              if (renderOption) {
+                return renderOption(props, option);
+              }
+              return /* @__PURE__ */ React3.createElement(
+                "li",
+                {
+                  ...props,
+                  key: `${option.key}`,
+                  style: { margin: 5, borderRadius: 3 }
+                },
+                /* @__PURE__ */ React3.createElement(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      flexDirection: "row",
+                      width: "100%"
+                    }
+                  },
+                  /* @__PURE__ */ React3.createElement("div", { style: { flexDirection: "column", width: "100%" } }, /* @__PURE__ */ React3.createElement("div", { style: { fontWeight: "normal" } }, option.title))
+                )
+              );
+            },
+            slots: { popper: import_material2.Popper },
+            slotProps: {
+              popper: {
+                modifiers: [
+                  {
+                    name: "preventOverflow",
+                    options: {
+                      boundary: "window",
+                      rootBoundary: "viewport",
+                      altBoundary: true,
+                      padding: 10
+                    }
+                  },
+                  {
+                    name: "flip",
+                    options: {
+                      fallbackPlacements: ["top", "bottom"]
+                    }
+                  }
+                ]
+              }
+            },
+            renderInput: (params) => /* @__PURE__ */ React3.createElement(
+              import_TextField2.default,
+              {
+                ...params,
+                label,
+                error: !!error,
+                helperText: error?.message,
+                inputRef: ref,
+                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)
+                }
+              }
+            )
+          }
+        );
+      }
+    }
+  );
+}
+
+// src/selectors/searchable-selector/index.tsx
+var import_material3 = require("@mui/material");
+var import_Autocomplete3 = __toESM(require("@mui/material/Autocomplete"));
+var import_TextField3 = __toESM(require("@mui/material/TextField"));
+var React4 = __toESM(require("react"));
+var import_react_hook_form3 = require("react-hook-form");
+function SearchableSelector({
+  name,
+  control,
+  label,
+  data,
+  isLoading,
+  disabled = false,
+  size = "medium",
+  clear = false,
+  onChangeHandler,
+  valueHandler,
+  onFilterOptions,
+  renderOption
+}) {
+  const dataOptions = data?.map((value) => ({
+    ...value
+  })) || [];
+  const [inputValue, setInputValue] = React4.useState("");
+  return /* @__PURE__ */ React4.createElement(
+    import_react_hook_form3.Controller,
+    {
+      name,
+      control,
+      render: ({ field: { onChange, value, ref }, fieldState: { error } }) => {
+        const selectedValues = React4.useMemo(
+          () => dataOptions.find((v) => v?.key == value) ?? null,
+          [value, dataOptions]
+        );
+        return /* @__PURE__ */ React4.createElement(
+          import_Autocomplete3.default,
+          {
+            freeSolo: true,
+            disableClearable: clear || isLoading,
+            disabled,
+            disablePortal: true,
+            size,
+            disableCloseOnSelect: false,
+            options: dataOptions,
+            inputValue: valueHandler ? valueHandler(value) : inputValue,
+            onInputChange: (_, newInput, reason) => {
+              reason == "input" && onChange(null);
+              setInputValue(newInput);
+              onFilterOptions(newInput);
+            },
+            sx: {
+              width: "100%"
+            },
+            noOptionsText: "\u062F\u0627\u062F\u0647 \u0627\u06CC \u0628\u0631\u0627\u06CC \u0646\u0645\u0627\u06CC\u0634 \u0648\u062C\u0648\u062F \u0646\u062F\u0627\u0631\u062F",
+            value: selectedValues,
+            onChange: (e, value2) => {
+              if (typeof value2 === "string") {
+                onChange(value2);
+                setInputValue(value2);
+              } else if (value2 && typeof value2 === "object") {
+                onChangeHandler ? onChangeHandler(value2, onChange) : onChange(value2.key);
+                setInputValue(String(value2.title));
+              } else {
+                onChange(null);
+                setInputValue("");
+              }
+            },
+            getOptionLabel: (option) => {
+              if (typeof option === "string") return option;
+              if (option?.title) return String(option.title);
+              return "";
+            },
+            loading: isLoading,
+            loadingText: "\u062F\u0631 \u062D\u0627\u0644 \u0628\u0627\u0631\u06AF\u0630\u0627\u0631\u06CC...",
+            renderOption: (props, option) => {
+              if (renderOption) {
+                return renderOption(props, option);
+              }
+              return /* @__PURE__ */ React4.createElement(
+                "li",
+                {
+                  ...props,
+                  key: `${option.key}`,
+                  style: { margin: 5, borderRadius: 3 }
+                },
+                /* @__PURE__ */ React4.createElement(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      flexDirection: "row",
+                      width: "100%"
+                    }
+                  },
+                  /* @__PURE__ */ React4.createElement("div", { style: { flexDirection: "column", width: "100%" } }, /* @__PURE__ */ React4.createElement("div", { style: { fontWeight: "normal" } }, option.title))
+                )
+              );
+            },
+            slots: { popper: import_material3.Popper },
+            slotProps: {
+              popper: {
+                modifiers: [
+                  {
+                    name: "preventOverflow",
+                    options: {
+                      boundary: "window",
+                      rootBoundary: "viewport",
+                      altBoundary: true,
+                      padding: 10
+                    }
+                  },
+                  {
+                    name: "flip",
+                    options: {
+                      fallbackPlacements: ["top", "bottom"]
+                      // Ensures it flips to the top if needed
+                    }
+                  }
+                ]
+              }
+            },
+            renderInput: (params) => /* @__PURE__ */ React4.createElement(
+              import_TextField3.default,
+              {
+                ...params,
+                label,
+                error: !!error,
+                helperText: error?.message,
+                inputRef: ref,
+                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)
+                }
+              }
+            )
+          }
+        );
+      }
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MultiCheckSelector,
+  MultipleSelector,
+  SearchableSelector
+});
+//# sourceMappingURL=index.js.map

package/dist/selectors/index.js.map

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