@travelswitchhq/flight-search-react 1.1.3 → 1.1.5

package/dist/index.cjs

@@ -303,9 +303,11 @@ padding-inline-start: 25px;
   visibility: visible; 
   opacity: 1; 
 }
+.sw-dropdown{
+  width: 380px;
+}
 .sw-dropdown,
 .p-autocomplete-panel {
-  width: 380px;
   max-height: 310px;
   margin: 0;
   padding: 0;
@@ -319,9 +321,16 @@ padding-inline-start: 25px;
 .sw-dropdown::-webkit-scrollbar {
   display: none;
 }
-.sw-dropdown-list-card,
-.sw-dropdown-list-box,
 .p-autocomplete-item {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding: 10px 20px;
+  cursor: pointer;
+  font-family: var(--sw-font-family);
+}
+.sw-dropdown-list-card,
+.sw-dropdown-list-box {
   display: flex;
   align-items: center;
   gap: 15px;
@@ -1495,7 +1504,9 @@ function FlightSearchWidget({
   const urls = API_URLS[env];
   const airportSearchApiBaseUrl = urls.airport;
   const airlineSearchApiBaseUrl = urls.airline;
-  const langCode = "en";
+  const countryCodeConfig = (config?.countryCode ?? "").trim();
+  const languageCodeConfig = (config?.languageCode ?? "").trim();
+  const langCode = languageCodeConfig || "en";
   const [airlineQuery, setAirlineQuery] = (0, import_react.useState)("");
   const [airlineSuggestions, setAirlineSuggestions] = (0, import_react.useState)([]);
   const [selectedAirlines, setSelectedAirlines] = (0, import_react.useState)([]);
@@ -1541,6 +1552,7 @@ function FlightSearchWidget({
   const [isDestinationDropdownOpen, setIsDestinationDropdownOpen] = (0, import_react.useState)(false);
   const [isRoomsGuestsMenuOpen, setIsRoomsGuestsMenuOpen] = (0, import_react.useState)(false);
   const originDropdownRef = (0, import_react.useRef)(null);
+  const firstOriginDesktopInputRef = (0, import_react.useRef)(null);
   const destinationDropdownRef = (0, import_react.useRef)(null);
   const roomsGuestsMenuRef = (0, import_react.useRef)(null);
   const dateRangeCalendarRef = (0, import_react.useRef)(null);
@@ -1771,10 +1783,27 @@ function FlightSearchWidget({
     ensureStylesInjected();
     ensurePrimeIconsLoaded();
   }, []);
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const focusFirstOrigin = () => {
+      const desktop = firstOriginDesktopInputRef.current;
+      desktop?.focus({ preventScroll: true });
+    };
+    let innerRaf = 0;
+    const outerRaf = window.requestAnimationFrame(() => {
+      innerRaf = window.requestAnimationFrame(focusFirstOrigin);
+    });
+    return () => {
+      window.cancelAnimationFrame(outerRaf);
+      if (innerRaf) window.cancelAnimationFrame(innerRaf);
+    };
+  }, []);
   (0, import_react.useEffect)(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
-      const isInsidePrimeDropdown = target.closest(".p-dropdown-panel") !== null || target.closest(".p-dropdown-items-wrapper") !== null || target.closest(".p-dropdown-item") !== null || target.closest(".p-component")?.classList.contains("p-dropdown") !== false || target.closest('[data-pc-section="panel"]') !== null || target.closest('[data-pc-name="dropdown"]') !== null;
+      const isInsidePrimeDropdown = Boolean(
+        target.closest(".p-dropdown-panel") || target.closest(".p-dropdown-items-wrapper") || target.closest(".p-dropdown-item") || target.closest('[data-pc-section="panel"]') || target.closest('[data-pc-name="dropdown"]')
+      );
       if (originDropdownRef.current && !originDropdownRef.current.contains(target)) {
         setIsOriginDropdownOpen(false);
       }
@@ -2124,7 +2153,8 @@ function FlightSearchWidget({
     console.log("Query String:", queryString);
     const base = getNormalizedRedirectionBase();
     if (base) {
-      const url = `${base}/flight/listing?${queryString}`;
+      const listingPath = countryCodeConfig.length > 0 ? `/${countryCodeConfig.toUpperCase()}-${languageCodeConfig ? languageCodeConfig.toUpperCase() : "EN"}/flight/listing` : "/flight/listing";
+      const url = `${base}${listingPath}?${queryString}`;
       window.location.href = url;
     }
   };
@@ -2156,6 +2186,7 @@ function FlightSearchWidget({
     const label = isOrigin ? "From" : "To";
     const list = isOrigin ? getPredictiveState(segmentIndex).fromAirport : getPredictiveState(segmentIndex).toAirport;
     const selectedIndex = isOrigin ? getPredictiveState(segmentIndex).selectedFromIndex : getPredictiveState(segmentIndex).selectedToIndex;
+    const isFirstOrigin = segmentIndex === 0 && isOrigin;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `sw-form-field sw-pos-rel${isOrigin ? " br-left" : ""} ${validationErrors[segmentIndex]?.[dropdownType] ? "sw-is-invalid" : ""}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: `${dropdownType}-${segmentIndex}`, children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `sw-custom-dropdown ${validationErrors[segmentIndex]?.[dropdownType] ? "sw-has-error" : ""}`, ref: dropdownRef, children: [
@@ -2186,6 +2217,7 @@ function FlightSearchWidget({
           {
             type: "text",
             id: `${dropdownType}-${segmentIndex}`,
+            ref: isFirstOrigin ? firstOriginDesktopInputRef : void 0,
             className: `sw-custom-dropdown-trigger MobileHide ${value === placeholder || !value ? "sw-placeholder" : ""}`,
             value: value === placeholder ? "" : value ?? "",
             placeholder,
@@ -2760,6 +2792,7 @@ function FlightSearchWidget({
               preferredAirlineList: next.map((item) => item.airline_code)
             }));
           },
+          appendTo: "self",
           field: "airline_name",
           multiple: true,
           forceSelection: true,