@okta/odyssey-react-mui 1.6.18 → 1.6.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.6.18",
+  "version": "1.6.19",
   "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.6.18",
+    "@okta/odyssey-design-tokens": "1.6.19",
     "date-fns": "^2.30.0",
     "i18next": "^23.5.1",
     "material-react-table": "^1.14.0",
@@ -63,5 +63,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "cfe632641bc22d95e55d7043c5d134347117eb74"
+  "gitHead": "8a5e1cf86a04424f2cba1d27ae94e41ed95e7968"
 }

package/src/Autocomplete.tsx

@@ -14,18 +14,31 @@ import {
   Autocomplete as MuiAutocomplete,
   AutocompleteProps as MuiAutocompleteProps,
   InputBase,
+  UseAutocompleteProps,
+  AutocompleteValue,
 } from "@mui/material";
-import { memo, useCallback } from "react";
+import { memo, useCallback, useMemo } from "react";
 
 import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
+import { useControlledState } from "./useControlledState";
 
 export type AutocompleteProps<
   OptionType,
   HasMultipleChoices extends boolean | undefined,
   IsCustomValueAllowed extends boolean | undefined
 > = {
+  /**
+   * The default value. Use when the component is not controlled.
+   * @default props.multiple ? [] : null
+   */
+  defaultValue?: UseAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["defaultValue"];
   /**
    * Enables multiple choice selection
    */
@@ -35,6 +48,15 @@ export type AutocompleteProps<
     undefined,
     IsCustomValueAllowed
   >["multiple"];
+  /**
+   * The value for the input
+   */
+  inputValue?: UseAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["inputValue"];
   /**
    * Allows the input of custom values
    */
@@ -87,7 +109,7 @@ export type AutocompleteProps<
   /**
    * Callback fired when a selection is made.
    */
-  onChange?: MuiAutocompleteProps<
+  onChange?: UseAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
@@ -114,21 +136,26 @@ export type AutocompleteProps<
   /**
    * The options for the Autocomplete input
    */
-  options: MuiAutocompleteProps<
-    OptionType,
-    HasMultipleChoices,
-    undefined,
-    IsCustomValueAllowed
-  >["options"];
+  options: ReadonlyArray<OptionType>;
   /**
    * The value of the Autocomplete input
    */
-  value?: MuiAutocompleteProps<
+  value?: UseAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["value"];
+
+  /**
+   * Used to determine if the option represents the given value. Uses strict equality by default if none provided.
+   * Both arguments need to be handled, an option can only match with one value.
+   * option: the option to test
+   * value: the value to test against
+   *
+   * You will need to implement this function if your `option` items are objects.
+   */
+  getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;
 } & Pick<
   FieldComponentProps,
   "errorMessage" | "hint" | "id" | "isOptional" | "name"
@@ -140,9 +167,11 @@ const Autocomplete = <
   HasMultipleChoices extends boolean | undefined,
   IsCustomValueAllowed extends boolean | undefined
 >({
+  defaultValue,
   errorMessage,
   hasMultipleChoices,
   id: idOverride,
+  inputValue,
   isCustomValueAllowed,
   isDisabled,
   isLoading,
@@ -152,11 +181,12 @@ const Autocomplete = <
   label,
   name: nameOverride,
   onBlur,
-  onChange,
-  onInputChange,
+  onChange: onChangeProp,
+  onInputChange: onInputChangeProp,
   onFocus,
   options,
   value,
+  getIsOptionEqualToValue,
   testId,
 }: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
   const renderInput = useCallback(
@@ -194,11 +224,78 @@ const Autocomplete = <
     [errorMessage, hint, isOptional, label, nameOverride]
   );
 
+  const defaultValuesProp = useMemo<
+    | AutocompleteValue<
+        OptionType,
+        HasMultipleChoices,
+        undefined,
+        IsCustomValueAllowed
+      >
+    | undefined
+  >(() => {
+    if (hasMultipleChoices) {
+      return defaultValue === undefined
+        ? ([] as AutocompleteValue<
+            OptionType,
+            HasMultipleChoices,
+            undefined,
+            IsCustomValueAllowed
+          >)
+        : defaultValue;
+    }
+    return defaultValue ?? undefined;
+  }, [defaultValue, hasMultipleChoices]);
+
+  const [localValue, setLocalValue] = useControlledState({
+    controlledValue: value,
+    uncontrolledValue: defaultValuesProp,
+  });
+
+  const [localInputValue, setLocalInputValue] = useControlledState({
+    controlledValue: inputValue,
+    uncontrolledValue: undefined,
+  });
+
+  const onChange = useCallback<
+    NonNullable<
+      UseAutocompleteProps<
+        OptionType,
+        HasMultipleChoices,
+        undefined,
+        IsCustomValueAllowed
+      >["onChange"]
+    >
+  >(
+    (event, value, reason, details) => {
+      setLocalValue(value);
+      onChangeProp?.(event, value, reason, details);
+    },
+    [onChangeProp, setLocalValue]
+  );
+
+  const onInputChange = useCallback<
+    NonNullable<
+      UseAutocompleteProps<
+        OptionType,
+        HasMultipleChoices,
+        undefined,
+        IsCustomValueAllowed
+      >["onInputChange"]
+    >
+  >(
+    (event, value, reason) => {
+      setLocalInputValue(value);
+      onInputChangeProp?.(event, value, reason);
+    },
+    [onInputChangeProp, setLocalInputValue]
+  );
+
   return (
     <MuiAutocomplete
       // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div
       aria-disabled={isDisabled}
       data-se={testId}
+      defaultValue={defaultValuesProp}
       disableCloseOnSelect={hasMultipleChoices}
       disabled={isDisabled}
       freeSolo={isCustomValueAllowed}
@@ -213,7 +310,9 @@ const Autocomplete = <
       options={options}
       readOnly={isReadOnly}
       renderInput={renderInput}
-      value={value}
+      value={localValue}
+      inputValue={localInputValue}
+      isOptionEqualToValue={getIsOptionEqualToValue}
     />
   );
 };

package/src/labs/VirtualizedAutocomplete.tsx

@@ -0,0 +1,335 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {
+  Autocomplete as MuiAutocomplete,
+  AutocompleteProps as MuiAutocompleteProps,
+  InputBase,
+  UseAutocompleteProps,
+  AutocompleteValue,
+} from "@mui/material";
+import { memo, useCallback, useMemo } from "react";
+
+import { Field } from "../Field";
+import { FieldComponentProps } from "../FieldComponentProps";
+import type { SeleniumProps } from "../SeleniumProps";
+import { useControlledState } from "../useControlledState";
+
+export type AutocompleteProps<
+  OptionType,
+  HasMultipleChoices extends boolean | undefined,
+  IsCustomValueAllowed extends boolean | undefined
+> = {
+  /**
+   * The default value. Use when the component is not controlled.
+   * @default props.multiple ? [] : null
+   */
+  defaultValue?: UseAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["defaultValue"];
+  /**
+   * Enables multiple choice selection
+   */
+  hasMultipleChoices?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["multiple"];
+  /**
+   * The value for the input
+   */
+  inputValue?: UseAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["inputValue"];
+  /**
+   * Allows the input of custom values
+   */
+  isCustomValueAllowed?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["freeSolo"];
+  /**
+   * Disables the Autocomplete input
+   */
+  isDisabled?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["disabled"];
+  /**
+   * Displays a loading indicator
+   */
+  isLoading?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["loading"];
+  /**
+   * Makes the Autocomplete input read-only
+   */
+  isReadOnly?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["readOnly"];
+  /**
+   * The label text for the autocomplete input
+   */
+  label: string;
+  /**
+   * The component used to render the listbox.
+   */
+  ListboxComponent?: React.JSXElementConstructor<
+    React.HTMLAttributes<HTMLElement>
+  >;
+  /**
+   * Callback fired when the autocomplete loses focus.
+   */
+  onBlur?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["onBlur"];
+  /**
+   * Callback fired when a selection is made.
+   */
+  onChange?: UseAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["onChange"];
+  /**
+   * Callback fired when the textbox receives typed characters.
+   */
+  onInputChange?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["onInputChange"];
+  /**
+   * Callback fired when the autocomplete gains focus.
+   */
+  onFocus?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["onFocus"];
+  /**
+   * The options for the Autocomplete input
+   */
+  options: ReadonlyArray<OptionType>;
+  /**
+   * The value of the Autocomplete input
+   */
+  value?: UseAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["value"];
+
+  /**
+   * Used to determine if the option represents the given value. Uses strict equality by default if none provided.
+   * Both arguments need to be handled, an option can only match with one value.
+   * option: the option to test
+   * value: the value to test against
+   *
+   * You will need to implement this function if your `option` items are objects.
+   */
+  getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;
+} & Pick<
+  FieldComponentProps,
+  "errorMessage" | "hint" | "id" | "isOptional" | "name"
+> &
+  SeleniumProps;
+
+const VirtualizedAutocomplete = <
+  OptionType,
+  HasMultipleChoices extends boolean | undefined,
+  IsCustomValueAllowed extends boolean | undefined
+>({
+  defaultValue,
+  errorMessage,
+  hasMultipleChoices,
+  id: idOverride,
+  inputValue,
+  isCustomValueAllowed,
+  isDisabled,
+  isLoading,
+  isOptional = false,
+  isReadOnly,
+  hint,
+  label,
+  ListboxComponent,
+  name: nameOverride,
+  onBlur,
+  onChange: onChangeProp,
+  onInputChange: onInputChangeProp,
+  onFocus,
+  options,
+  value,
+  getIsOptionEqualToValue,
+  testId,
+}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
+  const renderInput = useCallback(
+    ({ InputLabelProps, InputProps, ...params }) => (
+      <Field
+        errorMessage={errorMessage}
+        fieldType="single"
+        hasVisibleLabel
+        id={InputLabelProps.htmlFor}
+        hint={hint}
+        label={label}
+        isOptional={isOptional}
+        renderFieldComponent={({
+          ariaDescribedBy,
+          id,
+          errorMessageElementId,
+          labelElementId,
+        }) => (
+          <InputBase
+            {...params}
+            {...InputProps}
+            inputProps={{
+              ...params.inputProps,
+              "aria-errormessage": errorMessageElementId,
+              "aria-labelledby": labelElementId,
+            }}
+            aria-describedby={ariaDescribedBy}
+            id={id}
+            name={nameOverride ?? id}
+            required={!isOptional}
+          />
+        )}
+      />
+    ),
+    [errorMessage, hint, isOptional, label, nameOverride]
+  );
+
+  const defaultValuesProp = useMemo<
+    | AutocompleteValue<
+        OptionType,
+        HasMultipleChoices,
+        undefined,
+        IsCustomValueAllowed
+      >
+    | undefined
+  >(() => {
+    if (hasMultipleChoices) {
+      return defaultValue === undefined
+        ? ([] as AutocompleteValue<
+            OptionType,
+            HasMultipleChoices,
+            undefined,
+            IsCustomValueAllowed
+          >)
+        : defaultValue;
+    }
+    return defaultValue ?? undefined;
+  }, [defaultValue, hasMultipleChoices]);
+
+  const [localValue, setLocalValue] = useControlledState({
+    controlledValue: value,
+    uncontrolledValue: defaultValuesProp,
+  });
+
+  const [localInputValue, setLocalInputValue] = useControlledState({
+    controlledValue: inputValue,
+    uncontrolledValue: undefined,
+  });
+
+  const onChange = useCallback<
+    NonNullable<
+      UseAutocompleteProps<
+        OptionType,
+        HasMultipleChoices,
+        undefined,
+        IsCustomValueAllowed
+      >["onChange"]
+    >
+  >(
+    (event, value, reason, details) => {
+      setLocalValue(value);
+      onChangeProp?.(event, value, reason, details);
+    },
+    [onChangeProp, setLocalValue]
+  );
+
+  const onInputChange = useCallback<
+    NonNullable<
+      UseAutocompleteProps<
+        OptionType,
+        HasMultipleChoices,
+        undefined,
+        IsCustomValueAllowed
+      >["onInputChange"]
+    >
+  >(
+    (event, value, reason) => {
+      setLocalInputValue(value);
+      onInputChangeProp?.(event, value, reason);
+    },
+    [onInputChangeProp, setLocalInputValue]
+  );
+
+  return (
+    <MuiAutocomplete
+      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div
+      aria-disabled={isDisabled}
+      data-se={testId}
+      defaultValue={defaultValuesProp}
+      disableCloseOnSelect={hasMultipleChoices}
+      disabled={isDisabled}
+      freeSolo={isCustomValueAllowed}
+      filterSelectedOptions={true}
+      id={idOverride}
+      ListboxComponent={ListboxComponent}
+      loading={isLoading}
+      multiple={hasMultipleChoices}
+      onBlur={onBlur}
+      onChange={onChange}
+      onInputChange={onInputChange}
+      onFocus={onFocus}
+      options={options}
+      readOnly={isReadOnly}
+      renderInput={renderInput}
+      value={localValue}
+      inputValue={localInputValue}
+      isOptionEqualToValue={getIsOptionEqualToValue}
+    />
+  );
+};
+
+// Need the `typeof Autocomplete` because generics don't get passed through
+const MemoizedAutocomplete = memo(
+  VirtualizedAutocomplete
+) as typeof VirtualizedAutocomplete;
+// @ts-expect-error displayName is expected to not be on `typeof Autocomplete`
+MemoizedAutocomplete.displayName = "Autocomplete";
+
+export { MemoizedAutocomplete as VirtualizedAutocomplete };

package/src/labs/index.ts

@@ -23,3 +23,4 @@ export * from "./materialReactTableTypes";
 export * from "./PaginatedTable";
 export * from "./StaticTable";
 export * from "./GroupPicker";
+export * from "./VirtualizedAutocomplete";