@mamrp/components 1.4.10 → 1.4.12

package/dist/index.mjs

@@ -638,6 +638,7 @@ function MultipleSelectChip({
               inputRef: ref,
               variant,
               placeholder,
+              InputLabelProps: { shrink: true },
               InputProps: {
                 ...params.InputProps,
                 endAdornment: /* @__PURE__ */ React3.createElement(React3.Fragment, null, isLoading ? /* @__PURE__ */ React3.createElement(CircularProgress, { color: "primary", size: 20 }) : null, params.InputProps.endAdornment)
@@ -1187,8 +1188,7 @@ var JalaliDatePicker = ({
   maxDate,
   minDate,
   clear = true,
-  views,
-  showArrows = false
+  views
 }) => {
   const today = moment();
   const customLocaleText = {
@@ -1199,7 +1199,21 @@ var JalaliDatePicker = ({
     start: "\u0634\u0631\u0648\u0639",
     end: "\u067E\u0627\u06CC\u0627\u0646",
     previousMonth: "\u0645\u0627\u0647 \u0642\u0628\u0644",
-    nextMonth: "\u0645\u0627\u0647 \u0628\u0639\u062F"
+    nextMonth: "\u0645\u0627\u0647 \u0628\u0639\u062F",
+    openDatePickerDialogue: (date, utils, formattedDate) => `\u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0627\u0631\u06CC\u062E ${formattedDate ? `(${formattedDate})` : ""}`,
+    openTimePickerDialogue: (date, utils, formattedTime) => `\u0627\u0646\u062A\u062E\u0627\u0628 \u0632\u0645\u0627\u0646 ${formattedTime ? `(${formattedTime})` : ""}`,
+    selectDate: "\u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0627\u0631\u06CC\u062E",
+    selectTime: "\u0627\u0646\u062A\u062E\u0627\u0628 \u0632\u0645\u0627\u0646",
+    datePickerToolbarTitle: "\u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0627\u0631\u06CC\u062E",
+    timePickerToolbarTitle: "\u0627\u0646\u062A\u062E\u0627\u0628 \u0632\u0645\u0627\u0646",
+    dateTimePickerToolbarTitle: "\u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0627\u0631\u06CC\u062E \u0648 \u0632\u0645\u0627\u0646",
+    hoursClockNumberText: (hours) => `${hours} \u0633\u0627\u0639\u062A`,
+    minutesClockNumberText: (minutes) => `${minutes} \u062F\u0642\u06CC\u0642\u0647`,
+    secondsClockNumberText: (seconds) => `${seconds} \u062B\u0627\u0646\u06CC\u0647`,
+    calendarWeekNumberHeaderLabel: "\u0647\u0641\u062A\u0647",
+    calendarWeekNumberHeaderText: "#",
+    calendarWeekNumberAriaLabelText: (weekNumber) => `\u0647\u0641\u062A\u0647 ${weekNumber}`,
+    calendarWeekNumberText: (weekNumber) => `${weekNumber}`
   };
   return /* @__PURE__ */ React8.createElement(
     LocalizationProvider,
@@ -1218,8 +1232,9 @@ var JalaliDatePicker = ({
             e.stopPropagation();
             const currentValue = field.value ? moment(field.value) : moment();
             const previousDate = currentValue.clone().subtract(1, "day");
-            if (minDate && previousDate.isBefore(moment(minDate), "day"))
+            if (minDate && previousDate.isBefore(moment(minDate), "day")) {
               return;
+            }
             const nowUTC3 = /* @__PURE__ */ new Date();
             const iranHour = nowUTC3.getUTCHours();
             const iranMinute = nowUTC3.getUTCMinutes();
@@ -1231,7 +1246,9 @@ var JalaliDatePicker = ({
             const currentValue = field.value ? moment(field.value) : moment();
             const nextDate = currentValue.clone().add(1, "day");
             const maxDateValue = maxDate ? maxDate : today;
-            if (nextDate.isAfter(moment(maxDateValue), "day")) return;
+            if (nextDate.isAfter(moment(maxDateValue), "day")) {
+              return;
+            }
             const nowUTC3 = /* @__PURE__ */ new Date();
             const iranHour = nowUTC3.getUTCHours();
             const iranMinute = nowUTC3.getUTCMinutes();
@@ -1252,6 +1269,22 @@ var JalaliDatePicker = ({
               value: field.value ? moment(field.value) : null,
               slotProps: {
                 ...clear && !disabled ? { field: { clearable: true } } : {},
+                popper: {
+                  modifiers: [
+                    {
+                      name: "preventOverflow",
+                      options: {
+                        boundary: "window"
+                      }
+                    },
+                    {
+                      name: "flip",
+                      options: {
+                        fallbackPlacements: ["right", "left", "top"]
+                      }
+                    }
+                  ]
+                },
                 textField: {
                   size,
                   placeholder: field.value || isLoading ? "" : "\u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0627\u0631\u06CC\u062E ",
@@ -1265,7 +1298,7 @@ var JalaliDatePicker = ({
                     style: { cursor: "pointer" }
                   },
                   InputProps: {
-                    startAdornment: showArrows && !isLoading ? /* @__PURE__ */ React8.createElement(
+                    startAdornment: !isLoading && /* @__PURE__ */ React8.createElement(
                       Box7,
                       {
                         sx: {
@@ -1280,12 +1313,14 @@ var JalaliDatePicker = ({
                         {
                           onClick: handlePreviousDate,
                           disabled: isLoading || disabled,
-                          sx: { padding: "2px" }
+                          sx: {
+                            padding: "2px"
+                          }
                         },
                         /* @__PURE__ */ React8.createElement(MdChevronRight, { size: 26 })
                       ))
-                    ) : null,
-                    endAdornment: isLoading ? /* @__PURE__ */ React8.createElement(CircularProgress3, { color: "secondary", size: 20 }) : showArrows && !disabled ? /* @__PURE__ */ React8.createElement(
+                    ),
+                    endAdornment: isLoading ? /* @__PURE__ */ React8.createElement(CircularProgress3, { color: "secondary", size: 20 }) : disabled ? null : /* @__PURE__ */ React8.createElement(
                       Box7,
                       {
                         sx: { display: "flex", alignItems: "center", ml: 1 }
@@ -1295,11 +1330,13 @@ var JalaliDatePicker = ({
                         {
                           onClick: handleNextDate,
                           disabled: isLoading || disabled,
-                          sx: { padding: "2px" }
+                          sx: {
+                            padding: "2px"
+                          }
                         },
                         /* @__PURE__ */ React8.createElement(MdChevronLeft, { size: 26 })
                       ))
-                    ) : null,
+                    ),
                     ...field.value && {
                       value: persian ? `${moment(field.value).format(
                         "dddd   -   jDD/jMMMM/jYYYY"
@@ -1313,17 +1350,22 @@ var JalaliDatePicker = ({
                       }
                     }
                   }
+                },
+                actionBar: {
+                  actions: ["cancel", "accept"]
                 }
               },
               onChange: (value) => {
-                if (value == null) field.onChange(null);
+                if (value == null) {
+                  field.onChange(null);
+                }
               },
               onAccept: (newValue) => {
                 if (newValue) {
                   const currentDate = dayjs(newValue);
                   const nowUTC3 = /* @__PURE__ */ new Date();
-                  const iranHour = nowUTC3.getUTCHours();
-                  const iranMinute = nowUTC3.getUTCMinutes();
+                  let iranHour = nowUTC3.getUTCHours();
+                  let iranMinute = nowUTC3.getUTCMinutes();
                   const dateTimeWithIranTime4 = currentDate.hour(iranHour).minute(iranMinute).second(nowUTC3.getUTCSeconds());
                   field.onChange(
                     dateTimeWithIranTime4.format("YYYY-MM-DDTHH:mm:ss")
@@ -1334,13 +1376,61 @@ var JalaliDatePicker = ({
               },
               sx: {
                 width: "100%",
+                borderColor: error ? "#D32F2F" : "#C4C4C4",
                 "& .MuiOutlinedInput-notchedOutline": {
                   borderColor: error ? "#D32F2F" : "#C4C4C4"
                 },
                 "& .MuiInputBase-root": {
                   height: size === "small" ? 40 : 56
                 }
-              }
+              },
+              slots: {
+                ...!clear && {
+                  clearButton: React8.Fragment,
+                  clearIcon: React8.Fragment
+                },
+                toolbar: () => {
+                  const currentDate = moment(field.value);
+                  const formattedDate = currentDate.format("dddd, jDD jMMMM");
+                  return /* @__PURE__ */ React8.createElement(
+                    Box7,
+                    {
+                      sx: {
+                        my: 2,
+                        mx: 4
+                      }
+                    },
+                    /* @__PURE__ */ React8.createElement(Typography3, { variant: "overline", color: "primary" }, "\u062A\u0627\u0631\u06CC\u062E \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F"),
+                    /* @__PURE__ */ React8.createElement(Typography3, { variant: "h4" }, formattedDate == "Invalid date" ? "" : formattedDate)
+                  );
+                },
+                monthButton: (props) => {
+                  return /* @__PURE__ */ React8.createElement(
+                    "button",
+                    {
+                      className: `${props.className}`,
+                      style: {
+                        width: "80%",
+                        padding: "10px",
+                        marginBottom: "20px",
+                        border: "1px solid #ccc",
+                        borderRadius: "12px",
+                        backgroundColor: props.disabled ? "#f0f0f0" : "#f0000",
+                        fontSize: "14px",
+                        cursor: props.disabled ? "default" : "pointer"
+                      },
+                      disabled: props.disabled,
+                      onFocus: props.onFocus,
+                      onBlur: props.onBlur,
+                      onClick: props.onClick,
+                      ref: props.ref
+                    },
+                    props["aria-label"]
+                  );
+                }
+              },
+              minDate: minDate ? minDate : null,
+              maxDate: maxDate ? maxDate : today
             }
           ), error && /* @__PURE__ */ React8.createElement(Typography3, { fontSize: 13, color: "error", sx: { mt: 0.6, ml: 1 } }, error.message));
         }