@asdp/ferryui 0.1.22-dev.9803 → 0.1.22-dev.9813

package/dist/index.mjs

@@ -8593,6 +8593,7 @@ var ModalTypeOfService = ({
     }
     return [];
   });
+  const scrollContainerRef = useRef(null);
   const defaultRenderImage = ({
     src,
     alt,
@@ -8629,7 +8630,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;
+  };
+  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;
@@ -8698,70 +8732,81 @@ var ModalTypeOfService = ({
       }
     ) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        Accordion,
+        "div",
         {
-          collapsible: true,
-          openItems,
-          onToggle: (_, data) => setOpenItems(data.openItems),
-          className: styles.passengerSection,
+          ref: scrollContainerRef,
+          style: {
+            maxHeight: "700px",
+            overflowY: "auto"
+          },
           children: /* @__PURE__ */ jsx(
-            RadioGroup,
+            Accordion,
             {
-              value: String(selectedServiceId),
-              onChange: (_, data) => setSelectedServiceId(Number(data.value)),
-              children: serviceTypes.map((item, index) => {
-                if (item.children.length > 0) {
-                  return /* @__PURE__ */ jsxs(
-                    AccordionItem,
-                    {
-                      value: item?.id,
-                      className: styles.accordionItem,
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          AccordionHeader,
-                          {
-                            className: styles.accordionHeader,
-                            expandIconPosition: "end",
-                            children: /* @__PURE__ */ jsx(
-                              HoverableAccordionHeaderContent,
+              collapsible: true,
+              openItems,
+              onToggle: (_, data) => setOpenItems(data.openItems),
+              className: styles.passengerSection,
+              children: /* @__PURE__ */ jsx(
+                RadioGroup,
+                {
+                  value: String(selectedServiceId),
+                  onChange: (_, data) => setSelectedServiceId(Number(data.value)),
+                  children: serviceTypes.map((item, index) => {
+                    if (item.children.length > 0) {
+                      return /* @__PURE__ */ jsxs(
+                        AccordionItem,
+                        {
+                          value: item?.id,
+                          className: styles.accordionItem,
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              AccordionHeader,
                               {
-                                item,
-                                imageRenderer,
-                                styles
+                                id: `accordion-header-${item.id}`,
+                                className: styles.accordionHeader,
+                                expandIconPosition: "end",
+                                children: /* @__PURE__ */ jsx(
+                                  HoverableAccordionHeaderContent,
+                                  {
+                                    item,
+                                    imageRenderer,
+                                    styles
+                                  }
+                                )
                               }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(AccordionPanel, { className: styles.accordionBody, children: item.children.length > 0 && item.children.map((childItem, childIndex) => /* @__PURE__ */ jsx(
-                          HoverableRadioItem,
-                          {
-                            item: childItem,
-                            imageRenderer,
-                            styles,
-                            isChild: true,
-                            onClick: () => setSelectedServiceId(childItem.id)
-                          },
-                          childIndex
-                        )) })
-                      ]
-                    },
-                    index
-                  );
-                } else if (item.children.length === 0) {
-                  return /* @__PURE__ */ jsx(
-                    HoverableRadioItem,
-                    {
-                      item,
-                      imageRenderer,
-                      styles,
-                      isChild: false,
-                      onClick: () => setSelectedServiceId(item.id)
-                    },
-                    index
-                  );
+                            ),
+                            /* @__PURE__ */ jsx(AccordionPanel, { className: styles.accordionBody, children: item.children.length > 0 && item.children.map((childItem, childIndex) => /* @__PURE__ */ jsx(
+                              HoverableRadioItem,
+                              {
+                                item: childItem,
+                                imageRenderer,
+                                styles,
+                                isChild: true,
+                                onClick: () => setSelectedServiceId(childItem.id)
+                              },
+                              childIndex
+                            )) })
+                          ]
+                        },
+                        index
+                      );
+                    } else if (item.children.length === 0) {
+                      return /* @__PURE__ */ jsx(
+                        HoverableRadioItem,
+                        {
+                          item,
+                          imageRenderer,
+                          styles,
+                          isChild: false,
+                          onClick: () => setSelectedServiceId(item.id)
+                        },
+                        index
+                      );
+                    }
+                    return null;
+                  })
                 }
-                return null;
-              })
+              )
             }
           )
         }
@@ -15361,6 +15406,15 @@ var useStyles38 = makeStyles({
     backgroundColor: tokens.colorNeutralBackground1,
     boxShadow: tokens.shadow4,
     zIndex: 3
+  },
+  totalAmount: {
+    backgroundColor: tokens.colorNeutralBackground3,
+    borderRadius: tokens.borderRadius2XLarge,
+    ...shorthands.padding(
+      tokens.spacingHorizontalM,
+      tokens.spacingHorizontalM
+    ),
+    color: tokens.colorNeutralForeground4
   }
 });
 var CardPaymentInfo = ({
@@ -15418,7 +15472,7 @@ var CardPaymentInfo = ({
         {
           size: "large",
           label: /* @__PURE__ */ jsx(Subtitle2, { style: { color: tokens.colorNeutralForeground1 }, children: mergedLabels.totalPayment }),
-          children: /* @__PURE__ */ jsxs(Title2, { children: [
+          children: /* @__PURE__ */ jsxs(Body2, { className: styles.totalAmount, children: [
             mergedLabels.currencySymbol,
             " ",
             totalAmount.toLocaleString(