@asdp/ferryui 0.1.22-dev.9152 → 0.1.22-dev.9165

package/dist/index.mjs

@@ -1306,7 +1306,8 @@ var CardTicket = ({
   buttonText,
   onPriceDetailClick,
   onPolicyClick,
-  onSelectTicket
+  onSelectTicket,
+  isLoading = false
 }) => {
   const styles = useStyles5();
   const { width } = useWindowSize();
@@ -1329,7 +1330,23 @@ var CardTicket = ({
         xxxl: 3,
         style: { padding: 0, margin: 0 },
         children: /* @__PURE__ */ jsxs(Card, { className: styles.ticketLeftCard, children: [
-          /* @__PURE__ */ jsxs(Row, { style: { height: "100%" }, children: [
+          isLoading ? /* @__PURE__ */ jsx(Row, { style: { height: "100%", width: "100%" }, children: /* @__PURE__ */ jsx(
+            Col,
+            {
+              xs: 12,
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "1rem"
+              },
+              children: /* @__PURE__ */ jsxs(Skeleton, { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "60px", height: "60px", borderRadius: "50%" } }),
+                /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "100px", height: "20px", marginTop: "1rem" } })
+              ] })
+            }
+          ) }) : /* @__PURE__ */ jsxs(Row, { style: { height: "100%" }, children: [
             /* @__PURE__ */ jsx(
               Col,
               {
@@ -1475,7 +1492,29 @@ var CardTicket = ({
         xxl: 4.5,
         xxxl: 4.5,
         style: { padding: 0, margin: 0 },
-        children: /* @__PURE__ */ jsxs(Card, { className: styles.ticketMiddleCard, children: [
+        children: /* @__PURE__ */ jsx(Card, { className: styles.ticketMiddleCard, children: isLoading ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ jsx(Visible, { lg: true, xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "28px", borderRadius: "4px" } }) }) }),
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: styles.ticketInfo, children: [
+            /* @__PURE__ */ jsx("div", { className: styles.ticketTime, children: /* @__PURE__ */ jsxs(Skeleton, { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+              /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "60px", height: "14px" } }),
+              /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "28px" } }),
+              /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "120px", height: "14px" } })
+            ] }) }),
+            /* @__PURE__ */ jsxs("div", { className: styles.ticketDuration, children: [
+              /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "16px", marginBottom: "8px" } }) }),
+              /* @__PURE__ */ jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "120px", height: "2px" } }) }) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: styles.ticketTime, style: { alignItems: "flex-end" }, children: /* @__PURE__ */ jsxs(Skeleton, { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "8px" }, children: [
+              /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "60px", height: "14px" } }),
+              /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "28px" } }),
+              /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "120px", height: "14px" } })
+            ] }) })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: styles.ticketButtons, children: /* @__PURE__ */ jsxs(Skeleton, { style: { display: "flex", gap: "1rem", width: "100%" }, children: [
+            /* @__PURE__ */ jsx(SkeletonItem, { style: { flex: 1, height: "32px", borderRadius: "16px" } }),
+            /* @__PURE__ */ jsx(SkeletonItem, { style: { flex: 1, height: "32px", borderRadius: "16px" } })
+          ] }) })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Visible, { lg: true, xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsxs(
             Badge,
             {
@@ -1553,7 +1592,7 @@ var CardTicket = ({
               }
             )
           ] })
-        ] })
+        ] }) })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -1568,54 +1607,68 @@ var CardTicket = ({
         xxxl: 4.5,
         style: { padding: 0, margin: 0 },
         children: /* @__PURE__ */ jsxs(Card, { className: styles.ticketRightCard, children: [
-          /* @__PURE__ */ jsxs("div", { className: styles.priceCard, children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "0.25rem"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(Subtitle2, { children: mergedLabels.totalPriceLabel }),
-                  /* @__PURE__ */ jsxs(
-                    Title3,
-                    {
-                      style: {
-                        display: "flex",
-                        flex: "column",
-                        justifyContent: "end"
-                      },
-                      children: [
-                        mergedLabels.currencySymbol,
-                        "\xA0",
-                        departureItem?.billingDetail?.total?.formatted
-                      ]
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                onClick: onSelectTicket,
-                appearance: "primary",
-                style: { backgroundColor: brandColors2["60"] },
-                size: "medium",
-                shape: "circular",
-                icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:ticket-diagonal-24-filled" }),
-                children: buttonText || mergedLabels.selectTicketButton
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: styles.facilitiesSection, children: [
-            /* @__PURE__ */ jsx(Subtitle2, { children: mergedLabels.facilitiesLabel }),
-            /* @__PURE__ */ jsx("div", { className: styles.facilitiesList, children: departureItem?.provider?.facilities.map((facility, idx) => /* @__PURE__ */ jsxs("div", { className: styles.facilityItem, children: [
-              /* @__PURE__ */ jsx(Icon, { icon: "fluent:checkmark-circle-24-filled" }),
-              /* @__PURE__ */ jsx(Caption1Strong, { children: facility })
-            ] }, idx)) })
+          isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.priceCard, children: [
+              /* @__PURE__ */ jsxs(Skeleton, { style: { display: "flex", flexDirection: "column", gap: "8px", flex: 1 }, children: [
+                /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "20px" } }),
+                /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "140px", height: "32px", borderRadius: "16px" } })
+              ] }),
+              /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "120px", height: "40px", borderRadius: "20px" } }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: styles.facilitiesSection, children: [
+              /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "20px", marginBottom: "8px" } }) }),
+              /* @__PURE__ */ jsx("div", { className: styles.facilitiesList, children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "100px", height: "20px" } }) }, i)) })
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.priceCard, children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "0.25rem"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Subtitle2, { children: mergedLabels.totalPriceLabel }),
+                    /* @__PURE__ */ jsxs(
+                      Title3,
+                      {
+                        style: {
+                          display: "flex",
+                          flex: "column",
+                          justifyContent: "end"
+                        },
+                        children: [
+                          mergedLabels.currencySymbol,
+                          "\xA0",
+                          departureItem?.billingDetail?.total?.formatted
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  onClick: onSelectTicket,
+                  appearance: "primary",
+                  style: { backgroundColor: brandColors2["60"] },
+                  size: "medium",
+                  shape: "circular",
+                  icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:ticket-diagonal-24-filled" }),
+                  children: buttonText || mergedLabels.selectTicketButton
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: styles.facilitiesSection, children: [
+              /* @__PURE__ */ jsx(Subtitle2, { children: mergedLabels.facilitiesLabel }),
+              /* @__PURE__ */ jsx("div", { className: styles.facilitiesList, children: departureItem?.provider?.facilities.map((facility, idx) => /* @__PURE__ */ jsxs("div", { className: styles.facilityItem, children: [
+                /* @__PURE__ */ jsx(Icon, { icon: "fluent:checkmark-circle-24-filled" }),
+                /* @__PURE__ */ jsx(Caption1Strong, { children: facility })
+              ] }, idx)) })
+            ] })
           ] }),
           /* @__PURE__ */ jsx(Visible, { xl: true, xxl: true, xxxl: true, children: Array.from({ length: circularVerticalConfig.count }).map(
             (_, index) => /* @__PURE__ */ jsx(
@@ -2025,6 +2078,13 @@ var useStyles6 = makeStyles({
       display: "none"
     }
   },
+  skeletonOverride: {
+    cursor: "default",
+    backgroundColor: "transparent",
+    "&:hover": {
+      backgroundColor: "transparent"
+    }
+  },
   // Dividers
   dividerVertical: {
     // Only visible on tablet (horizontal layout)
@@ -2049,7 +2109,9 @@ var CardServiceMenu = ({
   showDescriptions = true,
   className,
   labels,
-  menuItems = ALIAS_MENU_ITEMS
+  menuItems = ALIAS_MENU_ITEMS,
+  isLoading = false,
+  skeletonCount = 4
 }) => {
   const styles = useStyles6();
   ({ ...DEFAULT_LABELS6[language], ...labels });
@@ -2057,7 +2119,19 @@ var CardServiceMenu = ({
     const isActive = activeServiceId === serviceId;
     return mergeClasses(styles.menuItem, isActive && styles.menuItemActive);
   };
-  return /* @__PURE__ */ jsx(Card, { className: mergeClasses(styles.card, className), children: /* @__PURE__ */ jsx("div", { className: styles.menuList, children: menuItems.map((item, index) => {
+  return /* @__PURE__ */ jsx(Card, { className: mergeClasses(styles.card, className), children: /* @__PURE__ */ jsx("div", { className: styles.menuList, children: isLoading ? Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: mergeClasses(styles.menuItem, styles.skeletonOverride), children: [
+      /* @__PURE__ */ jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { className: styles.logo, style: { borderRadius: "50%" } }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: styles.textContent, children: [
+        /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "60%", height: "16px" } }) }),
+        showDescriptions && /* @__PURE__ */ jsx(Skeleton, { className: styles.description, children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "90%", height: "12px", marginTop: "4px" } }) })
+      ] })
+    ] }),
+    index < skeletonCount - 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Divider, { className: styles.dividerHorizontal }),
+      /* @__PURE__ */ jsx(Divider, { vertical: true, className: styles.dividerVertical })
+    ] })
+  ] }, `skeleton-${index}`)) : menuItems.map((item, index) => {
     return /* @__PURE__ */ jsxs(React.Fragment, { children: [
       /* @__PURE__ */ jsxs(
         Button,
@@ -3529,7 +3603,13 @@ var InputDynamic = ({
             className: mergeClasses(
               styles.inputWithAutocomplete,
               classNameSize
-            )
+            ),
+            style: inputStyle,
+            input: {
+              style: {
+                textOverflow: "ellipsis"
+              }
+            }
           }
         );
     }
@@ -3873,7 +3953,8 @@ var CardTicketSearch = ({
   showPassengerField = false,
   showRoundTrip = true,
   onServiceClick,
-  menuItems
+  menuItems,
+  isLoadingServiceMenu
 }) => {
   const styles = useStyles8();
   const labels = React.useMemo(
@@ -3968,7 +4049,8 @@ var CardTicketSearch = ({
                   activeServiceId,
                   language,
                   onServiceClick,
-                  menuItems
+                  menuItems,
+                  isLoading: isLoadingServiceMenu
                 }
               )
             }
@@ -4285,6 +4367,7 @@ var CardTicketSearch = ({
                               {
                                 name: "typeOfService",
                                 label: labels.typeOfServiceLabel,
+                                style: { textOverflow: "ellipsis" },
                                 control,
                                 type: "text",
                                 contentBefore: /* @__PURE__ */ jsx(
@@ -5063,7 +5146,13 @@ var ModalSearchHarbor = ({
               /* @__PURE__ */ jsx(Divider, {})
             ] }),
             /* @__PURE__ */ jsx(Body1Strong, { className: styles.sectionTitle, children: mergedLabels.allHarborsHeader }),
-            /* @__PURE__ */ jsx("div", { className: styles.harborList, children: isLoading ? /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: mergedLabels.loadingData }) : harbors.length > 0 ? harbors.map((harbor, index) => /* @__PURE__ */ jsxs("div", { className: styles.harborItem, children: [
+            /* @__PURE__ */ jsx("div", { className: styles.harborList, children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: [1, 2, 3, 4, 5].map((item) => /* @__PURE__ */ jsxs("div", { className: styles.harborItem, children: [
+              /* @__PURE__ */ jsxs(Skeleton, { style: { display: "flex", alignItems: "center", gap: "0.5rem", width: "70%" }, children: [
+                /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "24px", height: "24px", borderRadius: "4px" } }),
+                /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "100%", height: "20px", borderRadius: "4px" } })
+              ] }),
+              showButtonFavorite && /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "24px", height: "24px", borderRadius: "4px" } }) })
+            ] }, item)) }) : harbors.length > 0 ? harbors.map((harbor, index) => /* @__PURE__ */ jsxs("div", { className: styles.harborItem, children: [
               /* @__PURE__ */ jsxs(
                 "div",
                 {
@@ -6620,7 +6709,8 @@ var useStyles16 = makeStyles({
     paddingRight: tokens.spacingHorizontalSNudge,
     paddingBottom: tokens.spacingHorizontalXL,
     maxHeight: "70vh",
-    overflowY: "auto"
+    overflowY: "auto",
+    overflowX: "hidden"
   },
   closeButton: {
     minWidth: "32px",
@@ -7119,7 +7209,8 @@ var DateFilter = ({
   showCalendarButton = true,
   scrollAmount = DEFAULT_SCROLL_AMOUNT,
   language = "id",
-  labels
+  labels,
+  isLoading = false
 }) => {
   const styles = useStyles17();
   const scrollRef = useRef(null);
@@ -7144,7 +7235,10 @@ var DateFilter = ({
         "aria-label": mergedLabels.prevButtonAriaLabel
       }
     ) }) }),
-    /* @__PURE__ */ jsx("div", { ref: scrollRef, className: styles.scrollContainer, children: dates.map((date, index) => /* @__PURE__ */ jsx("div", { className: styles.item, children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { ref: scrollRef, className: styles.scrollContainer, children: isLoading ? Array.from({ length: 7 }).map((_, index) => /* @__PURE__ */ jsx("div", { className: styles.item, children: /* @__PURE__ */ jsx("div", { className: styles.compoundButton, style: { borderRadius: tokens.borderRadiusMedium, border: `1px solid ${tokens.colorNeutralStroke1}` }, children: /* @__PURE__ */ jsxs(Skeleton, { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px", padding: "8px" }, children: [
+      /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80%", height: "14px" } }),
+      /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "60%", height: "14px" } })
+    ] }) }) }, index)) : dates.map((date, index) => /* @__PURE__ */ jsx("div", { className: styles.item, children: /* @__PURE__ */ jsxs(
       Button,
       {
         appearance: "outline",