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

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")
      */
@@ -1314,7 +1324,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")
      */
@@ -1314,7 +1324,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

@@ -5476,7 +5476,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 +5485,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 +6182,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 +6194,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 +6272,12 @@ var useStyles10 = reactComponents.makeStyles({
   }
 });
 var CardTicketSearchSummary = ({
+  showReturnDate = false,
   language = "id",
   originHarbor,
   destinationHarbor,
   departureDate,
+  returnDate,
   serviceClass,
   typeOfService,
   totalPassengers,
@@ -6469,8 +6473,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 +7345,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 +7360,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 };
     }
-    return void 0;
+    if (selectedDate && hoveredDate && !isSameCalendarDay(hoveredDate, selectedDate)) {
+      const earlier = hoveredDate < selectedDate ? hoveredDate : selectedDate;
+      const later = hoveredDate > selectedDate ? hoveredDate : selectedDate;
+      return { start: earlier, end: later };
+    }
+    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 +7403,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 +7448,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 +7466,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 +7488,7 @@ var ModalSelectDate = ({
     },
     [
       activeTab,
-      previewEndDate,
+      previewRange,
       selectedDate,
       selectedEndDate,
       styles.rangeEnd,
@@ -8857,8 +8868,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 +8895,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 +9791,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",