@okta/odyssey-react-mui 1.12.4 → 1.12.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.12.4",
+  "version": "1.12.6",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -51,7 +51,7 @@
     "@mui/system": "^5.14.9",
     "@mui/utils": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "1.12.4",
+    "@okta/odyssey-design-tokens": "1.12.6",
     "date-fns": "^2.30.0",
     "i18next": "^23.5.1",
     "material-react-table": "^2.0.2",
@@ -63,5 +63,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "b5b53ea203c3017a6fd6dc6642a1dfc9a19df7fd"
+  "gitHead": "00daa33877428125405ce716101dd4c089081922"
 }

package/src/Select.tsx

@@ -212,18 +212,23 @@ const Select = <
   // data types that might be passed
   const normalizedOptions = useMemo(
     () =>
-      options.map((option) =>
-        typeof option === "object"
-          ? {
-              text: option.text,
-              value:
-                option?.value === ""
-                  ? option.value
-                  : option.value || option.text,
-              type: option.type === "heading" ? "heading" : "option",
-            }
-          : { text: option, value: option, type: "option" }
-      ),
+      options.map((option) => {
+        if (typeof option === "object") {
+          /**
+           * If the value of `option?.value is an empty string, we need to make sure that we
+           * set an empty string to `value` in the normalized option so that the select component
+           * can potentially set it as the selected one in the text input
+           */
+          const value =
+            option?.value === "" ? option.value : option.value || option.text;
+          return {
+            text: option.text,
+            value,
+            type: option.type === "heading" ? "heading" : "option",
+          };
+        }
+        return { text: option, value: option, type: "option" };
+      }),
     [options]
   );
 

package/src/TextField.tsx

@@ -191,7 +191,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             "aria-errormessage": errorMessageElementId,
             "aria-labelledby": labelElementId,
             "data-se": testId,
-            inputmode: inputMode,
+            inputMode,
           }}
           inputRef={localInputRef}
           multiline={isMultiline}

package/src/labs/DataFilters.tsx

@@ -20,6 +20,7 @@ import {
   useRef,
   useState,
 } from "react";
+import styled from "@emotion/styled";
 import { Autocomplete } from "../Autocomplete";
 import { Box } from "../Box";
 import { TagList } from "../TagList";
@@ -175,22 +176,60 @@ const DataFilters = ({
     }
   }, [onChangeSearch, searchValue, searchDelayTime, hasSearchSubmitButton]);
 
-  const handleInputChange = useCallback(
-    (filterId: string, value: DataFilterValue, submit: boolean = false) => {
+  const autocompleteOptions = useMemo(() => {
+    // Check if filterPopoverCurrentFilter and filterPopoverCurrentFilter.options are defined
+    if (
+      filterPopoverCurrentFilter?.variant === "autocomplete" &&
+      filterPopoverCurrentFilter?.options
+    ) {
+      return filterPopoverCurrentFilter.options.map((option) => ({
+        label: option.label,
+      }));
+    }
+
+    // if filterPopoverCurrentFilter or filterPopoverCurrentFilter.options is undefined
+    return [];
+  }, [filterPopoverCurrentFilter]);
+
+  const updateInputValue = useCallback(
+    ({ filterId, value }: { filterId: string; value: DataFilterValue }) => {
       setInputValues({ ...inputValues, [filterId]: value });
+    },
+    [inputValues]
+  );
 
-      if (submit) {
-        const updatedFilters = filtersProp.map((filter) => ({
-          ...filter,
-          value: filter.id === filterId ? value : inputValues[filter.id],
-        }));
+  const updateFilters = useCallback(
+    ({ filterId, value }: { filterId: string; value: DataFilterValue }) => {
+      const updatedFilters = filtersProp.map((filter) => ({
+        ...filter,
+        value: filter.id === filterId ? value : inputValues[filter.id],
+      }));
 
-        setFilters(updatedFilters);
-      }
+      setFilters(updatedFilters);
     },
     [inputValues, filtersProp]
   );
 
+  const getAutoCompleteLabel = <
+    Value extends { label: string } | Array<{ label: string }>
+  >(
+    value: Value
+  ) => {
+    if (Array.isArray(value)) {
+      // Iterating to find the label
+      return value
+        .map((valueElement) => {
+          if (typeof valueElement === "string") {
+            return undefined;
+          }
+          return valueElement.label;
+        })
+        .filter((item): item is string => Boolean(item));
+    }
+
+    return value?.label;
+  };
+
   const handleMultiSelectChange = useCallback(
     (filterId: string, value: string, submit: boolean = false) => {
       const startingValues = filtersProp
@@ -245,6 +284,15 @@ const DataFilters = ({
     setFilters(updatedFilters);
   }, [inputValues, filtersProp]);
 
+  const AutocompleteOuterContainer = styled.div`
+    display: flex;
+    gap: 2;
+    align-items: center;
+    alignitems: "flex-end";
+  `;
+  const AutocompleteInnerContainer = styled.div`
+    width: "100%";
+  `;
   const filterMenu = useMemo(
     () => (
       <>
@@ -367,23 +415,43 @@ const DataFilters = ({
                     {/* Autocomplete */}
                     {filterPopoverCurrentFilter?.variant === "autocomplete" &&
                       filterPopoverCurrentFilter?.options && (
-                        <Autocomplete
-                          label={filterPopoverCurrentFilter.label}
-                          value={
-                            (inputValues[
-                              filterPopoverCurrentFilter.id
-                            ] as string) ?? ""
-                          }
-                          onBlur={function ro() {}}
-                          onChange={function ro() {}}
-                          onFocus={function ro() {}}
-                          onInputChange={function ro() {}}
-                          options={filterPopoverCurrentFilter.options.map(
-                            (option: { label: string }) => ({
-                              label: option.label,
-                            })
-                          )}
-                        />
+                        <AutocompleteOuterContainer>
+                          <AutocompleteInnerContainer>
+                            <Autocomplete
+                              label={filterPopoverCurrentFilter.label}
+                              value={
+                                inputValues[filterPopoverCurrentFilter.id] ?? ""
+                              }
+                              onChange={(_, value) => {
+                                const label =
+                                  typeof value === "string"
+                                    ? getAutoCompleteLabel({ label: value })
+                                    : Array.isArray(value)
+                                    ? getAutoCompleteLabel(
+                                        value.map((item) =>
+                                          typeof item === "string"
+                                            ? { label: item }
+                                            : item
+                                        )
+                                      )
+                                    : value
+                                    ? getAutoCompleteLabel(value)
+                                    : "";
+
+                                updateInputValue({
+                                  filterId: filterPopoverCurrentFilter.id,
+                                  value: label,
+                                });
+                              }}
+                              options={autocompleteOptions}
+                            />
+                          </AutocompleteInnerContainer>
+                          <Button
+                            variant="primary"
+                            endIcon={<CheckIcon />}
+                            type="submit"
+                          />
+                        </AutocompleteOuterContainer>
                       )}
                     {/* Text or Number */}
                     {(filterPopoverCurrentFilter?.variant === "text" ||
@@ -410,10 +478,10 @@ const DataFilters = ({
                               ] as string) ?? ""
                             }
                             onChange={(ev) =>
-                              handleInputChange(
-                                filterPopoverCurrentFilter.id,
-                                ev.currentTarget.value
-                              )
+                              updateInputValue({
+                                filterId: filterPopoverCurrentFilter.id,
+                                value: ev.currentTarget.value,
+                              })
                             }
                             endAdornment={
                               inputValues[filterPopoverCurrentFilter.id] && (
@@ -421,11 +489,15 @@ const DataFilters = ({
                                   size="small"
                                   aria-label="Clear filter"
                                   onClick={() => {
-                                    handleInputChange(
-                                      filterPopoverCurrentFilter.id,
-                                      undefined,
-                                      true
-                                    );
+                                    updateInputValue({
+                                      filterId: filterPopoverCurrentFilter.id,
+                                      value: undefined,
+                                    });
+
+                                    updateFilters({
+                                      filterId: filterPopoverCurrentFilter.id,
+                                      value: undefined,
+                                    });
                                   }}
                                 >
                                   <CloseCircleFilledIcon />
@@ -480,13 +552,17 @@ const DataFilters = ({
                       filterPopoverCurrentFilter?.options && (
                         <RadioGroup
                           label={filterPopoverCurrentFilter.label}
-                          onChange={(_, value) =>
-                            handleInputChange(
-                              filterPopoverCurrentFilter.id,
+                          onChange={(_, value) => {
+                            updateInputValue({
+                              filterId: filterPopoverCurrentFilter.id,
                               value,
-                              true
-                            )
-                          }
+                            });
+
+                            updateFilters({
+                              filterId: filterPopoverCurrentFilter.id,
+                              value,
+                            });
+                          }}
                         >
                           <Radio
                             label="Any"
@@ -561,7 +637,7 @@ const DataFilters = ({
               <Button
                 variant="secondary"
                 label="Clear filters"
-                onClick={() => clearAllFilters()}
+                onClick={clearAllFilters}
               />
             </Box>
           )}
@@ -585,7 +661,17 @@ const DataFilters = ({
               <Tag
                 key={filter.label}
                 label={`${filter.label}: ${filter.value}`}
-                onRemove={() => handleInputChange(filter.id, undefined, true)}
+                onRemove={() => {
+                  updateInputValue({
+                    filterId: filter.id,
+                    value: undefined,
+                  });
+
+                  updateFilters({
+                    filterId: filter.id,
+                    value: undefined,
+                  });
+                }}
               />
             ))}
           </TagList>