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

package/dist/index.mjs

@@ -10655,6 +10655,14 @@ var useStyles23 = makeStyles({
     gap: "1rem",
     justifyContent: "flex-end",
     marginTop: "1rem"
+  },
+  passengerItemDisabled: {
+    opacity: 0.5,
+    cursor: "not-allowed",
+    backgroundColor: tokens.colorNeutralBackgroundDisabled,
+    ":hover": {
+      backgroundColor: tokens.colorNeutralBackgroundDisabled
+    }
   }
 });
 var ModalListPassenger = ({
@@ -10682,11 +10690,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__ */ jsx(
     Dialog,
     {
@@ -10711,71 +10714,96 @@ var ModalListPassenger = ({
               contentBefore: /* @__PURE__ */ jsx(Icon, { icon: "fluent:search-24-regular" }),
               placeholder: mergedLabels.searchPlaceholder,
               value: searchQuery,
-              onChange: (_, data) => onSearchChange(data.value),
+              onChange: (_, data) => {
+                onSearchChange(data.value);
+              },
               size: "large"
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: styles.passengerList, children: filteredPassengers.filter(
-            (item) => item.ageId === passengerAgeId
-          ).map((passenger, index) => /* @__PURE__ */ 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__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsxs(Subtitle2, { children: [
-                    passenger.fullName,
-                    " ",
-                    passenger.isAccountOwner && /* @__PURE__ */ jsx(
-                      Caption2Strong,
-                      {
-                        style: {
-                          backgroundColor: "#F3F9FD",
-                          border: `1px solid #A9D3F2`,
-                          borderRadius: "1em",
-                          display: "inline-block",
-                          color: "#0078D4",
-                          padding: ".4em .9em"
-                        },
-                        children: "Pemilik Akun"
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx("br", {}),
-                  /* @__PURE__ */ jsxs(Body1, { children: [
-                    passenger.ageLabel,
-                    " \xB7 ",
-                    passenger.identityTypeCode,
-                    " ",
-                    passenger.identityId
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    appearance: "transparent",
-                    icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:chevron-right-24-regular" }),
-                    onClick: (e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      onEditPassenger(passenger);
-                    },
-                    "aria-label": mergedLabels.editPassengerAriaLabel
+          /* @__PURE__ */ 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;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: 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__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsxs(Subtitle2, { children: [
+                      passenger.fullName,
+                      " ",
+                      passenger.isAccountOwner && /* @__PURE__ */ jsx(
+                        Caption2Strong,
+                        {
+                          style: {
+                            backgroundColor: "#F3F9FD",
+                            border: `1px solid #A9D3F2`,
+                            borderRadius: "1em",
+                            display: "inline-block",
+                            color: "#0078D4",
+                            padding: ".4em .9em"
+                          },
+                          children: "Pemilik Akun"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx("br", {}),
+                    /* @__PURE__ */ jsxs(Body1, { children: [
+                      passenger.ageLabel,
+                      " \xB7 ",
+                      passenger.identityTypeCode,
+                      " ",
+                      passenger.identityId
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      appearance: "transparent",
+                      icon: /* @__PURE__ */ jsx(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__ */ jsxs("div", { className: styles.actions, children: [
             /* @__PURE__ */ jsx(
               Button,
@@ -11138,7 +11166,8 @@ var ModalPassengerForm = ({
   cityOptions,
   idTypes,
   ticketClassOptions,
-  onScanComplete
+  onScanComplete,
+  isLoading
 }) => {
   const styles = useStyles24();
   const mergedLabels = { ...DEFAULT_LABELS23[language], ...labels };
@@ -11155,7 +11184,7 @@ var ModalPassengerForm = ({
   const [capturedImage, setCapturedImage] = useState(null);
   const [stream, setStream] = useState(null);
   const videoRef = useRef(null);
-  const { control, handleSubmit, reset, watch, setValue, trigger } = useForm({
+  const { control, handleSubmit, reset, watch, setValue, trigger, formState: { isValid } } = useForm({
     mode: "all",
     defaultValues
   });
@@ -11884,6 +11913,8 @@ var ModalPassengerForm = ({
                     size: "large",
                     shape: "circular",
                     type: "submit",
+                    disabled: !isValid || isLoading,
+                    icon: isLoading ? /* @__PURE__ */ jsx(Spinner, { size: "tiny" }) : void 0,
                     children: mergedLabels.saveButton
                   }
                 ),