@mamrp/components 1.0.32 → 1.0.34

package/dist/index.d.mts

@@ -6,7 +6,7 @@ import { SxProps, Theme } from '@mui/material';
 import { GridColDef } from '@mui/x-data-grid';
 import { TextFieldProps } from '@mui/material/TextField';
 
-interface MultipleSelectChipProps {
+interface MultipleSelectChipProps$1 {
     name: string;
     control: Control<any>;
     label?: string;
@@ -18,7 +18,7 @@ interface MultipleSelectChipProps {
     clear?: boolean;
 }
 declare function MultipleSelectChip({ name, control, label, data, multipleitems, //قابلیت انتخاب چند گزینه ای
-isLoading, disabled, size, clear, }: MultipleSelectChipProps): React.JSX.Element;
+isLoading, disabled, size, clear, }: MultipleSelectChipProps$1): React.JSX.Element;
 
 interface AdvancedSearchButtonProps {
     isShowFilter: boolean;
@@ -305,4 +305,63 @@ type ConnectToBasculeButtonProps = {
 };
 declare const ConnectToBasculeButton: React__default.FC<ConnectToBasculeButtonProps>;
 
-export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomTimePicker, DateFilter, DateFilterRange, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, FormInputNumber, FormInputText, HorizontalStepper, LicensePlate, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, NestedSelect as NestedSelectort, NoResult, PaginationList, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage };
+interface OptionType {
+    title: string;
+    key: string | number;
+    [x: string]: any;
+}
+interface MultipleSelectChipProps<T extends OptionType> {
+    name: string;
+    control: Control<any>;
+    label?: string;
+    data?: T[];
+    isLoading?: boolean;
+    disabled?: boolean;
+    size?: "small" | "medium";
+    clear?: boolean;
+    renderOption?: (props: React.HTMLAttributes<HTMLLIElement>, option: T) => React.ReactNode;
+}
+/**
+ * 📦 کامپوننت انتخاب چند گزینه‌ای با پشتیبانی از react-hook-form و MUI Autocomplete
+ *
+ * @component MultipleSelector
+ *
+ * @param {string} name - نام فیلدی که در فرم ثبت می‌شود.
+ * @param {string} [label] - برچسب نمایشی برای فیلد.
+ * @param {Control<any>} control - کنترل فرم از react-hook-form.
+ * @param {{ title: string; key: string | number }[]} [data] - لیستی از گزینه‌ها شامل `title` (متن) و `key` (مقدار).
+ * @param {boolean} [isLoading=false] - آیا داده‌ها در حال بارگذاری هستند.
+ * @param {boolean} [disabled=false] - غیرفعال‌سازی ورودی.
+ * @param {"small" | "medium"} [size="medium"] - سایز ورودی.
+ * @param {boolean} [clear=false] - آیا امکان پاک کردن وجود دارد یا نه.
+ * @param {string} [tooltip] - متن راهنما هنگام هاور.
+ * @param {(props, option) => React.ReactNode} [renderOption] - تابعی سفارشی برای رندر آیتم‌ها در لیست.
+ *
+ * @returns {Array<{ key: string | number }>} لیستی از آیتم‌های انتخاب‌شده ( فقط آیدی‌ها).
+ *
+ * @example
+ * ```tsx
+ * <MultipleSelector<{title:string; key:number;}>
+ *   name="productIds"
+ *   label="محصولات"
+ *   control={control}
+ *   data={[{ title: "محصول ۱", key: 1 }, { title: "محصول ۲", key: 2 }]}
+ * />
+ * ```
+ *
+ * @description
+ * کامپوننتی چندانتخابی با قابلیت انتخاب همه‌ی موارد، سفارشی‌سازی گزینه‌ها،
+ * نمایش راهنمای هاور، و بازگرداندن لیست کامل از آبجکت‌های انتخاب‌شده.
+ *
+ * برای سفارشی‌سازی نحوه نمایش آیتم‌ها:
+ * ```tsx
+ * renderOption={(props, option) => (
+ *   <li {...props} key={`${option.key}`}>
+ *     <span style={{ color: "green" }}>{option.title}</span>
+ *   </li>
+ * )}
+ * ```
+ */
+declare function MultipleSelector<T extends OptionType>({ name, control, label, data, isLoading, disabled, size, clear, renderOption, }: MultipleSelectChipProps<T>): React.JSX.Element;
+
+export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomTimePicker, DateFilter, DateFilterRange, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, FormInputNumber, FormInputText, HorizontalStepper, LicensePlate, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, MultipleSelector, NestedSelect as NestedSelectort, NoResult, PaginationList, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage };

package/dist/index.d.ts

@@ -6,7 +6,7 @@ import { SxProps, Theme } from '@mui/material';
 import { GridColDef } from '@mui/x-data-grid';
 import { TextFieldProps } from '@mui/material/TextField';
 
-interface MultipleSelectChipProps {
+interface MultipleSelectChipProps$1 {
     name: string;
     control: Control<any>;
     label?: string;
@@ -18,7 +18,7 @@ interface MultipleSelectChipProps {
     clear?: boolean;
 }
 declare function MultipleSelectChip({ name, control, label, data, multipleitems, //قابلیت انتخاب چند گزینه ای
-isLoading, disabled, size, clear, }: MultipleSelectChipProps): React.JSX.Element;
+isLoading, disabled, size, clear, }: MultipleSelectChipProps$1): React.JSX.Element;
 
 interface AdvancedSearchButtonProps {
     isShowFilter: boolean;
@@ -305,4 +305,63 @@ type ConnectToBasculeButtonProps = {
 };
 declare const ConnectToBasculeButton: React__default.FC<ConnectToBasculeButtonProps>;
 
-export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomTimePicker, DateFilter, DateFilterRange, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, FormInputNumber, FormInputText, HorizontalStepper, LicensePlate, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, NestedSelect as NestedSelectort, NoResult, PaginationList, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage };
+interface OptionType {
+    title: string;
+    key: string | number;
+    [x: string]: any;
+}
+interface MultipleSelectChipProps<T extends OptionType> {
+    name: string;
+    control: Control<any>;
+    label?: string;
+    data?: T[];
+    isLoading?: boolean;
+    disabled?: boolean;
+    size?: "small" | "medium";
+    clear?: boolean;
+    renderOption?: (props: React.HTMLAttributes<HTMLLIElement>, option: T) => React.ReactNode;
+}
+/**
+ * 📦 کامپوننت انتخاب چند گزینه‌ای با پشتیبانی از react-hook-form و MUI Autocomplete
+ *
+ * @component MultipleSelector
+ *
+ * @param {string} name - نام فیلدی که در فرم ثبت می‌شود.
+ * @param {string} [label] - برچسب نمایشی برای فیلد.
+ * @param {Control<any>} control - کنترل فرم از react-hook-form.
+ * @param {{ title: string; key: string | number }[]} [data] - لیستی از گزینه‌ها شامل `title` (متن) و `key` (مقدار).
+ * @param {boolean} [isLoading=false] - آیا داده‌ها در حال بارگذاری هستند.
+ * @param {boolean} [disabled=false] - غیرفعال‌سازی ورودی.
+ * @param {"small" | "medium"} [size="medium"] - سایز ورودی.
+ * @param {boolean} [clear=false] - آیا امکان پاک کردن وجود دارد یا نه.
+ * @param {string} [tooltip] - متن راهنما هنگام هاور.
+ * @param {(props, option) => React.ReactNode} [renderOption] - تابعی سفارشی برای رندر آیتم‌ها در لیست.
+ *
+ * @returns {Array<{ key: string | number }>} لیستی از آیتم‌های انتخاب‌شده ( فقط آیدی‌ها).
+ *
+ * @example
+ * ```tsx
+ * <MultipleSelector<{title:string; key:number;}>
+ *   name="productIds"
+ *   label="محصولات"
+ *   control={control}
+ *   data={[{ title: "محصول ۱", key: 1 }, { title: "محصول ۲", key: 2 }]}
+ * />
+ * ```
+ *
+ * @description
+ * کامپوننتی چندانتخابی با قابلیت انتخاب همه‌ی موارد، سفارشی‌سازی گزینه‌ها،
+ * نمایش راهنمای هاور، و بازگرداندن لیست کامل از آبجکت‌های انتخاب‌شده.
+ *
+ * برای سفارشی‌سازی نحوه نمایش آیتم‌ها:
+ * ```tsx
+ * renderOption={(props, option) => (
+ *   <li {...props} key={`${option.key}`}>
+ *     <span style={{ color: "green" }}>{option.title}</span>
+ *   </li>
+ * )}
+ * ```
+ */
+declare function MultipleSelector<T extends OptionType>({ name, control, label, data, isLoading, disabled, size, clear, renderOption, }: MultipleSelectChipProps<T>): React.JSX.Element;
+
+export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomTimePicker, DateFilter, DateFilterRange, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, FormInputNumber, FormInputText, HorizontalStepper, LicensePlate, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, MultipleSelector, NestedSelect as NestedSelectort, NoResult, PaginationList, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage };

package/dist/index.js

@@ -47,6 +47,7 @@ __export(src_exports, {
   LicensePlate: () => LicensePlate,
   MobileDateTimePicker: () => mobile_date_time_picker_default,
   Modal: () => ConfirmationDialog2,
+  MultipleSelector: () => MultipleSelector,
   NestedSelectort: () => selector_default,
   NoResult: () => NoResult,
   PaginationList: () => PaginationList,
@@ -3899,6 +3900,134 @@ var ConnectToBasculeButton = ({
   ));
 };
 var bascule_connection_button_default = ConnectToBasculeButton;
+
+// src/multiple-selector/index.tsx
+var import_Autocomplete2 = __toESM(require("@mui/material/Autocomplete"));
+var import_TextField4 = __toESM(require("@mui/material/TextField"));
+var React27 = __toESM(require("react"));
+var import_react_hook_form14 = require("react-hook-form");
+var import_material26 = 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__ */ React27.createElement(
+    import_react_hook_form14.Controller,
+    {
+      name,
+      control,
+      render: ({ field: { onChange, value, ref }, fieldState: { error } }) => {
+        const computedValue = React27.useMemo(() => {
+          if (Array.isArray(value) && dataOptions.length > 0) {
+            return dataOptions.filter(
+              (option) => value.includes(option.key)
+            );
+          }
+          return [];
+        }, [value, dataOptions]);
+        return /* @__PURE__ */ React27.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__ */ React27.createElement(
+                "li",
+                {
+                  ...props,
+                  key: `${option.key}`,
+                  style: { margin: 5, borderRadius: 3 }
+                },
+                /* @__PURE__ */ React27.createElement(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      flexDirection: "row",
+                      width: "100%"
+                    }
+                  },
+                  /* @__PURE__ */ React27.createElement("div", { style: { flexDirection: "column", width: "100%" } }, /* @__PURE__ */ React27.createElement("div", { style: { fontWeight: "normal" } }, option.title))
+                )
+              );
+            },
+            slots: { popper: import_material26.Popper },
+            slotProps: {
+              popper: {
+                modifiers: [
+                  {
+                    name: "preventOverflow",
+                    options: {
+                      boundary: "window",
+                      rootBoundary: "viewport",
+                      altBoundary: true,
+                      padding: 10
+                    }
+                  },
+                  {
+                    name: "flip",
+                    options: {
+                      fallbackPlacements: ["top", "bottom"]
+                    }
+                  }
+                ]
+              }
+            },
+            renderInput: (params) => /* @__PURE__ */ React27.createElement(
+              import_TextField4.default,
+              {
+                ...params,
+                label,
+                error: !!error,
+                helperText: error?.message,
+                inputRef: ref,
+                InputProps: {
+                  ...params.InputProps,
+                  endAdornment: /* @__PURE__ */ React27.createElement(React27.Fragment, null, isLoading ? /* @__PURE__ */ React27.createElement(import_material26.CircularProgress, { color: "primary", size: 20 }) : null, params.InputProps.endAdornment)
+                }
+              }
+            )
+          }
+        );
+      }
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -3918,6 +4047,7 @@ var bascule_connection_button_default = ConnectToBasculeButton;
   LicensePlate,
   MobileDateTimePicker,
   Modal,
+  MultipleSelector,
   NestedSelectort,
   NoResult,
   PaginationList,