@travelswitchhq/flight-search-react 1.1.1 → 1.1.3

package/dist/index.mjs

@@ -95,6 +95,9 @@ var flightSearchWidgetStyles = `
 .sw-container h5 {
   font-size: 14px;
 }
+.sw-container .font14 {
+  font-size: 14px;
+}
 .sw-container h6,
 .sw-container small {
   font-size: 12px;
@@ -842,6 +845,7 @@ padding-inline-start: 25px;
   flex: 1 1 50%; 
   min-width: 0; 
   justify-content: center;
+  border: 1px solid transparent;
 }
 .sw-add-return-label label {
   color: var(--primary) !important;
@@ -1127,17 +1131,17 @@ padding-inline-start: 25px;
   flex: 0 1 auto; 
   min-width: fit-content; 
 }
-  .MobileShow{
+  .sw-container .MobileShow{
     display: none;
 }
-.MobileHide{
+.sw-container .MobileHide{
     display: block;
 }
 @media screen and (max-width: 768px) {
-    .MobileShow{
+    .sw-container .MobileShow{
         display: block;
     }
-    .MobileHide{
+    .sw-container .MobileHide{
         display: none;
     }
     .sw-container{
@@ -1319,6 +1323,9 @@ padding-inline-start: 25px;
     .sw-fsrh-chk-main{
         flex-wrap: wrap;
     }
+    .mobiBox{
+        flex-direction: row;
+    }
 }
 `;
 
@@ -2126,12 +2133,34 @@ function FlightSearchWidget({
     return /* @__PURE__ */ jsxs("div", { className: `sw-form-field sw-pos-rel${isOrigin ? " br-left" : ""} ${validationErrors[segmentIndex]?.[dropdownType] ? "sw-is-invalid" : ""}`, children: [
       /* @__PURE__ */ jsx("label", { htmlFor: `${dropdownType}-${segmentIndex}`, children: label }),
       /* @__PURE__ */ jsxs("div", { className: `sw-custom-dropdown ${validationErrors[segmentIndex]?.[dropdownType] ? "sw-has-error" : ""}`, ref: dropdownRef, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            readOnly: true,
+            id: `${dropdownType}-${segmentIndex}`,
+            className: `sw-custom-dropdown-trigger MobileShow ${value === placeholder || !value ? "sw-placeholder" : ""}`,
+            value: value === placeholder ? "" : value ?? "",
+            placeholder,
+            onFocus: (e) => {
+              onOpen();
+              e.currentTarget.select();
+            },
+            onClick: (e) => e.currentTarget.select(),
+            onChange: (e) => {
+              const val = e.target.value;
+              handleSegmentFieldChange(segmentIndex, dropdownType, val);
+              triggerSearchAirport(segmentIndex, dropdownType, val);
+            },
+            onKeyDown: (e) => handleKeyDown(e, dropdownType, segmentIndex)
+          }
+        ),
         /* @__PURE__ */ jsx(
           "input",
           {
             type: "text",
             id: `${dropdownType}-${segmentIndex}`,
-            className: `sw-custom-dropdown-trigger ${value === placeholder || !value ? "sw-placeholder" : ""}`,
+            className: `sw-custom-dropdown-trigger MobileHide ${value === placeholder || !value ? "sw-placeholder" : ""}`,
             value: value === placeholder ? "" : value ?? "",
             placeholder,
             onFocus: (e) => {
@@ -2209,7 +2238,7 @@ function FlightSearchWidget({
         renderAirportDropdown(index, "destination", destinationDropdownRef || destinationRef, isDestOpen, () => toggleSegmentDropdown(index, "destination"))
       ] }, index),
       isMultiCityOrCustom && /* @__PURE__ */ jsxs("div", { className: "sw-srh-wrap sw-pos-rel", children: [
-        /* @__PURE__ */ jsxs("div", { className: "sw-form-field sw-com-cal", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sw-form-field sw-com-cal ", children: [
           /* @__PURE__ */ jsx("label", { htmlFor: `departure-${index}`, children: "Departure" }),
           /* @__PURE__ */ jsx(
             Calendar,
@@ -2328,7 +2357,7 @@ function FlightSearchWidget({
         ),
         renderAirportDropdown(0, "destination", destinationDropdownRef, isDestinationDropdownOpen, () => setIsDestinationDropdownOpen(true))
       ] }),
-      (tripType === "round-trip" || tripType === "one-way") && /* @__PURE__ */ jsx("div", { className: "sw-srh-wrap sw-pos-rel ", children: tripType === "round-trip" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      (tripType === "round-trip" || tripType === "one-way") && /* @__PURE__ */ jsx("div", { className: "sw-srh-wrap sw-pos-rel mobiBox", children: tripType === "round-trip" ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { style: { cursor: "pointer" }, onClick: () => {
           dateRangeCalendarRef.current?.show?.();
           mobileDateRangeCalendarRef.current?.show?.();
@@ -2513,7 +2542,7 @@ function FlightSearchWidget({
         /* @__PURE__ */ jsx("div", { className: "sw-form-field sw-pos-rel sw-com-cal sw-add-return-label", style: { cursor: "pointer" }, onClick: () => {
           setTripType("round-trip");
           setTimeout(() => document.getElementById("dateRange")?.querySelector("input")?.focus?.(), 100);
-        }, children: /* @__PURE__ */ jsx("label", { children: "Add return" }) })
+        }, children: /* @__PURE__ */ jsx("label", { className: "font14", children: "Add return" }) })
       ] }) }),
       (tripType === "multi-city" || tripType === "custom-search") && /* @__PURE__ */ jsx("div", { className: "sw-srh-mc-foot", children: segments.length < getMaxSegments() && /* @__PURE__ */ jsxs("button", { type: "button", className: "sw-srh-add-btn", onClick: addFlightSegment, children: [
         /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", children: [