fix propTypes

Author: hjvuor

digitransit-component/packages/digitransit-component-autosuggest/src/components/Input.js

@@ -74,19 +74,20 @@ Input.propTypes = {
   getLabelProps: PropTypes.func.isRequired,
   clearInput: PropTypes.func.isRequired,
   ariaLabel: PropTypes.string.isRequired,
-  inputRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({ current: PropTypes.instanceOf(HTMLInputElement) }),
-  ]).isRequired,
+  inputRef: PropTypes.shape({
+    current: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  }).isRequired,
   styles: PropTypes.objectOf(PropTypes.string).isRequired,
-  renderLabel: PropTypes.bool.isRequired,
+  renderLabel: PropTypes.bool,
   isMobile: PropTypes.bool.isRequired,
   inputClassName: PropTypes.string.isRequired,
-  transportMode: PropTypes.string.isRequired,
+  transportMode: PropTypes.string,
   clearButtonColor: PropTypes.string.isRequired,
   autoFocus: PropTypes.bool,
 };
 
 Input.defaultProps = {
   autoFocus: false,
+  renderLabel: false,
+  transportMode: undefined,
 };

digitransit-component/packages/digitransit-component-autosuggest/src/components/MobileView.js

@@ -46,6 +46,7 @@ const MobileView = ({
   inputValue,
   setInputValue,
   inputClassName,
+  required,
 }) => {
   const [t] = useTranslation();
   const { lock, unlock } = hooks.useScrollLock();
@@ -158,6 +159,8 @@ const MobileView = ({
               clearButtonColor={clearButtonColor}
               autoFocus
               inputClassName={inputClassName}
+              required={required}
+              isMobile
             />
             <Suggestions
               suggestions={suggestions}
@@ -166,6 +169,7 @@ const MobileView = ({
               itemProps={itemProps}
               highlightedIndex={highlightedIndex}
               isOpen // when mobile view is open we always want to show suggestions
+              hidden={false}
               lng={lng}
               styles={styles}
               renderClearHistoryButton
@@ -199,19 +203,17 @@ MobileView.propTypes = {
   lng: PropTypes.string.isRequired,
   color: PropTypes.string,
   clearInput: PropTypes.func.isRequired,
-  isOpen: PropTypes.bool.isRequired,
   accessiblePrimaryColor: PropTypes.string.isRequired,
   hoverColor: PropTypes.string,
   fontWeights: PropTypes.shape({
-    normal: PropTypes.string,
-    medium: PropTypes.string,
-    bold: PropTypes.string,
+    normal: PropTypes.number,
+    medium: PropTypes.number,
+    bold: PropTypes.number,
   }).isRequired,
   appElement: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
   mobileLabel: PropTypes.string,
   clearOldSearches: PropTypes.func.isRequired,
-  highlightedIndex: PropTypes.number.isRequired,
   itemProps: PropTypes.shape({}).isRequired,
   suggestions: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   closeHandle: PropTypes.func.isRequired,
@@ -229,6 +231,7 @@ MobileView.propTypes = {
   setInputValue: PropTypes.func.isRequired,
   renderMobile: PropTypes.bool.isRequired,
   inputClassName: PropTypes.string.isRequired,
+  required: PropTypes.bool.isRequired,
 };
 
 MobileView.defaultProps = {

digitransit-component/packages/digitransit-component-autosuggest/src/components/Suggestions.js

@@ -106,7 +106,7 @@ export function Suggestions({
           return (
             <Suggestion
               key={`${suggestion.type}-${
-                suggestion.properties.id || suggestion.properties.labelId
+                suggestion.properties.id || suggestion.properties.name
               }`}
               highlightedIndex={highlightedIndex}
               itemIndex={i}

digitransit-component/packages/digitransit-component-autosuggest/src/index.js

@@ -246,7 +246,6 @@ function DTAutosuggest({
   required,
   color,
   hoverColor,
-  inputId,
   ariaLabel,
   accessiblePrimaryColor,
   fontWeights,
@@ -258,19 +257,19 @@ function DTAutosuggest({
   ...props
 }) {
   const [t] = useTranslation();
+  const [shouldRenderMobile, setShouldRenderMobile] = useState(false);
+
   const [suggestions, setSuggestions] = useState([]);
   const [valid] = useState(true);
   const [isLoading, setLoading] = useState(false);
-  const [shouldRenderMobile, setShouldRenderMobile] = useState(false);
-
   const [sources, setSources] = useState(props.sources);
   const [ownPlaces, setOwnPlaces] = useState(false);
   const [pendingSelection, setPendingSelection] = useState(null);
 
   const enterPressedRef = useRef(null);
 
   // create and store input ref in the parent if storeRef is provided
-  const inputRef = React.useRef(inputId);
+  const inputRef = React.useRef(id);
   useEffect(() => {
     if (storeRef) {
       storeRef(inputRef.current);
@@ -309,7 +308,7 @@ function DTAutosuggest({
     selectItem,
     openMenu,
   } = useCombobox({
-    inputId,
+    inputId: id,
     defaultHighlightedIndex: 0,
     stateReducer: useCallback(
       (state, { type, changes }) => {
@@ -347,6 +346,8 @@ function DTAutosuggest({
             };
           }
           case useCombobox.stateChangeTypes.InputBlur: {
+            setPendingSelection(null);
+            setOwnPlaces(false);
             if (changes.selectedItem !== undefined) {
               const { selectedItem, ...changesWitoutSelection } = changes;
               return changesWitoutSelection;
@@ -581,6 +582,7 @@ function DTAutosuggest({
           clearButtonColor={color}
           accessiblePrimaryColor={accessiblePrimaryColor}
           inputClassName={inputClassName}
+          required={required}
         />
       )}
 
@@ -632,6 +634,8 @@ function DTAutosuggest({
           clearButtonColor={color}
           placeholder={translatedPlaceholder || t(placeholder, { lng })}
           required={required}
+          transportMode={transportMode}
+          isMobile={isMobile}
         />
 
         <Suggestions
@@ -699,14 +703,7 @@ DTAutosuggest.propTypes = {
   modeSet: PropTypes.string,
   // showScroll: PropTypes.bool,
   // isEmbedded: PropTypes.bool,
-  inputId: PropTypes.string.isRequired,
   showScroll: PropTypes.bool,
-  ariaProps: PropTypes.shape({
-    ariaCurrentSuggestion: PropTypes.string,
-    ariaRequiredText: PropTypes.string,
-    SearchBarId: PropTypes.string,
-    ariaLabelText: PropTypes.string,
-  }).isRequired,
 };
 
 DTAutosuggest.defaultProps = {
@@ -728,7 +725,6 @@ DTAutosuggest.defaultProps = {
   color: '#007ac9',
   hoverColor: '#0062a1',
   accessiblePrimaryColor: '#0074be',
-  // timeZone: 'Europe/Helsinki',
   pathOpts: {
     routesPrefix: 'linjat',
     stopsPrefix: 'pysakit',