@qite/tide-booking-component 1.2.4 → 1.2.5

package/src/booking-wizard/features/travelers-form/type-ahead-input.tsx

@@ -1,101 +1,101 @@
-import Icon from "../../components/icon";
-import React, { useState } from "react";
-
-interface TypeAheadInputProps {
-  name?: string;
-  value?: string;
-  placeholder?: string;
-  options?: { key: string; value: string | number; text: string }[];
-  onChange?: (value: string) => void;
-  onSelect?: (key: string) => void;
-  onClear?: () => void;
-}
-
-const TypeAheadInput: React.FC<TypeAheadInputProps> = ({
-  name,
-  value,
-  placeholder,
-  options,
-  onChange,
-  onSelect,
-  onClear,
-}) => {
-  const [showItems, setShowItems] = useState<boolean>(false);
-
-  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-    if (onChange) {
-      onChange(e.target.value);
-    }
-  };
-
-  const handleClearClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
-    if (onClear) {
-      onClear();
-    }
-    setShowItems(false);
-  };
-
-  return (
-    <div className="typeahead">
-      <div className="typeahead__trigger typeahead__trigger--icon">
-        <Icon name="qsm-location" />
-        <input
-          type="text"
-          className="form__input"
-          name={name}
-          value={value}
-          onChange={handleChange}
-          placeholder={placeholder}
-          required
-          autoComplete="off"
-          onKeyDown={(e) => {
-            if (e.key === "Tab" && options && onSelect) {
-              onSelect(options[0].key);
-              setShowItems(false);
-            }
-          }}
-          onFocus={() => setShowItems(true)}
-        />
-        <button
-          type="button"
-          className="button button--clear"
-          onClick={handleClearClick}
-        ></button>
-      </div>
-      {options && options.length > 0 && showItems && (
-        <div className="typeahead__options">
-          {(options ?? []).map((option) => {
-            const matchIndex =
-              typeof value !== "undefined" ? option.text.indexOf(value) : 0;
-            const prefix = option.text.slice(0, matchIndex);
-            const highlight = option.text.slice(matchIndex, value?.length ?? 0);
-            const suffix = option.text.slice(matchIndex);
-
-            return (
-              <div className="typeahead__option" key={option.key}>
-                <div className="typeahead__option-header">
-                  <button
-                    onClick={() => {
-                      if (onSelect) onSelect(option.key);
-                      setShowItems(false);
-                    }}
-                    type="button"
-                    className="button button--plain"
-                  >
-                    {prefix}
-                    <span className="typeahead__option-highlight">
-                      {highlight}
-                    </span>
-                    {suffix}
-                  </button>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default TypeAheadInput;
+import Icon from "../../components/icon";
+import React, { useState } from "react";
+
+interface TypeAheadInputProps {
+  name?: string;
+  value?: string;
+  placeholder?: string;
+  options?: { key: string; value: string | number; text: string }[];
+  onChange?: (value: string) => void;
+  onSelect?: (key: string) => void;
+  onClear?: () => void;
+}
+
+const TypeAheadInput: React.FC<TypeAheadInputProps> = ({
+  name,
+  value,
+  placeholder,
+  options,
+  onChange,
+  onSelect,
+  onClear,
+}) => {
+  const [showItems, setShowItems] = useState<boolean>(false);
+
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    if (onChange) {
+      onChange(e.target.value);
+    }
+  };
+
+  const handleClearClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    if (onClear) {
+      onClear();
+    }
+    setShowItems(false);
+  };
+
+  return (
+    <div className="typeahead">
+      <div className="typeahead__trigger typeahead__trigger--icon">
+        <Icon name="ui-qsm-location" />
+        <input
+          type="text"
+          className="form__input"
+          name={name}
+          value={value}
+          onChange={handleChange}
+          placeholder={placeholder}
+          required
+          autoComplete="off"
+          onKeyDown={(e) => {
+            if (e.key === "Tab" && options && onSelect) {
+              onSelect(options[0].key);
+              setShowItems(false);
+            }
+          }}
+          onFocus={() => setShowItems(true)}
+        />
+        <button
+          type="button"
+          className="button button--clear"
+          onClick={handleClearClick}
+        ></button>
+      </div>
+      {options && options.length > 0 && showItems && (
+        <div className="typeahead__options">
+          {(options ?? []).map((option) => {
+            const matchIndex =
+              typeof value !== "undefined" ? option.text.indexOf(value) : 0;
+            const prefix = option.text.slice(0, matchIndex);
+            const highlight = option.text.slice(matchIndex, value?.length ?? 0);
+            const suffix = option.text.slice(matchIndex);
+
+            return (
+              <div className="typeahead__option" key={option.key}>
+                <div className="typeahead__option-header">
+                  <button
+                    onClick={() => {
+                      if (onSelect) onSelect(option.key);
+                      setShowItems(false);
+                    }}
+                    type="button"
+                    className="button button--plain"
+                  >
+                    {prefix}
+                    <span className="typeahead__option-highlight">
+                      {highlight}
+                    </span>
+                    {suffix}
+                  </button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TypeAheadInput;