Implement Radix UI Popover in Text Input

lib/.storybook/components/ExampleContainer.tsx

@@ -13,7 +13,7 @@ const ExampleContainer = ({ children, pseudoState, expanded = false }: Props): J
   </DivContainer>
 );
 
-const DivContainer = styled.div`
+const DivContainer = styled.div<{ expanded: boolean }>`
   margin: 15px;
   ${(props) => props.expanded && "height: 100vh;"}
 `;

lib/package.json

@@ -24,7 +24,7 @@
     "@material-ui/lab": "4.0.0-alpha.17",
     "@material-ui/pickers": "3.2.2",
     "@material-ui/styles": "4.0.2",
-    "@radix-ui/react-popover": "^0.1.6",
+    "@radix-ui/react-popover": "0.1.6",
     "@types/styled-components": "^5.1.24",
     "@types/uuid": "^8.3.4",
     "color": "^3.1.3",

lib/src/select/Listbox.tsx

@@ -118,7 +118,6 @@ const Listbox = ({
         ref={listboxRef}
         role="listbox"
         aria-multiselectable={multiple}
-        aria-orientation="vertical"
         style={styles}
       >
         {searchable && (options.length === 0 || !groupsHaveOptions(options)) ? (

lib/src/text-input/Icons.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+const icons = {
+  error: (
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
+    </svg>
+  ),
+  clear: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+    </svg>
+  ),
+  increment: (
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+    </svg>
+  ),
+  decrement: (
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M19 13H5v-2h14v2z" />
+    </svg>
+  ),
+};
+
+export default icons;

lib/src/text-input/Suggestion.tsx

@@ -18,36 +18,37 @@ const Suggestion = ({
   return (
     <SuggestionContainer
       id={id}
-      onClick={onClick}
+      onClick={() => {
+        onClick(suggestion);
+      }}
       visuallyFocused={visuallyFocused}
       role="option"
-      aria-selected={visuallyFocused ? "true" : undefined}
+      aria-selected={visuallyFocused ? true : undefined}
     >
       <StyledSuggestion last={isLast} visuallyFocused={visuallyFocused}>
         {highlighted ? (
-          suggestion
-        ) : (
           <>
             <strong>{matchedWords}</strong>
             {noMatchedWords}
           </>
+        ) : (
+          suggestion
         )}
       </StyledSuggestion>
     </SuggestionContainer>
   );
 };
 
-type SuggestionContainerProps = {
+const SuggestionContainer = styled.li<{
   visuallyFocused: boolean;
-};
-const SuggestionContainer = styled.li<SuggestionContainerProps>`
+}>`
   display: flex;
   padding: 0 0.5rem;
   line-height: 1.715em;
   cursor: pointer;
-
   box-shadow: inset 0 0 0 2px
     ${(props) => (props.visuallyFocused ? props.theme.focusListOptionBorderColor : "transparent")};
+
   &:hover {
     background-color: ${(props) => props.theme.hoverListOptionBackgroundColor};
   }
@@ -56,11 +57,10 @@ const SuggestionContainer = styled.li<SuggestionContainerProps>`
   }
 `;
 
-type StyledSuggestionProps = {
+const StyledSuggestion = styled.span<{
   visuallyFocused: boolean;
   last: boolean;
-};
-const StyledSuggestion = styled.span<StyledSuggestionProps>`
+}>`
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;

lib/src/text-input/Suggestions.tsx

@@ -0,0 +1,136 @@
+import React, { useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import styled from "styled-components";
+import useTranslatedLabels from "../useTranslatedLabels";
+import BackgroundColorContext from "../BackgroundColorContext";
+import Suggestion from "./Suggestion";
+import { SuggestionsProps } from "./types";
+import icons from "./Icons";
+
+const Suggestions = ({
+  id,
+  value,
+  suggestions,
+  visualFocusIndex,
+  highlightedSuggestions,
+  searchHasErrors,
+  isSearching,
+  suggestionOnClick,
+  getTextInputWidth,
+}: SuggestionsProps): JSX.Element => {
+  const translatedLabels = useTranslatedLabels();
+  const backgroundType = useContext(BackgroundColorContext);
+  const listboxRef = useRef(null);
+  const [styles, setStyles] = useState(null);
+
+  useLayoutEffect(() => {
+    const visualFocusedOptionEl = listboxRef?.current?.querySelectorAll("[role='option']")[visualFocusIndex];
+    visualFocusedOptionEl?.scrollIntoView?.({ block: "nearest", inline: "start" });
+  }, [visualFocusIndex]);
+
+  const handleResize = () => {
+    setStyles({ width: getTextInputWidth() });
+  };
+
+  useLayoutEffect(() => {
+    handleResize();
+  }, [getTextInputWidth]);
+
+  useEffect(() => {
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [getTextInputWidth]);
+
+  return (
+    <SuggestionsContainer
+      id={id}
+      error={searchHasErrors ? true : false}
+      onMouseDown={(event) => {
+        event.preventDefault();
+      }}
+      ref={listboxRef}
+      role="listbox"
+      backgroundType={backgroundType}
+      style={styles}
+    >
+      {!isSearching &&
+        !searchHasErrors &&
+        suggestions.length > 0 &&
+        suggestions.map((suggestion, index) => (
+          <Suggestion
+            key={`suggestion-${index}`}
+            id={`suggestion-${index}`}
+            value={value}
+            onClick={suggestionOnClick}
+            suggestion={suggestion}
+            isLast={index === suggestions.length - 1}
+            visuallyFocused={visualFocusIndex === index}
+            highlighted={highlightedSuggestions}
+          />
+        ))}
+      {isSearching && (
+        <SuggestionsSystemMessage>{translatedLabels.textInput.searchingMessage}</SuggestionsSystemMessage>
+      )}
+      {searchHasErrors && (
+        <SuggestionsError>
+          <SuggestionsErrorIcon backgroundType={backgroundType}>{icons.error}</SuggestionsErrorIcon>
+          {translatedLabels.textInput.fetchingDataErrorMessage}
+        </SuggestionsError>
+      )}
+    </SuggestionsContainer>
+  );
+};
+
+const SuggestionsContainer = styled.ul<{ backgroundType: "dark" | "light"; error: boolean }>`
+  box-sizing: border-box;
+  max-height: 304px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0.25rem 0;
+  background-color: ${(props) =>
+    props.error ? props.theme.errorListDialogBackgroundColor : props.theme.listDialogBackgroundColor};
+  border: 1px solid
+    ${(props) =>
+      props.error
+        ? props.backgroundType === "dark"
+          ? props.theme.errorBorderColorOnDark
+          : props.theme.errorListDialogBorderColor
+        : props.theme.listDialogBorderColor};
+
+  border-radius: 0.25rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  color: ${(props) => props.theme.listOptionFontColor};
+  font-family: ${(props) => props.theme.fontFamily};
+  font-size: ${(props) => props.theme.listOptionFontSize};
+  font-style: ${(props) => props.theme.listOptionFontStyle};
+  font-weight: ${(props) => props.theme.listOptionFontWeight};
+`;
+
+const SuggestionsSystemMessage = styled.span`
+  display: flex;
+  padding: 0.25rem 1rem;
+  color: ${(props) => props.theme.systemMessageFontColor};
+  line-height: 1.715em;
+`;
+
+const SuggestionsErrorIcon = styled.span<{ backgroundType: "dark" | "light" }>`
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+  margin-right: 0.5rem;
+  height: 18px;
+  width: 18px;
+  color: ${(props) =>
+    props.backgroundType === "dark" ? props.theme.errorIconColorOnDark : props.theme.errorIconColor};
+`;
+
+const SuggestionsError = styled.span`
+  display: flex;
+  padding: 0.25rem 1rem;
+  align-items: center;
+  line-height: 1.715em;
+  color: ${(props) => props.theme.errorListDialogFontColor};
+`;
+
+export default React.memo(Suggestions);