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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -8602,6 +8602,7 @@ var ModalTypeOfService = ({
8602
8602
  }
8603
8603
  return [];
8604
8604
  });
8605
+ const scrollContainerRef = React.useRef(null);
8605
8606
  const defaultRenderImage = ({
8606
8607
  src,
8607
8608
  alt,
@@ -8638,7 +8639,40 @@ var ModalTypeOfService = ({
8638
8639
  } else if (openItems.length > 0) {
8639
8640
  setOpenItems([]);
8640
8641
  }
8641
- }, [open, selectedService?.id]);
8642
+ }, [open, selectedService?.id, serviceTypes?.length]);
8643
+ const getTargetItemId = () => {
8644
+ if (selectedService) {
8645
+ for (const item of serviceTypes) {
8646
+ if (item.children && item.children.length > 0) {
8647
+ const hasSelectedChild = item.children.some(
8648
+ (child) => child.id === selectedService.id
8649
+ );
8650
+ if (hasSelectedChild) {
8651
+ return item.id;
8652
+ }
8653
+ }
8654
+ }
8655
+ }
8656
+ return openItems.length > 0 ? openItems[0] : null;
8657
+ };
8658
+ React.useEffect(() => {
8659
+ if (!open) return;
8660
+ const timer = setTimeout(() => {
8661
+ const targetId = getTargetItemId();
8662
+ const container = scrollContainerRef.current;
8663
+ if (targetId && container) {
8664
+ const targetEl = document.getElementById(`accordion-header-${targetId}`);
8665
+ if (targetEl) {
8666
+ const containerTop = container.getBoundingClientRect().top;
8667
+ const elTop = targetEl.getBoundingClientRect().top;
8668
+ container.scrollTop += elTop - containerTop;
8669
+ }
8670
+ } else if (container) {
8671
+ container.scrollTop = 0;
8672
+ }
8673
+ }, 150);
8674
+ return () => clearTimeout(timer);
8675
+ }, [open, selectedService?.id, serviceTypes]);
8642
8676
  const handleConfirm = () => {
8643
8677
  if (selectedServiceId) {
8644
8678
  let selectedItem = null;
@@ -8707,70 +8741,81 @@ var ModalTypeOfService = ({
8707
8741
  }
8708
8742
  ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
8709
8743
  /* @__PURE__ */ jsxRuntime.jsx(
8710
- reactComponents.Accordion,
8744
+ "div",
8711
8745
  {
8712
- collapsible: true,
8713
- openItems,
8714
- onToggle: (_, data) => setOpenItems(data.openItems),
8715
- className: styles.passengerSection,
8746
+ ref: scrollContainerRef,
8747
+ style: {
8748
+ maxHeight: "700px",
8749
+ overflowY: "auto"
8750
+ },
8716
8751
  children: /* @__PURE__ */ jsxRuntime.jsx(
8717
- reactComponents.RadioGroup,
8752
+ reactComponents.Accordion,
8718
8753
  {
8719
- value: String(selectedServiceId),
8720
- onChange: (_, data) => setSelectedServiceId(Number(data.value)),
8721
- children: serviceTypes.map((item, index) => {
8722
- if (item.children.length > 0) {
8723
- return /* @__PURE__ */ jsxRuntime.jsxs(
8724
- reactComponents.AccordionItem,
8725
- {
8726
- value: item?.id,
8727
- className: styles.accordionItem,
8728
- children: [
8729
- /* @__PURE__ */ jsxRuntime.jsx(
8730
- reactComponents.AccordionHeader,
8731
- {
8732
- className: styles.accordionHeader,
8733
- expandIconPosition: "end",
8734
- children: /* @__PURE__ */ jsxRuntime.jsx(
8735
- HoverableAccordionHeaderContent,
8754
+ collapsible: true,
8755
+ openItems,
8756
+ onToggle: (_, data) => setOpenItems(data.openItems),
8757
+ className: styles.passengerSection,
8758
+ children: /* @__PURE__ */ jsxRuntime.jsx(
8759
+ reactComponents.RadioGroup,
8760
+ {
8761
+ value: String(selectedServiceId),
8762
+ onChange: (_, data) => setSelectedServiceId(Number(data.value)),
8763
+ children: serviceTypes.map((item, index) => {
8764
+ if (item.children.length > 0) {
8765
+ return /* @__PURE__ */ jsxRuntime.jsxs(
8766
+ reactComponents.AccordionItem,
8767
+ {
8768
+ value: item?.id,
8769
+ className: styles.accordionItem,
8770
+ children: [
8771
+ /* @__PURE__ */ jsxRuntime.jsx(
8772
+ reactComponents.AccordionHeader,
8736
8773
  {
8737
- item,
8738
- imageRenderer,
8739
- styles
8774
+ id: `accordion-header-${item.id}`,
8775
+ className: styles.accordionHeader,
8776
+ expandIconPosition: "end",
8777
+ children: /* @__PURE__ */ jsxRuntime.jsx(
8778
+ HoverableAccordionHeaderContent,
8779
+ {
8780
+ item,
8781
+ imageRenderer,
8782
+ styles
8783
+ }
8784
+ )
8740
8785
  }
8741
- )
8742
- }
8743
- ),
8744
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { className: styles.accordionBody, children: item.children.length > 0 && item.children.map((childItem, childIndex) => /* @__PURE__ */ jsxRuntime.jsx(
8745
- HoverableRadioItem,
8746
- {
8747
- item: childItem,
8748
- imageRenderer,
8749
- styles,
8750
- isChild: true,
8751
- onClick: () => setSelectedServiceId(childItem.id)
8752
- },
8753
- childIndex
8754
- )) })
8755
- ]
8756
- },
8757
- index
8758
- );
8759
- } else if (item.children.length === 0) {
8760
- return /* @__PURE__ */ jsxRuntime.jsx(
8761
- HoverableRadioItem,
8762
- {
8763
- item,
8764
- imageRenderer,
8765
- styles,
8766
- isChild: false,
8767
- onClick: () => setSelectedServiceId(item.id)
8768
- },
8769
- index
8770
- );
8786
+ ),
8787
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { className: styles.accordionBody, children: item.children.length > 0 && item.children.map((childItem, childIndex) => /* @__PURE__ */ jsxRuntime.jsx(
8788
+ HoverableRadioItem,
8789
+ {
8790
+ item: childItem,
8791
+ imageRenderer,
8792
+ styles,
8793
+ isChild: true,
8794
+ onClick: () => setSelectedServiceId(childItem.id)
8795
+ },
8796
+ childIndex
8797
+ )) })
8798
+ ]
8799
+ },
8800
+ index
8801
+ );
8802
+ } else if (item.children.length === 0) {
8803
+ return /* @__PURE__ */ jsxRuntime.jsx(
8804
+ HoverableRadioItem,
8805
+ {
8806
+ item,
8807
+ imageRenderer,
8808
+ styles,
8809
+ isChild: false,
8810
+ onClick: () => setSelectedServiceId(item.id)
8811
+ },
8812
+ index
8813
+ );
8814
+ }
8815
+ return null;
8816
+ })
8771
8817
  }
8772
- return null;
8773
- })
8818
+ )
8774
8819
  }
8775
8820
  )
8776
8821
  }
@@ -15370,6 +15415,15 @@ var useStyles38 = reactComponents.makeStyles({
15370
15415
  backgroundColor: reactComponents.tokens.colorNeutralBackground1,
15371
15416
  boxShadow: reactComponents.tokens.shadow4,
15372
15417
  zIndex: 3
15418
+ },
15419
+ totalAmount: {
15420
+ backgroundColor: reactComponents.tokens.colorNeutralBackground3,
15421
+ borderRadius: reactComponents.tokens.borderRadius2XLarge,
15422
+ ...reactComponents.shorthands.padding(
15423
+ reactComponents.tokens.spacingHorizontalM,
15424
+ reactComponents.tokens.spacingHorizontalM
15425
+ ),
15426
+ color: reactComponents.tokens.colorNeutralForeground4
15373
15427
  }
15374
15428
  });
15375
15429
  var CardPaymentInfo = ({
@@ -15427,7 +15481,7 @@ var CardPaymentInfo = ({
15427
15481
  {
15428
15482
  size: "large",
15429
15483
  label: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { style: { color: reactComponents.tokens.colorNeutralForeground1 }, children: mergedLabels.totalPayment }),
15430
- children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Title2, { children: [
15484
+ children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body2, { className: styles.totalAmount, children: [
15431
15485
  mergedLabels.currencySymbol,
15432
15486
  " ",
15433
15487
  totalAmount.toLocaleString(