@asdp/ferryui 0.1.22-dev.9812 → 0.1.22-dev.9823

package/dist/index.js

@@ -8602,6 +8602,7 @@ var ModalTypeOfService = ({
     }
     return [];
   });
+  const scrollContainerRef = React.useRef(null);
   const defaultRenderImage = ({
     src,
     alt,
@@ -8638,7 +8639,40 @@ var ModalTypeOfService = ({
     } else if (openItems.length > 0) {
       setOpenItems([]);
     }
-  }, [open, selectedService?.id]);
+  }, [open, selectedService?.id, serviceTypes?.length]);
+  const getTargetItemId = () => {
+    if (selectedService) {
+      for (const item of serviceTypes) {
+        if (item.children && item.children.length > 0) {
+          const hasSelectedChild = item.children.some(
+            (child) => child.id === selectedService.id
+          );
+          if (hasSelectedChild) {
+            return item.id;
+          }
+        }
+      }
+    }
+    return openItems.length > 0 ? openItems[0] : null;
+  };
+  React.useEffect(() => {
+    if (!open) return;
+    const timer = setTimeout(() => {
+      const targetId = getTargetItemId();
+      const container = scrollContainerRef.current;
+      if (targetId && container) {
+        const targetEl = document.getElementById(`accordion-header-${targetId}`);
+        if (targetEl) {
+          const containerTop = container.getBoundingClientRect().top;
+          const elTop = targetEl.getBoundingClientRect().top;
+          container.scrollTop += elTop - containerTop;
+        }
+      } else if (container) {
+        container.scrollTop = 0;
+      }
+    }, 150);
+    return () => clearTimeout(timer);
+  }, [open, selectedService?.id, serviceTypes]);
   const handleConfirm = () => {
     if (selectedServiceId) {
       let selectedItem = null;
@@ -8707,70 +8741,81 @@ var ModalTypeOfService = ({
       }
     ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        reactComponents.Accordion,
+        "div",
         {
-          collapsible: true,
-          openItems,
-          onToggle: (_, data) => setOpenItems(data.openItems),
-          className: styles.passengerSection,
+          ref: scrollContainerRef,
+          style: {
+            maxHeight: "700px",
+            overflowY: "auto"
+          },
           children: /* @__PURE__ */ jsxRuntime.jsx(
-            reactComponents.RadioGroup,
+            reactComponents.Accordion,
             {
-              value: String(selectedServiceId),
-              onChange: (_, data) => setSelectedServiceId(Number(data.value)),
-              children: serviceTypes.map((item, index) => {
-                if (item.children.length > 0) {
-                  return /* @__PURE__ */ jsxRuntime.jsxs(
-                    reactComponents.AccordionItem,
-                    {
-                      value: item?.id,
-                      className: styles.accordionItem,
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          reactComponents.AccordionHeader,
-                          {
-                            className: styles.accordionHeader,
-                            expandIconPosition: "end",
-                            children: /* @__PURE__ */ jsxRuntime.jsx(
-                              HoverableAccordionHeaderContent,
+              collapsible: true,
+              openItems,
+              onToggle: (_, data) => setOpenItems(data.openItems),
+              className: styles.passengerSection,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                reactComponents.RadioGroup,
+                {
+                  value: String(selectedServiceId),
+                  onChange: (_, data) => setSelectedServiceId(Number(data.value)),
+                  children: serviceTypes.map((item, index) => {
+                    if (item.children.length > 0) {
+                      return /* @__PURE__ */ jsxRuntime.jsxs(
+                        reactComponents.AccordionItem,
+                        {
+                          value: item?.id,
+                          className: styles.accordionItem,
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              reactComponents.AccordionHeader,
                               {
-                                item,
-                                imageRenderer,
-                                styles
+                                id: `accordion-header-${item.id}`,
+                                className: styles.accordionHeader,
+                                expandIconPosition: "end",
+                                children: /* @__PURE__ */ jsxRuntime.jsx(
+                                  HoverableAccordionHeaderContent,
+                                  {
+                                    item,
+                                    imageRenderer,
+                                    styles
+                                  }
+                                )
                               }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { className: styles.accordionBody, children: item.children.length > 0 && item.children.map((childItem, childIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-                          HoverableRadioItem,
-                          {
-                            item: childItem,
-                            imageRenderer,
-                            styles,
-                            isChild: true,
-                            onClick: () => setSelectedServiceId(childItem.id)
-                          },
-                          childIndex
-                        )) })
-                      ]
-                    },
-                    index
-                  );
-                } else if (item.children.length === 0) {
-                  return /* @__PURE__ */ jsxRuntime.jsx(
-                    HoverableRadioItem,
-                    {
-                      item,
-                      imageRenderer,
-                      styles,
-                      isChild: false,
-                      onClick: () => setSelectedServiceId(item.id)
-                    },
-                    index
-                  );
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { className: styles.accordionBody, children: item.children.length > 0 && item.children.map((childItem, childIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+                              HoverableRadioItem,
+                              {
+                                item: childItem,
+                                imageRenderer,
+                                styles,
+                                isChild: true,
+                                onClick: () => setSelectedServiceId(childItem.id)
+                              },
+                              childIndex
+                            )) })
+                          ]
+                        },
+                        index
+                      );
+                    } else if (item.children.length === 0) {
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        HoverableRadioItem,
+                        {
+                          item,
+                          imageRenderer,
+                          styles,
+                          isChild: false,
+                          onClick: () => setSelectedServiceId(item.id)
+                        },
+                        index
+                      );
+                    }
+                    return null;
+                  })
                 }
-                return null;
-              })
+              )
             }
           )
         }
@@ -10619,6 +10664,14 @@ var useStyles23 = reactComponents.makeStyles({
     gap: "1rem",
     justifyContent: "flex-end",
     marginTop: "1rem"
+  },
+  passengerItemDisabled: {
+    opacity: 0.5,
+    cursor: "not-allowed",
+    backgroundColor: reactComponents.tokens.colorNeutralBackgroundDisabled,
+    ":hover": {
+      backgroundColor: reactComponents.tokens.colorNeutralBackgroundDisabled
+    }
   }
 });
 var ModalListPassenger = ({
@@ -10646,11 +10699,6 @@ var ModalListPassenger = ({
     onSelectPassenger(passenger);
     handleClose();
   };
-  const filteredPassengers = passengers.filter((passenger) => {
-    if (!searchQuery) return true;
-    const query = searchQuery.toLowerCase();
-    return passenger.fullName && passenger.fullName.toLowerCase().includes(query) || passenger.ageLabel && passenger.ageLabel.toLowerCase().includes(query);
-  });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactComponents.Dialog,
     {
@@ -10675,71 +10723,103 @@ var ModalListPassenger = ({
               contentBefore: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:search-24-regular" }),
               placeholder: mergedLabels.searchPlaceholder,
               value: searchQuery,
-              onChange: (_, data) => onSearchChange(data.value),
+              onChange: (_, data) => {
+                console.log(155, data);
+                onSearchChange(data.value);
+              },
               size: "large"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.passengerList, children: filteredPassengers.filter(
-            (item) => item.ageId === passengerAgeId
-          ).map((passenger, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: styles.passengerItem,
-              onClick: () => handleSelectPassenger(passenger),
-              role: "button",
-              tabIndex: 0,
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  handleSelectPassenger(passenger);
-                }
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Subtitle2, { children: [
-                    passenger.fullName,
-                    " ",
-                    passenger.isAccountOwner && /* @__PURE__ */ jsxRuntime.jsx(
-                      reactComponents.Caption2Strong,
-                      {
-                        style: {
-                          backgroundColor: "#F3F9FD",
-                          border: `1px solid #A9D3F2`,
-                          borderRadius: "1em",
-                          display: "inline-block",
-                          color: "#0078D4",
-                          padding: ".4em .9em"
-                        },
-                        children: "Pemilik Akun"
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-                  /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { children: [
-                    passenger.ageLabel,
-                    " \xB7 ",
-                    passenger.identityTypeCode,
-                    " ",
-                    passenger.identityId
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  reactComponents.Button,
-                  {
-                    appearance: "transparent",
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:chevron-right-24-regular" }),
-                    onClick: (e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      onEditPassenger(passenger);
-                    },
-                    "aria-label": mergedLabels.editPassengerAriaLabel
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.passengerList, children: [...passengers].sort((a, b) => {
+            const isDifferentAgeA = a.ageId !== passengerAgeId;
+            const isExcludedFromSearchA = searchQuery ? !a.fullName.toLowerCase().includes(searchQuery.toLowerCase()) : false;
+            const isDisabledA = isDifferentAgeA || isExcludedFromSearchA;
+            const isDifferentAgeB = b.ageId !== passengerAgeId;
+            const isExcludedFromSearchB = searchQuery ? !b.fullName.toLowerCase().includes(searchQuery.toLowerCase()) : false;
+            const isDisabledB = isDifferentAgeB || isExcludedFromSearchB;
+            if (isDisabledA === isDisabledB) return 0;
+            return isDisabledA ? 1 : -1;
+          }).map((passenger, index) => {
+            const isDifferentAge = passenger.ageId !== passengerAgeId;
+            const isExcludedFromSearch = searchQuery ? !passenger.fullName.toLowerCase().includes(searchQuery.toLowerCase()) : false;
+            const isDisabled = isDifferentAge || isExcludedFromSearch;
+            console.log(
+              170,
+              isDisabled,
+              isDifferentAge,
+              isExcludedFromSearch
+            );
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: reactComponents.mergeClasses(
+                  styles.passengerItem,
+                  isDisabled && styles.passengerItemDisabled
+                ),
+                onClick: () => {
+                  if (!isDisabled) {
+                    handleSelectPassenger(passenger);
                   }
-                )
-              ]
-            },
-            passenger.id || `passenger-${index}`
-          )) }),
+                },
+                role: "button",
+                tabIndex: isDisabled ? -1 : 0,
+                onKeyDown: (e) => {
+                  if (isDisabled) return;
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    handleSelectPassenger(passenger);
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Subtitle2, { children: [
+                      passenger.fullName,
+                      " ",
+                      passenger.isAccountOwner && /* @__PURE__ */ jsxRuntime.jsx(
+                        reactComponents.Caption2Strong,
+                        {
+                          style: {
+                            backgroundColor: "#F3F9FD",
+                            border: `1px solid #A9D3F2`,
+                            borderRadius: "1em",
+                            display: "inline-block",
+                            color: "#0078D4",
+                            padding: ".4em .9em"
+                          },
+                          children: "Pemilik Akun"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+                    /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { children: [
+                      passenger.ageLabel,
+                      " \xB7 ",
+                      passenger.identityTypeCode,
+                      " ",
+                      passenger.identityId
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactComponents.Button,
+                    {
+                      appearance: "transparent",
+                      icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:chevron-right-24-regular" }),
+                      disabled: isDisabled,
+                      onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (!isDisabled) {
+                          onEditPassenger(passenger);
+                        }
+                      },
+                      "aria-label": mergedLabels.editPassengerAriaLabel
+                    }
+                  )
+                ]
+              },
+              passenger.id || `passenger-${index}`
+            );
+          }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.actions, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               reactComponents.Button,