@mamrp/components 1.4.0 → 1.4.2

package/dist/index.d.ts

@@ -1,10 +1,11 @@
-import * as React from 'react';
+import * as React$1 from 'react';
 import React__default, { ReactNode, CSSProperties, Dispatch, SetStateAction } from 'react';
 import { Control, FieldValues, Path, FieldErrors, UseFormSetValue } from 'react-hook-form';
 import { Moment } from 'moment-jalaali';
 import { SxProps, Theme, PaperProps } from '@mui/material';
 import { GridColDef, GridRowSelectionModel, GridRowParams } from '@mui/x-data-grid';
 import { TextFieldProps } from '@mui/material/TextField';
+import { MRT_ColumnDef, MRT_PaginationState, MRT_ColumnFiltersState, MRT_SortingState, MRT_TableOptions } from 'material-react-table';
 
 interface MultipleSelectChipProps {
     name: string;
@@ -16,9 +17,10 @@ interface MultipleSelectChipProps {
     disabled?: boolean;
     size?: "small" | "medium";
     clear?: boolean;
+    variant?: "outlined" | "filled" | "standard";
+    placeholder?: string;
 }
-declare function MultipleSelectChip({ name, control, label, data, multipleitems, //قابلیت انتخاب چند گزینه ای
-isLoading, disabled, size, clear, }: MultipleSelectChipProps): React.JSX.Element;
+declare function MultipleSelectChip({ name, control, label, data, multipleitems, isLoading, disabled, size, clear, variant, placeholder, }: MultipleSelectChipProps): React$1.JSX.Element;
 
 interface AdvancedSearchButtonProps {
     isShowFilter: boolean;
@@ -53,12 +55,12 @@ interface ConfirmationDialogProps$1 {
     iconColor: string;
     color: "error" | "info" | "primary" | "success" | "warning" | "secondary";
     actionTitle: string;
-    icon?: React.ReactElement<{
+    icon?: React$1.ReactElement<{
         color?: string;
         size?: number;
     }>;
 }
-declare function ConfirmationDialog$1({ open, handleClose, callback, callbackParams, headerText, bodyText, isLoading, maxWidth, iconColor, color, actionTitle, icon, }: ConfirmationDialogProps$1): React.JSX.Element;
+declare function ConfirmationDialog$1({ open, handleClose, callback, callbackParams, headerText, bodyText, isLoading, maxWidth, iconColor, color, actionTitle, icon, }: ConfirmationDialogProps$1): React$1.JSX.Element;
 
 interface CustomTimePickerProps {
     name: string;
@@ -69,12 +71,12 @@ interface CustomTimePickerProps {
     autoRefresh?: boolean;
     disabled?: boolean;
 }
-declare function CustomTimePicker({ name, control, label, size, fullwidth, autoRefresh, disabled, }: CustomTimePickerProps): React.JSX.Element;
+declare function CustomTimePicker({ name, control, label, size, fullwidth, autoRefresh, disabled, }: CustomTimePickerProps): React$1.JSX.Element;
 
 declare function DateFilterRange({ FromDate, ToDate }: {
     FromDate: any;
     ToDate: any;
-}): React.JSX.Element;
+}): React$1.JSX.Element;
 
 declare function DateFilter({ setHandler }: {
     setHandler?: any;
@@ -143,7 +145,7 @@ interface LicensePlateProps$1 {
     readOnly?: boolean;
     size?: "small" | "medium";
 }
-declare function LicensePlate({ width, name, setValue, data, readOnly, size, }: LicensePlateProps$1): React.JSX.Element;
+declare function LicensePlate({ width, name, setValue, data, readOnly, size, }: LicensePlateProps$1): React$1.JSX.Element;
 
 interface LicensePlateProps {
     width?: CSSProperties["width"];
@@ -176,7 +178,7 @@ interface ConfirmationDialogProps {
     bodyText: ReactNode;
     isLoading?: boolean;
 }
-declare function ConfirmationDialog({ open, handleClose, callback, callbackParams, headerText, bodyText, isLoading, }: ConfirmationDialogProps): React.JSX.Element;
+declare function ConfirmationDialog({ open, handleClose, callback, callbackParams, headerText, bodyText, isLoading, }: ConfirmationDialogProps): React$1.JSX.Element;
 
 interface NoResultProps {
     title?: string;
@@ -187,14 +189,14 @@ declare function NoResult({ title, description, sx, }: NoResultProps): React__de
 
 interface PaginationListProps {
     currentPage: number;
-    setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+    setCurrentPage: React$1.Dispatch<React$1.SetStateAction<number>>;
     totalPages: number;
 }
-declare function PaginationList({ currentPage, setCurrentPage, totalPages, }: PaginationListProps): React.JSX.Element;
+declare function PaginationList({ currentPage, setCurrentPage, totalPages, }: PaginationListProps): React$1.JSX.Element;
 
 declare function RadioButton({ name, label, options, control, align, disabledBoarder, direction, }: {
     name: string;
-    label: string | React.ReactNode;
+    label: string | React$1.ReactNode;
     control: Control<any>;
     options: {
         value: any;
@@ -204,7 +206,7 @@ declare function RadioButton({ name, label, options, control, align, disabledBoa
     align?: "start" | "center" | "end";
     disabledBoarder?: boolean;
     direction?: "row" | "column";
-}): React.JSX.Element;
+}): React$1.JSX.Element;
 
 declare const NestedSelect: React__default.FC;
 
@@ -217,7 +219,7 @@ interface HorizontalStepperProps {
     currentStep: number;
     setCurrentStep: (newStep: number) => void;
 }
-declare function HorizontalStepper({ steps, currentStep, setCurrentStep, }: HorizontalStepperProps): React.JSX.Element;
+declare function HorizontalStepper({ steps, currentStep, setCurrentStep, }: HorizontalStepperProps): React$1.JSX.Element;
 
 interface StateType {
     page: number;
@@ -272,9 +274,9 @@ type FormInputNumberProps<T extends FieldValues> = {
     onKeyDown?: any;
     textAlign?: "left" | "right" | "center";
     autoComplete?: string;
-    borderless?: boolean;
+    variant?: "outlined" | "filled" | "standard";
 } & TextFieldProps;
-declare const FormInputNumber: <T extends FieldValues>({ name, control, label, inputRef, onKeyDown, endAdornment, thousandSeparator, startAdornment, onChangeHandler, valueHandler, allowLeadingZeros, allowNegative, maxLength, isLoading, rules, data, borderColor, placeholder, decimalScale, autoComplete, textAlign, borderless, ...rest }: FormInputNumberProps<T>) => React__default.JSX.Element;
+declare const FormInputNumber: <T extends FieldValues>({ name, control, label, inputRef, onKeyDown, endAdornment, thousandSeparator, startAdornment, onChangeHandler, valueHandler, allowLeadingZeros, allowNegative, maxLength, isLoading, rules, data, borderColor, placeholder, decimalScale, autoComplete, textAlign, variant, ...rest }: FormInputNumberProps<T>) => React__default.JSX.Element;
 
 type FormInputTextProps$1<T extends FieldValues> = {
     control: Control<T>;
@@ -289,8 +291,9 @@ type FormInputTextProps$1<T extends FieldValues> = {
     isLoading?: boolean;
     onBlurHandler?: any;
     rows?: number;
+    variant?: "outlined" | "filled" | "standard";
 } & TextFieldProps;
-declare const FormInputText: <T extends FieldValues>({ name, control, label, maxLength, readOnly, rules, size, disabled, multiline, isLoading, onBlurHandler, rows, ...rest }: FormInputTextProps$1<T>) => React__default.JSX.Element;
+declare const FormInputText: <T extends FieldValues>({ name, control, label, maxLength, readOnly, rules, size, disabled, multiline, isLoading, onBlurHandler, rows, variant, ...rest }: FormInputTextProps$1<T>) => React__default.JSX.Element;
 
 type FormInputTextProps<T extends FieldValues> = {
     control: Control<T>;
@@ -344,7 +347,7 @@ declare function Page({ data, }: {
         title: string;
         body: ReactNode;
     }];
-}): React.JSX.Element;
+}): React$1.JSX.Element;
 
 type SwitchButtonProps = {
     checked: boolean;
@@ -367,6 +370,41 @@ interface DraggablePaperProps extends PaperProps {
     handle?: string;
     cancel?: string;
 }
-declare function DraggablePaper({ handle, cancel, ...props }: DraggablePaperProps): React.JSX.Element;
+declare function DraggablePaper({ handle, cancel, ...props }: DraggablePaperProps): React$1.JSX.Element;
+
+type DataTableProps<T extends Record<string, any>> = {
+    data: T[];
+    columns: MRT_ColumnDef<T>[];
+    isLoading?: boolean;
+    isRefetching?: boolean;
+    pagination: MRT_PaginationState;
+    onPaginationChange: (updater: MRT_PaginationState | ((old: MRT_PaginationState) => MRT_PaginationState)) => void;
+    totalRows: number;
+    manualPagination?: boolean;
+    columnFilters?: MRT_ColumnFiltersState;
+    onColumnFiltersChange?: (filters: MRT_ColumnFiltersState | ((old: MRT_ColumnFiltersState) => MRT_ColumnFiltersState)) => void;
+    manualFiltering?: boolean;
+    onClearFilters?: () => void;
+    showClearFiltersButton?: boolean;
+    sorting?: MRT_SortingState;
+    onSortingChange?: (sorting: MRT_SortingState | ((old: MRT_SortingState) => MRT_SortingState)) => void;
+    manualSorting?: boolean;
+    enableStickyHeader?: boolean;
+    maxHeight?: string;
+    density?: "comfortable" | "compact" | "spacious";
+    enableColumnOrdering?: boolean;
+    enableGlobalFilter?: boolean;
+    enableColumnFilterModes?: boolean;
+    enableRowSelection?: boolean;
+    renderTopToolbarCustomActions?: (props: {
+        table: any;
+    }) => React.ReactNode;
+    renderBottomToolbarCustomActions?: (props: {
+        table: any;
+    }) => React.ReactNode;
+    tableOptions?: Partial<MRT_TableOptions<T>>;
+    localization?: Record<string, string>;
+};
+declare const DataTable: <T extends Record<string, any>>({ data, columns, isLoading, isRefetching, pagination, onPaginationChange, totalRows, manualPagination, columnFilters, onColumnFiltersChange, manualFiltering, onClearFilters, showClearFiltersButton, sorting, onSortingChange, manualSorting, enableStickyHeader, maxHeight, density, enableColumnOrdering, enableGlobalFilter, enableColumnFilterModes, enableRowSelection, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, tableOptions, localization, }: DataTableProps<T>) => React$1.JSX.Element;
 
-export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomTimePicker, DateFilter, DateFilterRange, DateMonthPicker, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, DraggablePaper, UploadImage as EnhancedUploadImage, FormInputNumber, FormInputText, HorizontalStepper, LicensePlate, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, NestedSelect as NestedSelectort, NoResult, PaginationList, PatternTextField, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage$1 as UploadImage };
+export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomTimePicker, DataTable, DateFilter, DateFilterRange, DateMonthPicker, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, DraggablePaper, UploadImage as EnhancedUploadImage, FormInputNumber, FormInputText, HorizontalStepper, LicensePlate, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, NestedSelect as NestedSelectort, NoResult, PaginationList, PatternTextField, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage$1 as UploadImage };

package/dist/index.js

@@ -36,6 +36,7 @@ __export(src_exports, {
   ConnectToBasculeButton: () => bascule_connection_button_default,
   CustomCheckbox: () => CustomCheckbox,
   CustomTimePicker: () => CustomTimePicker,
+  DataTable: () => data_table_default,
   DateFilter: () => DateFilter,
   DateFilterRange: () => DateFilterRange,
   DateMonthPicker: () => date_month_default,
@@ -607,16 +608,16 @@ function MultipleSelectChip({
   label,
   data,
   multipleitems,
-  //قابلیت انتخاب چند گزینه ای
   isLoading,
   disabled = false,
   size = "medium",
-  clear = false
+  clear = false,
+  variant = "outlined",
+  placeholder
 }) {
   const dataOptions = data?.map((value) => ({
     title: value.userName || value.name || `${value.firstName} ${value.lastName}`,
     key: value.id || `key_${Math.random()}`,
-    // Assuming each item has an 'id'
     httpMethod: numberToHttpMethodMapping[value.httpMethod],
     url: value.url,
     licensePlate: value.licensePlate
@@ -641,16 +642,6 @@ function MultipleSelectChip({
       onChange(value?.key || null);
     }
   };
-  function search(option, value) {
-    if (option.title.includes(value.title)) {
-      return true;
-    }
-    if (value.title.includes(option.title)) {
-      return true;
-    }
-    return false;
-  }
-  const CustomStyledValue = ({ children }) => /* @__PURE__ */ React3.createElement("span", { style: { color: "green", fontStyle: "italic" } }, children);
   return /* @__PURE__ */ React3.createElement(
     import_react_hook_form.Controller,
     {
@@ -665,30 +656,24 @@ function MultipleSelectChip({
           disableCloseOnSelect: multipleitems,
           options: combinedOptions,
           multiple: multipleitems,
-          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",
+          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: multipleitems ? selectedValues : combinedOptions.find(
             (option) => String(option.key) === String(value)
           ) || { title: "", key: "" },
-          onChange: (event, value2) => {
-            handleChange(event, value2, onChange);
-          },
+          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) => {
-            return /* @__PURE__ */ React3.createElement(
-              CustomeStyle,
-              {
-                props,
-                option,
-                multipleitems: !!multipleitems
-              }
-            );
-          },
+          renderOption: (props, option) => /* @__PURE__ */ React3.createElement(
+            CustomeStyle,
+            {
+              props,
+              option,
+              multipleitems: !!multipleitems
+            }
+          ),
           slots: { popper: import_material3.Popper },
           slotProps: {
             popper: {
@@ -706,7 +691,6 @@ function MultipleSelectChip({
                   name: "flip",
                   options: {
                     fallbackPlacements: ["top", "bottom"]
-                    // Ensures it flips to the top if needed
                   }
                 }
               ]
@@ -720,6 +704,8 @@ function MultipleSelectChip({
               error: !!error,
               helperText: error?.message,
               inputRef: ref,
+              variant,
+              placeholder,
               InputProps: {
                 ...params.InputProps,
                 startAdornment: /* @__PURE__ */ React3.createElement(
@@ -729,14 +715,12 @@ function MultipleSelectChip({
                       display: "flex",
                       flexWrap: "wrap",
                       maxHeight: "250px",
-                      // Set the maximum height for the chip container
                       overflowY: "auto",
-                      // Enable vertical scroll
                       padding: 0
-                      // Remove any padding to ensure chips stay inside the container
                     }
                   },
-                  /* @__PURE__ */ React3.createElement(React3.Fragment, null, isLoading ? /* @__PURE__ */ React3.createElement(import_material3.Typography, { sx: { marginRight: 1 } }, "\u062F\u0631 \u062D\u0627\u0644 \u0628\u0627\u0631\u06AF\u0630\u0627\u0631\u06CC...") : null, params.InputProps.startAdornment)
+                  isLoading ? /* @__PURE__ */ React3.createElement(import_material3.Typography, { sx: { marginRight: 1 } }, "\u062F\u0631 \u062D\u0627\u0644 \u0628\u0627\u0631\u06AF\u0630\u0627\u0631\u06CC...") : null,
+                  params.InputProps.startAdornment
                 )
               }
             }
@@ -3552,7 +3536,7 @@ var FormInputNumber = ({
   decimalScale = 2,
   autoComplete = "off",
   textAlign = "right",
-  borderless = false,
+  variant = "outlined",
   ...rest
 }) => {
   return /* @__PURE__ */ import_react22.default.createElement(
@@ -3576,30 +3560,18 @@ var FormInputNumber = ({
           },
           value: data && !value ? data : value == null ? "" : valueHandler ? valueHandler(value) : value,
           fullWidth: true,
-          variant: borderless ? "standard" : "outlined",
+          variant,
           sx: {
-            ...borderless ? {
-              "& .MuiInput-underline:before": {
-                borderBottom: "none"
-              },
-              "& .MuiInput-underline:after": {
-                borderBottom: "none"
-              },
-              "& .MuiInput-underline:hover:not(.Mui-disabled):before": {
-                borderBottom: "none"
-              }
-            } : {
-              "& .MuiOutlinedInput-notchedOutline": {
-                borderColor: borderColor || ""
+            "& .MuiOutlinedInput-notchedOutline": {
+              borderColor: borderColor || ""
+            },
+            "& .MuiOutlinedInput-root": {
+              borderRadius: "12px",
+              "&:hover fieldset": {
+                borderColor: borderColor ?? "#085938"
               },
-              "& .MuiOutlinedInput-root": {
-                borderRadius: "12px",
-                "&:hover fieldset": {
-                  borderColor: borderColor ?? "#085938"
-                },
-                "&.Mui-focused fieldset": {
-                  borderColor: borderColor ?? "#085938"
-                }
+              "&.Mui-focused fieldset": {
+                borderColor: borderColor ?? "#085938"
               }
             },
             "& .MuiInputLabel-root.Mui-focused": {
@@ -3687,6 +3659,7 @@ var FormInputText = ({
   isLoading,
   onBlurHandler,
   rows,
+  variant = "outlined",
   ...rest
 }) => {
   return /* @__PURE__ */ import_react23.default.createElement(
@@ -3708,7 +3681,7 @@ var FormInputText = ({
           value,
           fullWidth: true,
           label,
-          variant: "outlined",
+          variant,
           inputProps: {
             ...rest.inputProps,
             maxLength,
@@ -4814,6 +4787,127 @@ function DraggablePaper({
     /* @__PURE__ */ React.createElement(import_material29.Paper, { ref: nodeRef, ...props })
   );
 }
+
+// src/data-table/index.tsx
+var import_Clear = __toESM(require("@mui/icons-material/Clear"));
+var import_material30 = require("@mui/material");
+var import_material_react_table = require("material-react-table");
+var import_fa6 = require("material-react-table/locales/fa");
+var import_react32 = require("react");
+var customLocalization = {
+  ...import_fa6.MRT_Localization_FA,
+  mrt_columns_showHide_resetOrder: "\u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06CC \u062A\u0631\u062A\u06CC\u0628"
+};
+var DataTable = ({
+  data,
+  columns,
+  isLoading = false,
+  isRefetching = false,
+  pagination,
+  onPaginationChange,
+  totalRows,
+  manualPagination = true,
+  columnFilters = [],
+  onColumnFiltersChange,
+  manualFiltering = true,
+  onClearFilters,
+  showClearFiltersButton = true,
+  sorting = [],
+  onSortingChange,
+  manualSorting = false,
+  enableStickyHeader = true,
+  maxHeight = "calc(100vh - 200px)",
+  density = "compact",
+  enableColumnOrdering = true,
+  enableGlobalFilter = false,
+  enableColumnFilterModes = false,
+  enableRowSelection = false,
+  renderTopToolbarCustomActions,
+  renderBottomToolbarCustomActions,
+  tableOptions = {},
+  localization = customLocalization
+}) => {
+  const memoizedColumns = (0, import_react32.useMemo)(() => columns, [columns]);
+  const memoizedData = (0, import_react32.useMemo)(() => data, [data]);
+  const defaultRenderTopToolbarCustomActions = ({ table: table2 }) => {
+    const showFilters = table2.getState().showColumnFilters;
+    if (!showFilters || !showClearFiltersButton || !onClearFilters) return null;
+    return /* @__PURE__ */ React.createElement(import_material30.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React.createElement(
+      import_material30.Box,
+      {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-start"
+      },
+      /* @__PURE__ */ React.createElement(
+        import_material30.Button,
+        {
+          color: "secondary",
+          onClick: onClearFilters,
+          startIcon: /* @__PURE__ */ React.createElement(import_Clear.default, null)
+        },
+        "\u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06CC \u0641\u06CC\u0644\u062A\u0631\u0647\u0627"
+      )
+    ));
+  };
+  const table = (0, import_material_react_table.useMaterialReactTable)({
+    columns: memoizedColumns,
+    data: memoizedData,
+    localization,
+    // Pagination
+    manualPagination,
+    onPaginationChange,
+    pageCount: manualPagination ? Math.ceil(totalRows / pagination.pageSize) : void 0,
+    rowCount: totalRows ?? 0,
+    // Filtering
+    manualFiltering,
+    onColumnFiltersChange,
+    enableColumnFilterModes,
+    enableGlobalFilter,
+    // Sorting
+    manualSorting,
+    onSortingChange,
+    // Features
+    enableColumnOrdering,
+    enableRowSelection,
+    enableStickyHeader,
+    // State
+    state: {
+      pagination,
+      columnFilters,
+      sorting,
+      isLoading,
+      showProgressBars: isRefetching
+    },
+    // Styling
+    muiTablePaperProps: { sx: { direction: "ltr" } },
+    muiTableBodyCellProps: { sx: { textAlign: "center" } },
+    muiTableHeadCellProps: {
+      sx: {
+        "& .Mui-TableHeadCell-Content": {
+          flexDirection: "row-reverse",
+          justifyContent: "center"
+        }
+      }
+    },
+    muiTableContainerProps: {
+      sx: {
+        maxHeight
+      }
+    },
+    // Initial state
+    initialState: {
+      density
+    },
+    // Custom toolbars
+    renderTopToolbarCustomActions: renderTopToolbarCustomActions || defaultRenderTopToolbarCustomActions,
+    renderBottomToolbarCustomActions,
+    // Override with any additional options
+    ...tableOptions
+  });
+  return /* @__PURE__ */ React.createElement(import_material_react_table.MaterialReactTable, { table });
+};
+var data_table_default = DataTable;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -4822,6 +4916,7 @@ function DraggablePaper({
   ConnectToBasculeButton,
   CustomCheckbox,
   CustomTimePicker,
+  DataTable,
   DateFilter,
   DateFilterRange,
   DateMonthPicker,