@asdp/ferryui 0.1.22-dev.10166 → 0.1.22-dev.10168

package/dist/index.mjs

@@ -4255,7 +4255,8 @@ var InputDynamic = ({
   const [isMobile, setIsMobile] = useState(false);
   const [isInsideDialog, setIsInsideDialog] = useState(false);
   useEffect(() => {
-    if (typeof document === "undefined" || typeof window === "undefined") return;
+    if (typeof document === "undefined" || typeof window === "undefined")
+      return;
     const provider = document.querySelector(
       ".fui-FluentProvider"
     );
@@ -4577,7 +4578,9 @@ var InputDynamic = ({
             if (!DIGITS_ONLY_REGEX.test(e.key)) {
               e.preventDefault();
               const fieldStr = typeof field.value === "string" ? field.value : "";
-              const fieldDigits = stripNonDigits(fieldStr.replace(/^\+/, ""));
+              const fieldDigits = stripNonDigits(
+                fieldStr.replace(/^\+/, "")
+              );
               const activeDialCode = getDialCode(onlyCountries?.[0] || defaultCountry) || "";
               const userDigitsFromField = activeDialCode && fieldDigits.startsWith(activeDialCode) ? fieldDigits.slice(activeDialCode.length) : fieldDigits;
               const hadTrunkPrefix = rawEmailOrPhoneInputRef.current.startsWith("08");
@@ -4608,7 +4611,10 @@ var InputDynamic = ({
                   return;
                 }
                 const countryDialCode = data?.dialCode || "";
-                const cleanedValue = removeLeadingZeroAfterDialCode(value, countryDialCode);
+                const cleanedValue = removeLeadingZeroAfterDialCode(
+                  value,
+                  countryDialCode
+                );
                 if (cleanedValue === countryDialCode) {
                   const dialCodeChanged = lastEmailOrPhoneValue && lastEmailOrPhoneValue !== countryDialCode && !lastEmailOrPhoneValue.startsWith(countryDialCode);
                   const isInitial = !lastEmailOrPhoneValue;
@@ -4647,7 +4653,9 @@ var InputDynamic = ({
                     const inputEl = e.currentTarget;
                     if (nativeInputValueSetter) {
                       nativeInputValueSetter.call(inputEl, digitsOnly);
-                      inputEl.dispatchEvent(new Event("input", { bubbles: true }));
+                      inputEl.dispatchEvent(
+                        new Event("input", { bubbles: true })
+                      );
                     }
                   }
                 }
@@ -4673,7 +4681,10 @@ var InputDynamic = ({
             rawEmailOrPhoneInputRef.current = newValue;
             let normalizedValue = newValue;
             if (detectedType === "phone") {
-              normalizedValue = localToInternational(newValue, defaultCountry);
+              normalizedValue = localToInternational(
+                newValue,
+                defaultCountry
+              );
             }
             field.onChange(normalizedValue);
             updateEmailOrPhoneType(normalizedValue);
@@ -4739,7 +4750,10 @@ var InputDynamic = ({
                   return;
                 }
                 const countryDialCode = data?.dialCode || "";
-                const cleanedValue = removeLeadingZeroAfterDialCode(value, countryDialCode);
+                const cleanedValue = removeLeadingZeroAfterDialCode(
+                  value,
+                  countryDialCode
+                );
                 if (cleanedValue === countryDialCode) {
                   const dialCodeChanged = lastPhoneValue && lastPhoneValue !== countryDialCode && !lastPhoneValue.startsWith(countryDialCode);
                   const isInitial = !lastPhoneValue;
@@ -4777,7 +4791,9 @@ var InputDynamic = ({
                     const inputEl = e.currentTarget;
                     if (nativeInputValueSetter) {
                       nativeInputValueSetter.call(inputEl, digitsOnly);
-                      inputEl.dispatchEvent(new Event("input", { bubbles: true }));
+                      inputEl.dispatchEvent(
+                        new Event("input", { bubbles: true })
+                      );
                     }
                   }
                 }
@@ -4804,7 +4820,10 @@ var InputDynamic = ({
             if (willSwitchType) shouldFocusRef.current = true;
             let normalizedValue = newValue;
             if (detectedType === "phone") {
-              normalizedValue = localToInternational(newValue, defaultCountry);
+              normalizedValue = localToInternational(
+                newValue,
+                defaultCountry
+              );
             }
             field.onChange(normalizedValue);
             updateIdentityType(normalizedValue);
@@ -4868,6 +4887,21 @@ var InputDynamic = ({
             },
             getOptionLabel: (option) => option.label,
             getOptionValue: (option) => option.value,
+            formatOptionLabel: (option) => /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { children: option.label }),
+              option.description && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: "12px",
+                    color: "#6b7280",
+                    marginTop: "2px",
+                    lineHeight: "1.4"
+                  },
+                  children: option.description
+                }
+              )
+            ] }),
             isOptionDisabled: (option) => option.disabled || false,
             menuPlacement: menuPlacement || "auto",
             menuShouldScrollIntoView: false,
@@ -4965,7 +4999,10 @@ var InputDynamic = ({
                     return;
                   }
                   const dialCode = data?.dialCode || "";
-                  let cleanedValue = removeLeadingZeroAfterDialCode(value, dialCode);
+                  let cleanedValue = removeLeadingZeroAfterDialCode(
+                    value,
+                    dialCode
+                  );
                   if (cleanedValue.length > PHONE_MAX_DIGITS) {
                     cleanedValue = cleanedValue.substring(0, PHONE_MAX_DIGITS);
                   }
@@ -4985,7 +5022,9 @@ var InputDynamic = ({
                       const inputEl = e.currentTarget;
                       if (nativeInputValueSetter) {
                         nativeInputValueSetter.call(inputEl, digitsOnly);
-                        inputEl.dispatchEvent(new Event("input", { bubbles: true }));
+                        inputEl.dispatchEvent(
+                          new Event("input", { bubbles: true })
+                        );
                       }
                     }
                   }
@@ -5467,7 +5506,7 @@ var DEFAULT_LABELS8 = {
   id: {
     fromLabel: "Dari",
     toLabel: "Ke",
-    departureDateLabel: "Tanggal Berangkat",
+    departureDateLabel: "Tanggal Pergi",
     returnDateLabel: "Tanggal Pulang",
     serviceClassLabel: "Jenis Layanan",
     typeOfServiceLabel: "Jenis Penumpang",
@@ -5476,14 +5515,14 @@ var DEFAULT_LABELS8 = {
     searchButton: "Cari Tiket",
     placeholderPort: "Pilih Pelabuhan Asal",
     placeholderDestinationPort: "Pilih Pelabuhan Tujuan",
-    placeholderDepartureDate: "Pilih Tanggal Keberangkatan",
-    placeholderReturnDate: "Pilih Tanggal Kepulangan",
+    placeholderDepartureDate: "Pilih Tanggal Pergi",
+    placeholderReturnDate: "Pilih Tanggal Pulang",
     placeholderTypeClass: "Pilih Jenis Layanan",
     placeholderTypeService: "Pilih Jenis Penumpang",
     placeholderPassenger: "Pilih Jumlah Penumpang",
     errorOriginRequired: "Pelabuhan asal wajib diisi",
     errorDestinationRequired: "Pelabuhan tujuan wajib diisi",
-    errorDepartureDateRequired: "Tanggal Berangkat wajib diisi",
+    errorDepartureDateRequired: "Tanggal Pergi wajib diisi",
     errorReturnDateRequired: "Tanggal Pulang wajib diisi",
     switchAriaLabel: "Tukar asal dan tujuan",
     ferryDescription: "Layanan Penyeberangan Ferry ASDP",
@@ -6173,7 +6212,8 @@ var DEFAULT_LABELS9 = {
   id: {
     originHarbor: "Pelabuhan Keberangkatan",
     destinationHarbor: "Pelabuhan Tujuan",
-    departureDate: "Tanggal Keberangkatan",
+    departureDate: "Tanggal Pergi",
+    returnDate: "Tanggal Pulang",
     serviceClass: "Jenis Layanan",
     typeOfService: "Jenis Penumpang",
     totalPassengers: "Jumlah Penumpang",
@@ -6184,6 +6224,7 @@ var DEFAULT_LABELS9 = {
     originHarbor: "Departure Port",
     destinationHarbor: "Destination Port",
     departureDate: "Departure Date",
+    returnDate: "Return Date",
     serviceClass: "Service Type",
     typeOfService: "Type Of Passenger",
     totalPassengers: "Total Passengers",
@@ -6261,10 +6302,12 @@ var useStyles10 = makeStyles({
   }
 });
 var CardTicketSearchSummary = ({
+  showReturnDate = false,
   language = "id",
   originHarbor,
   destinationHarbor,
   departureDate,
+  returnDate,
   serviceClass,
   typeOfService,
   totalPassengers,
@@ -6460,8 +6503,8 @@ var CardTicketSearchSummary = ({
                 children: /* @__PURE__ */ jsx(
                   RenderField,
                   {
-                    label: mergedLabels.departureDate,
-                    value: departureDate,
+                    label: showReturnDate ? mergedLabels.returnDate : mergedLabels.departureDate,
+                    value: showReturnDate ? returnDate : departureDate,
                     icon: "fluent:calendar-24-regular"
                   }
                 )
@@ -7332,6 +7375,10 @@ var ModalSelectDate = ({
 }) => {
   const styles = useStyles13();
   const mergedLabels = { ...DEFAULT_LABELS12[language], ...labels };
+  const isSameCalendarDay = (first, second) => {
+    if (!first || !second) return false;
+    return moment(first).isSame(second, "day");
+  };
   useEffect(() => {
     moment.locale(language === "id" ? "id" : "en");
   }, [language]);
@@ -7343,24 +7390,26 @@ var ModalSelectDate = ({
   );
   const [hoveredDate, setHoveredDate] = useState();
   const [activeTab, setActiveTab] = useState(initialTab);
-  const previewEndDate = useMemo(() => {
-    if (selectedEndDate) return selectedEndDate;
-    if (selectedDate && hoveredDate && hoveredDate > selectedDate) {
-      return hoveredDate;
+  const previewRange = useMemo(() => {
+    if (selectedEndDate) {
+      return { start: selectedDate, end: selectedEndDate };
+    }
+    if (selectedDate && hoveredDate && !isSameCalendarDay(hoveredDate, selectedDate)) {
+      const earlier = hoveredDate < selectedDate ? hoveredDate : selectedDate;
+      const later = hoveredDate > selectedDate ? hoveredDate : selectedDate;
+      return { start: earlier, end: later };
     }
-    return void 0;
+    return { start: selectedDate, end: void 0 };
   }, [hoveredDate, selectedDate, selectedEndDate]);
-  const isSameCalendarDay = (first, second) => {
-    if (!first || !second) return false;
-    return moment(first).isSame(second, "day");
-  };
+  const prevOpenRef = useRef(false);
   useEffect(() => {
-    if (open) {
+    if (open && !prevOpenRef.current) {
       setSelectedDate(selectedDepartureDate);
       setSelectedEndDate(selectedReturnDate);
       setActiveTab(initialTab);
       setHoveredDate(void 0);
     }
+    prevOpenRef.current = open;
   }, [open, selectedDepartureDate, selectedReturnDate, initialTab]);
   const handleTabChange = (tab) => {
     setActiveTab(tab);
@@ -7384,18 +7433,19 @@ var ModalSelectDate = ({
         setHoveredDate(void 0);
         onSelectDepartureDate(date);
       } else {
-        if (date < currentStart) {
-          setSelectedEndDate(currentStart);
+        const earlier = date < currentStart ? date : currentStart;
+        const later = date > currentStart ? date : currentStart;
+        if (isSameCalendarDay(date, currentStart)) {
           setSelectedDate(date);
-          onSelectDepartureDate(date);
-          if (onSelectReturnDate) {
-            onSelectReturnDate(currentStart);
-          }
-        } else {
-          setSelectedEndDate(date);
-          if (onSelectReturnDate) {
-            onSelectReturnDate(date);
-          }
+          setSelectedEndDate(void 0);
+          setHoveredDate(void 0);
+          return;
+        }
+        setSelectedDate(earlier);
+        setSelectedEndDate(later);
+        onSelectDepartureDate(earlier);
+        if (onSelectReturnDate) {
+          onSelectReturnDate(later);
         }
         setHoveredDate(void 0);
         handleClose();
@@ -7428,14 +7478,15 @@ var ModalSelectDate = ({
         element.onmouseleave = null;
         return;
       }
-      const endDateForVisual = previewEndDate;
-      const startTime = selectedDate.getTime();
-      const endTime = endDateForVisual?.getTime();
+      const rangeStart = previewRange.start;
+      const rangeEnd = previewRange.end;
+      const startTime = rangeStart?.getTime();
+      const endTime = rangeEnd?.getTime();
       const currentTime = date.getTime();
-      const isSameStartEnd = isSameCalendarDay(endDateForVisual, selectedDate);
-      const isStartDay = isSameCalendarDay(date, selectedDate);
-      const isEndDay = isSameCalendarDay(date, endDateForVisual);
-      if (isStartDay && (!endDateForVisual || isSameStartEnd)) {
+      const isSameStartEnd = isSameCalendarDay(rangeStart, rangeEnd);
+      const isStartDay = isSameCalendarDay(date, rangeStart);
+      const isEndDay = isSameCalendarDay(date, rangeEnd);
+      if (isStartDay && (!rangeEnd || isSameStartEnd)) {
         addTokens(styles.rangeSingle);
       } else {
         if (isStartDay) {
@@ -7445,12 +7496,11 @@ var ModalSelectDate = ({
           addTokens(styles.rangeEnd);
         }
       }
-      if (endTime && currentTime > startTime && currentTime < endTime) {
+      if (startTime && endTime && currentTime > startTime && currentTime < endTime) {
         addTokens(selectedEndDate ? styles.rangeMiddle : styles.rangePreview);
       }
       if (!selectedEndDate) {
         element.onmouseenter = () => {
-          if (date < selectedDate) return;
           setHoveredDate((prev) => {
             if (isSameCalendarDay(prev, date)) {
               return prev;
@@ -7468,7 +7518,7 @@ var ModalSelectDate = ({
     },
     [
       activeTab,
-      previewEndDate,
+      previewRange,
       selectedDate,
       selectedEndDate,
       styles.rangeEnd,
@@ -8848,8 +8898,8 @@ var DEFAULT_LABELS16 = {
     recommendation: "Rekomendasi",
     highestPrice: "Harga Tertinggi",
     lowestPrice: "Harga Terendah",
-    earliestDeparture: "Keberangkatan Paling Awal",
-    latestDeparture: "Keberangkatan Paling Akhir",
+    earliestDeparture: "Pergi Paling Awal",
+    latestDeparture: "Pergi Paling Akhir",
     resetSortAriaLabel: "Hapus pengurutan"
   },
   en: {
@@ -8875,8 +8925,8 @@ var DEFAULT_SORT_OPTIONS = [
   { value: "recommended", sortBy: "recommendation", sortDir: "ASC", label: "Rekomendasi" },
   { value: "price-desc", sortBy: "price", sortDir: "DESC", label: "Harga Tertinggi" },
   { value: "price-asc", sortBy: "price", sortDir: "ASC", label: "Harga Terendah" },
-  { value: "departure-asc", sortBy: "departure", sortDir: "ASC", label: "Keberangkatan Paling Awal" },
-  { value: "departure-desc", sortBy: "departure", sortDir: "DESC", label: "Keberangkatan Paling Akhir" }
+  { value: "departure-asc", sortBy: "departure", sortDir: "ASC", label: "Pergi Paling Awal" },
+  { value: "departure-desc", sortBy: "departure", sortDir: "DESC", label: "Pergi Paling Akhir" }
 ];
 var getSortLabel = (value) => {
   const option = DEFAULT_SORT_OPTIONS.find((opt) => opt.value === value);
@@ -9771,9 +9821,9 @@ var DEFAULT_LABELS19 = {
     toLabel: "Ke",
     toPlaceholder: "Pilih pelabuhan tujuan",
     toRequired: "Pelabuhan tujuan wajib diisi",
-    departureDateLabel: "Tanggal Berangkat",
-    departureDatePlaceholder: "Pilih Tanggal Berangkat",
-    departureDateRequired: "Tanggal Berangkat wajib diisi",
+    departureDateLabel: "Tanggal Pergi",
+    departureDatePlaceholder: "Pilih Tanggal Pergi",
+    departureDateRequired: "Tanggal Pergi wajib diisi",
     roundTripLabel: "Pulang Pergi",
     returnDateLabel: "Tanggal Pulang",
     returnDatePlaceholder: "Pilih Tanggal Pulang",