@asdp/ferryui 0.1.22-dev.9767 → 0.1.22-dev.9789

package/dist/index.js

@@ -1709,7 +1709,7 @@ var CardTicket = ({
                   },
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: mergedLabels.totalPriceLabel }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(
+                    /* @__PURE__ */ jsxRuntime.jsx(
                       reactComponents.Title3,
                       {
                         style: {
@@ -1717,11 +1717,7 @@ var CardTicket = ({
                           flex: "column",
                           justifyContent: "end"
                         },
-                        children: [
-                          mergedLabels.currencySymbol,
-                          "\xA0",
-                          departureItem?.billingDetail?.total?.formatted
-                        ]
+                        children: departureItem?.billingDetail?.total?.formatted
                       }
                     )
                   ]
@@ -4260,14 +4256,29 @@ var InputDynamic = ({
   const shouldFocusRef = React.useRef(false);
   const isBackspaceNavigationRef = React.useRef(false);
   const rawEmailOrPhoneInputRef = React.useRef("");
+  const wrapperRef = React.useRef(null);
   const [selectPortalTarget, setSelectPortalTarget] = React.useState(null);
+  const [isMobile, setIsMobile] = React.useState(false);
+  const [isInsideDialog, setIsInsideDialog] = React.useState(false);
   React.useEffect(() => {
-    if (typeof document !== "undefined") {
-      const provider = document.querySelector(
-        ".fui-FluentProvider"
+    if (typeof document === "undefined" || typeof window === "undefined") return;
+    const provider = document.querySelector(
+      ".fui-FluentProvider"
+    );
+    setSelectPortalTarget(provider ?? document.body);
+    const MOBILE_BREAKPOINT = 768;
+    const checkMobile = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    if (wrapperRef.current) {
+      const dialog = wrapperRef.current.closest(
+        ".fui-DialogBody, [role='dialog']"
       );
-      setSelectPortalTarget(provider ?? document.body);
+      setIsInsideDialog(!!dialog);
     }
+    return () => {
+      window.removeEventListener("resize", checkMobile);
+    };
   }, []);
   const getPhoneInputValue = (val) => {
     let cleaned = val.startsWith("+") ? stripNonDigits(val.substring(1)) : stripNonDigits(val);
@@ -4371,7 +4382,9 @@ var InputDynamic = ({
       menuList: (provided) => ({
         ...provided,
         padding: 0,
-        maxHeight: "300px",
+        // On mobile inside a Dialog: limit height to 200px to prevent viewport overflow.
+        // Otherwise keep 300px. Breakpoint: designTokens.breakpoints.md = 768px.
+        maxHeight: isMobile && isInsideDialog ? "180px" : "300px",
         /* Targetkan Webkit Scrollbar di menuList */
         "&::-webkit-scrollbar": {
           width: "8px",
@@ -5391,7 +5404,7 @@ var InputDynamic = ({
     }
     return rules;
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, style: { display: "contents" }, children: /* @__PURE__ */ jsxRuntime.jsx(
     reactHookForm.Controller,
     {
       name,
@@ -5451,7 +5464,7 @@ var InputDynamic = ({
         }
       )
     }
-  );
+  ) });
 };
 var InputDynamic_default = InputDynamic;
 
@@ -5463,7 +5476,7 @@ var DEFAULT_LABELS8 = {
     departureDateLabel: "Tanggal Berangkat",
     returnDateLabel: "Tanggal Pulang",
     serviceClassLabel: "Kelas Layanan",
-    typeOfServiceLabel: "Jenis Layanan",
+    typeOfServiceLabel: "Jenis Penumpang",
     passengerLabel: "Penumpang",
     roundTripLabel: "Pulang Pergi",
     searchButton: "Cari Tiket",
@@ -5472,7 +5485,7 @@ var DEFAULT_LABELS8 = {
     placeholderDepartureDate: "Pilih Tanggal Keberangkatan",
     placeholderReturnDate: "Pilih Tanggal Kepulangan",
     placeholderTypeClass: "Pilih Kelas Layanan",
-    placeholderTypeService: "Pilih Jenis Layanan",
+    placeholderTypeService: "Pilih Jenis Penumpang",
     placeholderPassenger: "Pilih Jumlah Penumpang",
     errorOriginRequired: "Pelabuhan asal wajib diisi",
     errorDestinationRequired: "Pelabuhan tujuan wajib diisi",
@@ -5491,7 +5504,7 @@ var DEFAULT_LABELS8 = {
     departureDateLabel: "Departure Date",
     returnDateLabel: "Return Date",
     serviceClassLabel: "Service Class",
-    typeOfServiceLabel: "Service Type",
+    typeOfServiceLabel: "Type Of Passenger",
     passengerLabel: "Passenger",
     roundTripLabel: "Round Trip",
     searchButton: "Search Ticket",
@@ -6168,7 +6181,7 @@ var DEFAULT_LABELS9 = {
     destinationHarbor: "Pelabuhan Tujuan",
     departureDate: "Tanggal Keberangkatan",
     serviceClass: "Kelas Layanan",
-    typeOfService: "Jenis Layanan",
+    typeOfService: "Jenis Penumpang",
     totalPassengers: "Jumlah Penumpang",
     changeSearchButton: "Ganti Pencarian",
     swapAriaLabel: "Tukar asal dan tujuan"
@@ -6178,7 +6191,7 @@ var DEFAULT_LABELS9 = {
     destinationHarbor: "Destination Port",
     departureDate: "Departure Date",
     serviceClass: "Service Class",
-    typeOfService: "Service Type",
+    typeOfService: "Type Of Passenger",
     totalPassengers: "Total Passengers",
     changeSearchButton: "Change Search",
     swapAriaLabel: "Swap origin and destination"
@@ -8294,20 +8307,20 @@ var ModalTotalPassengers = ({
 // src/components/ModalTypeOfService/ModalTypeOfService.constants.ts
 var DEFAULT_LABELS15 = {
   id: {
-    title: "Pilih Jenis Layanan",
+    title: "Pilih Jenis Penumpang",
     cancelButton: "Batal",
     saveButton: "Simpan",
     vehiclesAlt: "kendaraan",
     closeAriaLabel: "Tutup",
-    emptyContent: "Jenis Layanan"
+    emptyContent: "Jenis Penumpang"
   },
   en: {
-    title: "Select Service Type",
+    title: "Select Type Of Passenger",
     cancelButton: "Cancel",
     saveButton: "Save",
     vehiclesAlt: "vehicles",
     closeAriaLabel: "Close",
-    emptyContent: "Service Type"
+    emptyContent: "Type Of Passenger"
   }
 };
 var DEFAULT_VEHICLE_ICONS = {
@@ -8502,7 +8515,8 @@ var HoverableRadioItem = ({
   item,
   imageRenderer,
   styles,
-  isChild = false
+  isChild = false,
+  onClick
 }) => {
   const [isHovered, setIsHovered] = React.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8512,6 +8526,7 @@ var HoverableRadioItem = ({
       style: { padding: reactComponents.tokens.spacingHorizontalXS, cursor: "pointer" },
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
+      onClick,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: isChild ? void 0 : { marginLeft: 2 }, children: imageRenderer({
           src: item.image,
@@ -8732,7 +8747,8 @@ var ModalTypeOfService = ({
                             item: childItem,
                             imageRenderer,
                             styles,
-                            isChild: true
+                            isChild: true,
+                            onClick: () => setSelectedServiceId(childItem.id)
                           },
                           childIndex
                         )) })
@@ -8747,7 +8763,8 @@ var ModalTypeOfService = ({
                       item,
                       imageRenderer,
                       styles,
-                      isChild: false
+                      isChild: false,
+                      onClick: () => setSelectedServiceId(item.id)
                     },
                     index
                   );
@@ -8984,7 +9001,7 @@ var SortMenu = ({
 var DEFAULT_LABELS17 = {
   id: {
     title: "Filter dengan",
-    serviceTypeLabel: "Jenis Layanan",
+    serviceTypeLabel: "Jenis Penumpang",
     departureTimeLabel: "Waktu pergi",
     arrivalTimeLabel: "Waktu tiba",
     priceLabel: "Harga",