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

package/dist/index.css

@@ -23,9 +23,9 @@
   color: var(--colorNeutralForegroundOnBrand) !important;
 }
 .fui-CalendarDayGrid__dayButton {
-  background-color: transparent !important;
-  :hover {
-    background-color: transparent !important;
-  }
+  background-color: transparent;
+}
+.fui-CalendarDayGrid__dayButton:hover {
+  background-color: transparent;
 }
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ModalSelectDate/modalSelectDate.css"],"sourcesContent":[".fui-Calendar {\n  width: 100% !important;\n}\n\n.fui-CalendarDay {\n  width: 100% !important;\n}\n\n.fui-CalendarDayGrid__table {\n  width: 100% !important;\n}\n\n.fui-Calendar__monthPickerWrapper {\n  width: 100% !important;\n}\n\n.fui-CalendarPicker {\n  width: 100% !important;\n}\n\n.fui-CalendarPicker__buttonRow {\n  justify-content: space-between !important;\n  display: flex !important;\n}\n.fui-CalendarPicker__selected{\n  background-color: var(--colorBrandBackground) !important;\n  color: var(--colorNeutralForegroundOnBrand) !important;\n}\n.fui-CalendarDayGrid__dayButton{\n  background-color: transparent !important;\n  :hover{\n    background-color: transparent !important;\n  }\n}"],"mappings":";AAAA,CAAC;AACC,SAAO;AACT;AAEA,CAAC;AACC,SAAO;AACT;AAEA,CAAC;AACC,SAAO;AACT;AAEA,CAAC;AACC,SAAO;AACT;AAEA,CAAC;AACC,SAAO;AACT;AAEA,CAAC;AACC,mBAAiB;AACjB,WAAS;AACX;AACA,CAAC;AACC,oBAAkB,IAAI;AACtB,SAAO,IAAI;AACb;AACA,CAAC;AACC,oBAAkB;AAClB;AACE,sBAAkB;AACpB;AACF;","names":[]}
+{"version":3,"sources":["../src/components/ModalSelectDate/modalSelectDate.css"],"sourcesContent":[".fui-Calendar {\n  width: 100% !important;\n}\n\n.fui-CalendarDay {\n  width: 100% !important;\n}\n\n.fui-CalendarDayGrid__table {\n  width: 100% !important;\n}\n\n.fui-Calendar__monthPickerWrapper {\n  width: 100% !important;\n}\n\n.fui-CalendarPicker {\n  width: 100% !important;\n}\n\n.fui-CalendarPicker__buttonRow {\n  justify-content: space-between !important;\n  display: flex !important;\n}\n.fui-CalendarPicker__selected{\n  background-color: var(--colorBrandBackground) !important;\n  color: var(--colorNeutralForegroundOnBrand) !important;\n}\n.fui-CalendarDayGrid__dayButton{\n  background-color: transparent;\n}\n.fui-CalendarDayGrid__dayButton:hover{\n  background-color: transparent;\n}"],"mappings":";AAAA,CAAC;AACC,SAAO;AACT;AAEA,CAAC;AACC,SAAO;AACT;AAEA,CAAC;AACC,SAAO;AACT;AAEA,CAAC;AACC,SAAO;AACT;AAEA,CAAC;AACC,SAAO;AACT;AAEA,CAAC;AACC,mBAAiB;AACjB,WAAS;AACX;AACA,CAAC;AACC,oBAAkB,IAAI;AACtB,SAAO,IAAI;AACb;AACA,CAAC;AACC,oBAAkB;AACpB;AACA,CAHC,8BAG8B;AAC7B,oBAAkB;AACpB;","names":[]}

package/dist/index.d.mts

@@ -750,6 +750,7 @@ interface CardTicketSearchSummaryLabels {
     originHarbor: string;
     destinationHarbor: string;
     departureDate: string;
+    returnDate: string;
     serviceClass: string;
     typeOfService: string;
     totalPassengers: string;
@@ -757,6 +758,11 @@ interface CardTicketSearchSummaryLabels {
     swapAriaLabel: string;
 }
 interface CardTicketSearchSummaryProps {
+    /**
+     * Show return date field
+     * @default false
+     */
+    showReturnDate?: boolean;
     /**
      * Language for labels (Indonesian or English)
      * @default 'id'
@@ -774,6 +780,10 @@ interface CardTicketSearchSummaryProps {
      * Departure date
      */
     departureDate: string;
+    /**
+     * Return date
+     */
+    returnDate?: string;
     /**
      * Service type text (e.g., "3 Service Types")
      */
@@ -815,6 +825,7 @@ interface SelectOption {
     value: string;
     label: string;
     disabled?: boolean;
+    description?: string;
 }
 interface RadioOption {
     value: string;
@@ -1314,7 +1325,7 @@ interface ModalSelectDateProps {
  * <ModalSelectDate
  *   open={isOpen}
  *   onClose={() => setIsOpen(false)}
- *   title="Pilih Tanggal Keberangkatan"
+ *   title="Pilih Tanggal Pergi"
  *   selectedDepartureDate={departureDate}
  *   selectedReturnDate={returnDate}
  *   onSelectDepartureDate={setDepartureDate}

package/dist/index.d.ts

@@ -750,6 +750,7 @@ interface CardTicketSearchSummaryLabels {
     originHarbor: string;
     destinationHarbor: string;
     departureDate: string;
+    returnDate: string;
     serviceClass: string;
     typeOfService: string;
     totalPassengers: string;
@@ -757,6 +758,11 @@ interface CardTicketSearchSummaryLabels {
     swapAriaLabel: string;
 }
 interface CardTicketSearchSummaryProps {
+    /**
+     * Show return date field
+     * @default false
+     */
+    showReturnDate?: boolean;
     /**
      * Language for labels (Indonesian or English)
      * @default 'id'
@@ -774,6 +780,10 @@ interface CardTicketSearchSummaryProps {
      * Departure date
      */
     departureDate: string;
+    /**
+     * Return date
+     */
+    returnDate?: string;
     /**
      * Service type text (e.g., "3 Service Types")
      */
@@ -815,6 +825,7 @@ interface SelectOption {
     value: string;
     label: string;
     disabled?: boolean;
+    description?: string;
 }
 interface RadioOption {
     value: string;
@@ -1314,7 +1325,7 @@ interface ModalSelectDateProps {
  * <ModalSelectDate
  *   open={isOpen}
  *   onClose={() => setIsOpen(false)}
- *   title="Pilih Tanggal Keberangkatan"
+ *   title="Pilih Tanggal Pergi"
  *   selectedDepartureDate={departureDate}
  *   selectedReturnDate={returnDate}
  *   onSelectDepartureDate={setDepartureDate}

package/dist/index.js

@@ -4264,7 +4264,8 @@ var InputDynamic = ({
   const [isMobile, setIsMobile] = React.useState(false);
   const [isInsideDialog, setIsInsideDialog] = React.useState(false);
   React.useEffect(() => {
-    if (typeof document === "undefined" || typeof window === "undefined") return;
+    if (typeof document === "undefined" || typeof window === "undefined")
+      return;
     const provider = document.querySelector(
       ".fui-FluentProvider"
     );
@@ -4586,7 +4587,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");
@@ -4617,7 +4620,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;
@@ -4656,7 +4662,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 })
+                      );
                     }
                   }
                 }
@@ -4682,7 +4690,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);
@@ -4748,7 +4759,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;
@@ -4786,7 +4800,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 })
+                      );
                     }
                   }
                 }
@@ -4813,7 +4829,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);
@@ -4877,6 +4896,21 @@ var InputDynamic = ({
             },
             getOptionLabel: (option) => option.label,
             getOptionValue: (option) => option.value,
+            formatOptionLabel: (option) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: option.label }),
+              option.description && /* @__PURE__ */ jsxRuntime.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,
@@ -4974,7 +5008,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);
                   }
@@ -4994,7 +5031,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 })
+                        );
                       }
                     }
                   }
@@ -5476,7 +5515,7 @@ var DEFAULT_LABELS8 = {
   id: {
     fromLabel: "Dari",
     toLabel: "Ke",
-    departureDateLabel: "Tanggal Berangkat",
+    departureDateLabel: "Tanggal Pergi",
     returnDateLabel: "Tanggal Pulang",
     serviceClassLabel: "Jenis Layanan",
     typeOfServiceLabel: "Jenis Penumpang",
@@ -5485,14 +5524,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",
@@ -6182,7 +6221,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",
@@ -6193,6 +6233,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",
@@ -6270,10 +6311,12 @@ var useStyles10 = reactComponents.makeStyles({
   }
 });
 var CardTicketSearchSummary = ({
+  showReturnDate = false,
   language = "id",
   originHarbor,
   destinationHarbor,
   departureDate,
+  returnDate,
   serviceClass,
   typeOfService,
   totalPassengers,
@@ -6469,8 +6512,8 @@ var CardTicketSearchSummary = ({
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   RenderField,
                   {
-                    label: mergedLabels.departureDate,
-                    value: departureDate,
+                    label: showReturnDate ? mergedLabels.returnDate : mergedLabels.departureDate,
+                    value: showReturnDate ? returnDate : departureDate,
                     icon: "fluent:calendar-24-regular"
                   }
                 )
@@ -7341,6 +7384,10 @@ var ModalSelectDate = ({
 }) => {
   const styles = useStyles13();
   const mergedLabels = { ...DEFAULT_LABELS12[language], ...labels };
+  const isSameCalendarDay = (first, second) => {
+    if (!first || !second) return false;
+    return moment__default.default(first).isSame(second, "day");
+  };
   React.useEffect(() => {
     moment__default.default.locale(language === "id" ? "id" : "en");
   }, [language]);
@@ -7352,24 +7399,26 @@ var ModalSelectDate = ({
   );
   const [hoveredDate, setHoveredDate] = React.useState();
   const [activeTab, setActiveTab] = React.useState(initialTab);
-  const previewEndDate = React.useMemo(() => {
-    if (selectedEndDate) return selectedEndDate;
-    if (selectedDate && hoveredDate && hoveredDate > selectedDate) {
-      return hoveredDate;
+  const previewRange = React.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__default.default(first).isSame(second, "day");
-  };
+  const prevOpenRef = React.useRef(false);
   React.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);
@@ -7393,18 +7442,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();
@@ -7437,14 +7487,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) {
@@ -7454,12 +7505,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;
@@ -7477,7 +7527,7 @@ var ModalSelectDate = ({
     },
     [
       activeTab,
-      previewEndDate,
+      previewRange,
       selectedDate,
       selectedEndDate,
       styles.rangeEnd,
@@ -8857,8 +8907,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: {
@@ -8884,8 +8934,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);
@@ -9780,9 +9830,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",