@okta/odyssey-react-mui 1.0.2 → 1.2.0

package/src/SearchField.tsx

@@ -11,7 +11,7 @@
  */
 
 import { useState, useEffect } from "react";
-import { InputAdornment, InputBase } from "@mui/material";
+import { InputAdornment, InputBase, IconButton } from "@mui/material";
 import {
   ChangeEventHandler,
   FocusEventHandler,
@@ -23,7 +23,7 @@ import {
 
 import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated";
 import { Field } from "./Field";
-import { Button } from "./Button";
+import type { SeleniumProps } from "./SeleniumProps";
 
 export type SearchFieldProps = {
   /**
@@ -48,6 +48,10 @@ export type SearchFieldProps = {
    * This label won't show up visually, but it's required for accessibility.
    */
   label: string;
+  /**
+   * The name of the `input` element. Defaults to the `id` if not set.
+   */
+  name?: string;
   /**
    * Callback fired when the `input` element loses focus.
    */
@@ -72,7 +76,7 @@ export type SearchFieldProps = {
    * The value of the `input` element, required for a controlled component.
    */
   value?: string;
-};
+} & SeleniumProps;
 
 const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
   (
@@ -82,11 +86,13 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       id: idOverride,
       isDisabled = false,
       label,
+      name: nameOverride,
       onChange: onChangeProp,
       onFocus,
       onBlur,
       onClear: onClearProp,
       placeholder,
+      testId,
       value: controlledValue,
     },
     ref
@@ -120,26 +126,26 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
           autoComplete={autoCompleteType}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
           autoFocus={hasInitialFocus}
+          data-se={testId}
           endAdornment={
             uncontrolledValue && (
               <InputAdornment position="end">
-                <Button
-                  ariaLabel="Clear"
-                  isDisabled={isDisabled}
-                  label=""
+                <IconButton
+                  aria-label="Clear"
+                  disabled={isDisabled}
                   onClick={onClear}
                   size="small"
-                  startIcon={<CloseCircleFilledIcon />}
-                  variant="floating"
-                />
+                >
+                  <CloseCircleFilledIcon />
+                </IconButton>
               </InputAdornment>
             )
           }
           id={id}
-          name={id}
+          name={nameOverride ?? id}
+          onBlur={onBlur}
           onChange={onChange}
           onFocus={onFocus}
-          onBlur={onBlur}
           placeholder={placeholder}
           ref={ref}
           startAdornment={
@@ -155,15 +161,17 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       ),
       [
         autoCompleteType,
+        controlledValue,
         hasInitialFocus,
         isDisabled,
-        onClear,
+        nameOverride,
+        onBlur,
         onChange,
+        onClear,
         onFocus,
-        onBlur,
         placeholder,
         ref,
-        controlledValue,
+        testId,
         uncontrolledValue,
       ]
     );

package/src/Select.tsx

@@ -10,18 +10,19 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { ReactNode, forwardRef, memo, useCallback, useState } from "react";
+import { ReactNode, memo, useCallback, useMemo, useState } from "react";
 import {
   Box,
   Chip,
+  Checkbox as MuiCheckbox,
   ListSubheader,
   MenuItem,
   Select as MuiSelect,
   SelectChangeEvent,
 } from "@mui/material";
 import { SelectProps as MuiSelectProps } from "@mui/material";
-import { Checkbox } from "./Checkbox";
 import { Field } from "./Field";
+import type { SeleniumProps } from "./SeleniumProps";
 
 export type SelectOption = {
   text: string;
@@ -58,6 +59,10 @@ export type SelectProps = {
    * The label text for the Select
    */
   label: string;
+  /**
+   * The name of the `input` element. Defaults to the `id` if not set.
+   */
+  name?: string;
   /**
    * Callback fired when the Select loses focus
    */
@@ -78,7 +83,7 @@ export type SelectProps = {
    * The value or values selected in the Select
    */
   value?: string | string[];
-};
+} & SeleniumProps;
 
 /**
  * Options in Odyssey <Select> are passed as an array, which can contain any combination
@@ -95,168 +100,168 @@ export type SelectProps = {
  *   - { text: string, type: "heading" } — Used to display a group heading with the text
  */
 
-const Select = forwardRef<HTMLSelectElement, SelectProps>(
-  (
-    {
-      errorMessage,
-      hint,
-      id: idOverride,
-      isDisabled = false,
-      isMultiSelect = false,
-      isOptional = false,
-      label,
-      onBlur,
-      onChange: onChangeProp,
-      onFocus,
-      value,
-      options,
-    },
-    ref
-  ) => {
-    // If there's no value set, we set it to a blank string (if it's a single-select)
-    // or an empty array (if it's a multi-select)
-    if (typeof value === "undefined") {
-      value = isMultiSelect ? [] : "";
-    }
-
-    const [selectedValue, setSelectedValue] = useState<string | string[]>(
-      value
-    );
-
-    const onChange = useCallback(
-      (event: SelectChangeEvent<string | string[]>, child: ReactNode) => {
-        const {
-          target: { value },
-        } = event;
+const Select = ({
+  errorMessage,
+  hint,
+  id: idOverride,
+  isDisabled = false,
+  isMultiSelect = false,
+  isOptional = false,
+  label,
+  name: nameOverride,
+  onBlur,
+  onChange: onChangeProp,
+  onFocus,
+  value,
+  testId,
+  options,
+}: SelectProps) => {
+  // If there's no value set, we set it to a blank string (if it's a single-select)
+  // or an empty array (if it's a multi-select)
+  if (typeof value === "undefined") {
+    value = isMultiSelect ? [] : "";
+  }
 
-        // Set the field value, with some additional logic to handle array values
-        // for multi-selects
-        if (isMultiSelect) {
-          setSelectedValue(
-            typeof value === "string" ? value.split(",") : value
-          );
-        } else {
-          setSelectedValue(value);
-        }
+  const [selectedValue, setSelectedValue] = useState<string | string[]>(value);
 
-        // Trigger the onChange event, if one has been passed
-        if (onChangeProp) {
-          onChangeProp(event, child);
-        }
-      },
-      [isMultiSelect, onChangeProp, setSelectedValue]
-    );
+  const onChange = useCallback(
+    (event: SelectChangeEvent<string | string[]>, child: ReactNode) => {
+      const {
+        target: { value },
+      } = event;
 
-    // Normalize the options array to accommodate the various
-    // data types that might be passed
-    const normalizedOptions = options.map((option) => {
-      if (typeof option === "object") {
-        return {
-          text: option.text,
-          value: option.value || option.text,
-          type: option.type === "heading" ? "heading" : "option",
-        };
+      // Set the field value, with some additional logic to handle array values
+      // for multi-selects
+      if (isMultiSelect) {
+        setSelectedValue(typeof value === "string" ? value.split(",") : value);
+      } else {
+        setSelectedValue(value);
       }
 
-      return { text: option, value: option, type: "option" };
-    });
-
-    const renderValue = useCallback(
-      (selected: string | string[]) => {
-        // If the selected value isn't an array, then we don't need to display
-        // chips and should fall back to the default render behavior
-        if (typeof selected === "string") {
-          return undefined;
-        }
-
-        // Convert the selected options array into <Chip>s
-        const renderedChips = selected
-          .map((item: string) => {
-            const selectedOption = normalizedOptions.find(
-              (option) => option.value === item
-            );
+      // Trigger the onChange event, if one has been passed
+      if (onChangeProp) {
+        onChangeProp(event, child);
+      }
+    },
+    [isMultiSelect, onChangeProp, setSelectedValue]
+  );
 
-            if (!selectedOption) {
-              return null;
+  // Normalize the options array to accommodate the various
+  // data types that might be passed
+  const normalizedOptions = useMemo(
+    () =>
+      options.map((option) =>
+        typeof option === "object"
+          ? {
+              text: option.text,
+              value: option.value || option.text,
+              type: option.type === "heading" ? "heading" : "option",
             }
+          : { text: option, value: option, type: "option" }
+      ),
+    [options]
+  );
 
-            return <Chip key={item} label={selectedOption.text} />;
-          })
-          .filter(Boolean);
+  const renderValue = useCallback(
+    (selected: string | string[]) => {
+      // If the selected value isn't an array, then we don't need to display
+      // chips and should fall back to the default render behavior
+      if (typeof selected === "string") {
+        return undefined;
+      }
 
-        if (renderedChips.length === 0) {
-          return null;
-        }
+      // Convert the selected options array into <Chip>s
+      const renderedChips = selected
+        .map((item: string) => {
+          const selectedOption = normalizedOptions.find(
+            (option) => option.value === item
+          );
+
+          if (!selectedOption) {
+            return null;
+          }
 
-        // We need the <Box> to surround the <Chip>s for
-        // proper styling
-        return <Box>{renderedChips}</Box>;
-      },
-      [normalizedOptions]
-    );
+          return <Chip key={item} label={selectedOption.text} />;
+        })
+        .filter(Boolean);
 
-    // Convert the options into the ReactNode children
-    // that will populate the <Select>
-    const children = normalizedOptions.map((option) => {
-      if (option.type === "heading") {
-        return <ListSubheader key={option.text}>{option.text}</ListSubheader>;
+      if (renderedChips.length === 0) {
+        return null;
       }
 
-      return (
-        <MenuItem key={option.value} value={option.value}>
-          {isMultiSelect && (
-            <Checkbox isDefaultChecked={selectedValue.includes(option.value)} />
-          )}
-          {option.text}
-        </MenuItem>
-      );
-    });
+      // We need the <Box> to surround the <Chip>s for
+      // proper styling
+      return <Box>{renderedChips}</Box>;
+    },
+    [normalizedOptions]
+  );
 
-    const renderFieldComponent = useCallback(
-      () => (
-        <MuiSelect
-          children={children}
-          id={idOverride}
-          multiple={isMultiSelect}
-          name={idOverride}
-          onBlur={onBlur}
-          onChange={onChange}
-          onFocus={onFocus}
-          ref={ref}
-          renderValue={isMultiSelect ? renderValue : undefined}
-          value={selectedValue}
-          labelId={label}
-        />
-      ),
-      [
-        idOverride,
-        isMultiSelect,
-        onBlur,
-        onChange,
-        onFocus,
-        ref,
-        children,
-        renderValue,
-        selectedValue,
-        label,
-      ]
-    );
+  // Convert the options into the ReactNode children
+  // that will populate the <Select>
+  const children = useMemo(
+    () =>
+      normalizedOptions.map((option) => {
+        if (option.type === "heading") {
+          return <ListSubheader key={option.text}>{option.text}</ListSubheader>;
+        }
+
+        return (
+          <MenuItem key={option.value} value={option.value}>
+            {isMultiSelect && (
+              <MuiCheckbox checked={selectedValue.includes(option.value)} />
+            )}
+            {option.text}
+          </MenuItem>
+        );
+      }),
+    [isMultiSelect, normalizedOptions, selectedValue]
+  );
 
-    return (
-      <Field
-        errorMessage={errorMessage}
-        fieldType="single"
-        hasVisibleLabel
-        hint={hint}
-        id={idOverride}
-        isDisabled={isDisabled}
-        isOptional={isOptional}
-        label={label}
-        renderFieldComponent={renderFieldComponent}
+  const renderFieldComponent = useCallback(
+    ({ ariaDescribedBy, id }) => (
+      <MuiSelect
+        aria-describedby={ariaDescribedBy}
+        children={children}
+        data-se={testId}
+        id={id}
+        labelId={label}
+        multiple={isMultiSelect}
+        name={nameOverride ?? id}
+        onBlur={onBlur}
+        onChange={onChange}
+        onFocus={onFocus}
+        renderValue={isMultiSelect ? renderValue : undefined}
+        value={selectedValue}
       />
-    );
-  }
-);
+    ),
+    [
+      children,
+      isMultiSelect,
+      label,
+      nameOverride,
+      onBlur,
+      onChange,
+      onFocus,
+      renderValue,
+      selectedValue,
+      testId,
+    ]
+  );
+
+  return (
+    <Field
+      errorMessage={errorMessage}
+      fieldType="single"
+      hasVisibleLabel
+      hint={hint}
+      id={idOverride}
+      isDisabled={isDisabled}
+      isOptional={isOptional}
+      label={label}
+      renderFieldComponent={renderFieldComponent}
+    />
+  );
+};
 
 const MemoizedSelect = memo(Select);
 MemoizedSelect.displayName = "Select";

package/src/SeleniumProps.ts

@@ -0,0 +1,20 @@
+/*!
+ * 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.
+ */
+
+export type SeleniumProps = {
+  /**
+   * This prop puts a `data` attribute on an HTML element in this component with the value provided.
+   *
+   * @deprecated **WARNING:** You should be using Semantic Selectors instead of this property. This is a temporary measure for backwards compatibility with existing Selenium tests.
+   */
+  testId?: string;
+};

package/src/Status.tsx

@@ -13,6 +13,7 @@
 import { Chip } from "@mui/material";
 
 import { useMuiProps } from "./MuiPropsContext";
+import type { SeleniumProps } from "./SeleniumProps";
 
 export const statusSeverityValues = [
   "default",
@@ -35,12 +36,23 @@ export type StatusProps = {
    * The style of the Status indicator
    */
   variant?: (typeof statusVariantValues)[number];
-};
+} & SeleniumProps;
 
-export const Status = ({ severity, label, variant = "lamp" }: StatusProps) => {
+export const Status = ({
+  label,
+  severity,
+  testId,
+  variant = "lamp",
+}: StatusProps) => {
   const muiProps = useMuiProps();
 
   return (
-    <Chip {...muiProps} label={label} color={severity} variant={variant} />
+    <Chip
+      {...muiProps}
+      color={severity}
+      data-se={testId}
+      label={label}
+      variant={variant}
+    />
   );
 };

package/src/Tabs.tsx

@@ -15,6 +15,7 @@ import React, {
   ReactNode,
   memo,
   useCallback,
+  useEffect,
   useState,
 } from "react";
 import { Tab as MuiTab } from "@mui/material";
@@ -23,6 +24,7 @@ import {
   TabPanel as MuiTabPanel,
   TabContext as MuiTabContext,
 } from "@mui/lab";
+import { SeleniumProps } from "./SeleniumProps";
 
 export type TabItemProps = {
   /**
@@ -45,7 +47,7 @@ export type TabItemProps = {
    * The value associated with the TabItem
    */
   value?: string;
-};
+} & SeleniumProps;
 
 export type TabsProps = {
   /**
@@ -53,17 +55,22 @@ export type TabsProps = {
    */
   ariaLabel?: string;
   /**
-   * The value of the Tab that should be selected by default
+   * @deprecated please use the `value` prop instead
+   * When `value` is provided, `initialValue` isn't used.
    */
   initialValue?: string;
   /**
    * The TabItems to be included in the Tabs group
    */
   tabs: TabItemProps[];
+  /**
+   * Identifier for the selected tab.
+   */
+  value?: string;
 };
 
-const Tabs = ({ ariaLabel, initialValue = "0", tabs }: TabsProps) => {
-  const [tabState, setTabState] = useState(initialValue);
+const Tabs = ({ ariaLabel, initialValue, tabs, value }: TabsProps) => {
+  const [tabState, setTabState] = useState(initialValue ?? value ?? "0");
 
   const onChange = useCallback(
     (_event: React.SyntheticEvent, newState: string) => {
@@ -72,11 +79,18 @@ const Tabs = ({ ariaLabel, initialValue = "0", tabs }: TabsProps) => {
     []
   );
 
+  useEffect(() => {
+    if (value !== undefined) {
+      setTabState(value);
+    }
+  }, [value]);
+
   return (
     <MuiTabContext value={tabState}>
       <MuiTabList onChange={onChange} aria-label={ariaLabel}>
         {tabs.map((tab, index) => (
           <MuiTab
+            data-se={tab.testId}
             disabled={tab.isDisabled}
             icon={tab.startIcon}
             label={tab.label}

package/src/Tag.tsx

@@ -14,6 +14,7 @@ import { Chip as MuiChip, ChipProps as MuiChipProps } from "@mui/material";
 import { memo, ReactElement, useCallback, useContext } from "react";
 import { TagListContext } from "./TagListContext";
 import { MuiPropsContext } from "./MuiPropsContext";
+import { SeleniumProps } from "./SeleniumProps";
 
 export type TagProps = {
   icon?: ReactElement;
@@ -30,9 +31,16 @@ export type TagProps = {
    * Callback fired when the remove button of the Tag is clicked
    */
   onRemove?: MuiChipProps["onDelete"];
-};
+} & SeleniumProps;
 
-const Tag = ({ icon, isDisabled, label, onClick, onRemove }: TagProps) => {
+const Tag = ({
+  icon,
+  isDisabled,
+  label,
+  onClick,
+  onRemove,
+  testId,
+}: TagProps) => {
   const { chipElementType } = useContext(TagListContext);
 
   const renderTag = useCallback(
@@ -42,6 +50,7 @@ const Tag = ({ icon, isDisabled, label, onClick, onRemove }: TagProps) => {
         aria-disabled={isDisabled}
         clickable={onClick ? true : false}
         component={chipElementType}
+        data-se={testId}
         disabled={isDisabled}
         icon={icon}
         label={label}
@@ -49,7 +58,7 @@ const Tag = ({ icon, isDisabled, label, onClick, onRemove }: TagProps) => {
         onDelete={onRemove}
       />
     ),
-    [chipElementType, icon, isDisabled, label, onClick, onRemove]
+    [chipElementType, icon, isDisabled, label, onClick, onRemove, testId]
   );
 
   return <MuiPropsContext.Consumer>{renderTag}</MuiPropsContext.Consumer>;

package/src/TagList.tsx

@@ -14,15 +14,16 @@ import { Tag } from "./Tag";
 import { Stack } from "@mui/material";
 import { memo, ReactElement, useMemo } from "react";
 import { ChipElementType, TagListContext } from "./TagListContext";
+import { SeleniumProps } from "./SeleniumProps";
 
 export type TagListProps = {
   /**
    * The Tag or array of Tags within the TagList
    */
   children: ReactElement<typeof Tag> | Array<ReactElement<typeof Tag>>;
-};
+} & SeleniumProps;
 
-const TagList = ({ children }: TagListProps) => {
+const TagList = ({ children, testId }: TagListProps) => {
   const providerValue = useMemo<{
     chipElementType: ChipElementType;
   }>(
@@ -35,6 +36,7 @@ const TagList = ({ children }: TagListProps) => {
   return (
     <Stack
       component="ul"
+      data-se={testId}
       direction="row"
       spacing={2}
       useFlexGap