@okta/odyssey-react-mui 1.13.11 → 1.14.2

package/src/Radio.tsx

@@ -52,7 +52,7 @@ export type RadioProps = {
    */
   onBlur?: MuiFormControlLabelProps["onBlur"];
 } & Pick<FieldComponentProps, "isDisabled" | "name"> &
-  HtmlProps;
+  Pick<HtmlProps, "testId" | "translate">;
 
 const Radio = ({
   inputRef,
@@ -77,21 +77,21 @@ const Radio = ({
         },
       };
     },
-    []
+    [],
   );
 
   const onChange = useCallback<NonNullable<MuiRadioProps["onChange"]>>(
     (event, checked) => {
       onChangeProp?.(event, checked);
     },
-    [onChangeProp]
+    [onChangeProp],
   );
 
   const onBlur = useCallback<NonNullable<MuiFormControlLabelProps["onBlur"]>>(
     (event) => {
       onBlurProp?.(event);
     },
-    [onBlurProp]
+    [onBlurProp],
   );
 
   return (

package/src/RadioGroup.tsx

@@ -18,7 +18,10 @@ import { memo, ReactElement, useCallback, useRef } from "react";
 
 import { Radio, RadioProps } from "./Radio";
 import { Field } from "./Field";
-import { FieldComponentProps } from "./FieldComponentProps";
+import {
+  FieldComponentProps,
+  FieldComponentRenderProps,
+} from "./FieldComponentProps";
 import type { HtmlProps } from "./HtmlProps";
 import { getControlState, useInputValues } from "./inputUtils";
 
@@ -45,7 +48,6 @@ export type RadioGroupProps = {
   value?: RadioProps["value"];
 } & Pick<
   FieldComponentProps,
-  | "ariaDescribedBy"
   | "errorMessage"
   | "errorMessageList"
   | "hint"
@@ -54,7 +56,12 @@ export type RadioGroupProps = {
   | "isDisabled"
   | "name"
 > &
-  HtmlProps;
+  Pick<HtmlProps, "ariaDescribedBy" | "testId" | "translate">;
+
+type FieldRenderProps = Partial<
+  Pick<FieldComponentRenderProps, "ariaDescribedBy" | "errorMessageElementId">
+> &
+  Pick<FieldComponentRenderProps, "id" | "labelElementId">;
 
 const RadioGroup = ({
   ariaDescribedBy,
@@ -74,7 +81,10 @@ const RadioGroup = ({
   value,
 }: RadioGroupProps) => {
   const controlledStateRef = useRef(
-    getControlState({ controlledValue: value, uncontrolledValue: defaultValue })
+    getControlState({
+      controlledValue: value,
+      uncontrolledValue: defaultValue,
+    }),
   );
   const inputValues = useInputValues({
     defaultValue,
@@ -86,10 +96,15 @@ const RadioGroup = ({
     (event, value) => {
       onChangeProp?.(event, value);
     },
-    [onChangeProp]
+    [onChangeProp],
   );
   const renderFieldComponent = useCallback(
-    ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
+    ({
+      ariaDescribedBy,
+      errorMessageElementId,
+      id,
+      labelElementId,
+    }: FieldRenderProps) => (
       <MuiRadioGroup
         {...inputValues}
         aria-describedby={ariaDescribedBy}
@@ -104,7 +119,7 @@ const RadioGroup = ({
         {children}
       </MuiRadioGroup>
     ),
-    [children, inputValues, nameOverride, onChange, testId, translate]
+    [children, inputValues, nameOverride, onChange, testId, translate],
   );
 
   return (

package/src/ScreenReaderText.tsx

@@ -20,7 +20,7 @@ export type ScreenReaderTextProps = {
    * The visually-hidden text.
    */
   children: ReactNode;
-} & HtmlProps;
+} & Pick<HtmlProps, "translate">;
 
 /**
  * MUI sx expects you pass in a CSS object, not an object with CSS.

package/src/SearchField.tsx

@@ -24,10 +24,15 @@ import {
 
 import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated";
 import { Field } from "./Field";
-import { FieldComponentProps } from "./FieldComponentProps";
+import {
+  FieldComponentProps,
+  FieldComponentRenderProps,
+} from "./FieldComponentProps";
 import type { HtmlProps } from "./HtmlProps";
 import { getControlState, useInputValues } from "./inputUtils";
 
+export const searchVariantValues = ["outline", "filled"] as const;
+
 export type SearchFieldProps = {
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
@@ -81,11 +86,15 @@ export type SearchFieldProps = {
    * The value of the `input` element, to use when controlled.
    */
   value?: string;
-} & Pick<
-  FieldComponentProps,
-  "ariaDescribedBy" | "id" | "isDisabled" | "name" | "isFullWidth"
-> &
-  HtmlProps;
+  /**
+   * Whether the SearchField has a gray or white background
+   */
+  variant?: (typeof searchVariantValues)[number];
+} & Pick<FieldComponentProps, "id" | "isDisabled" | "name" | "isFullWidth"> &
+  Pick<HtmlProps, "ariaDescribedBy" | "testId" | "translate">;
+
+type FieldRenderProps = Partial<Pick<HtmlProps, "ariaDescribedBy">> &
+  Pick<FieldComponentRenderProps, "id">;
 
 const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
   (
@@ -108,15 +117,16 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       testId,
       translate,
       value,
+      variant = "outline",
     },
-    ref
+    ref,
   ) => {
     const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =
       useCallback(
         (event) => {
           onChangeProp?.(event);
         },
-        [onChangeProp]
+        [onChangeProp],
       );
 
     const onClear = useCallback(() => {
@@ -127,7 +137,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       getControlState({
         controlledValue: value,
         uncontrolledValue: defaultValue,
-      })
+      }),
     );
     const inputValues = useInputValues({
       defaultValue,
@@ -136,7 +146,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
     });
 
     const renderFieldComponent = useCallback(
-      ({ ariaDescribedBy, id }) => (
+      ({ ariaDescribedBy, id }: FieldRenderProps) => (
         <InputBase
           {...inputValues}
           inputProps={{
@@ -162,6 +172,8 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
             )
           }
           id={id}
+          data-ods-type="search"
+          data-ods-variant={variant}
           name={nameOverride ?? id}
           onBlur={onBlur}
           onChange={onChange}
@@ -193,7 +205,8 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
         tabIndex,
         testId,
         translate,
-      ]
+        variant,
+      ],
     );
 
     return (
@@ -209,7 +222,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
         renderFieldComponent={renderFieldComponent}
       />
     );
-  }
+  },
 );
 
 const MemoizedSearchField = memo(SearchField);

package/src/Select.tsx

@@ -18,21 +18,26 @@ import {
   useRef,
   useState,
   useImperativeHandle,
+  MouseEvent,
 } from "react";
 import {
-  Box,
+  Box as MuiBox,
   Checkbox as MuiCheckbox,
-  Chip,
+  Chip as MuiChip,
   ListItemSecondaryAction,
   ListSubheader,
-  MenuItem,
+  MenuItem as MuiMenuItem,
   Select as MuiSelect,
+  SelectChangeEvent,
 } from "@mui/material";
 import { SelectProps as MuiSelectProps } from "@mui/material";
 
 import { Field } from "./Field";
-import { FieldComponentProps } from "./FieldComponentProps";
-import { CheckIcon } from "./icons.generated";
+import {
+  FieldComponentProps,
+  FieldComponentRenderProps,
+} from "./FieldComponentProps";
+import { CheckIcon, CloseCircleFilledIcon } from "./icons.generated";
 import type { HtmlProps } from "./HtmlProps";
 import {
   ComponentControlledState,
@@ -41,6 +46,12 @@ import {
   getControlState,
 } from "./inputUtils";
 import { normalizedKey } from "./useNormalizedKey";
+import styled from "@emotion/styled";
+
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "./OdysseyDesignTokensContext";
 
 export type SelectOption = {
   text: string;
@@ -48,12 +59,73 @@ export type SelectOption = {
   value?: string;
 };
 
+const SelectContainer = styled.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+`;
+
+const ChipsPositioningContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>`
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};
+  right: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing5};
+  bottom: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};
+  left: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};
+  margin-inline-start: ${({ odysseyDesignTokens }) =>
+    odysseyDesignTokens.BorderWidthMain};
+  opacity: 1;
+  pointer-events: none;
+`;
+
+const NonInteractiveIcon = styled(CloseCircleFilledIcon, {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>`
+  font-size: 1em;
+  margin-inline-start: ${({ odysseyDesignTokens }) =>
+    odysseyDesignTokens.Spacing2};
+  margin-inline-end: -${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};
+`;
+
+const ChipsInnerContainer = styled(MuiBox, {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "isInteractive",
+})<{
+  isInteractive?: boolean;
+  odysseyDesignTokens: DesignTokens;
+}>`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};
+  pointer-events: ${({ isInteractive }) => (isInteractive ? "auto" : "none")};
+  opacity: ${({ isInteractive }) => (isInteractive ? 1 : 0)};
+`;
+
+const ChipsSpacer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>`
+  display: inline-block;
+  border-color: transparent;
+  border-style: solid none;
+  border-width: 1px;
+  height: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing6};
+`;
+
 export type SelectValueType<HasMultipleChoices> =
   HasMultipleChoices extends true ? string[] : string;
 
 export type SelectProps<
   Value extends SelectValueType<HasMultipleChoices>,
-  HasMultipleChoices extends boolean
+  HasMultipleChoices extends boolean,
 > = {
   /**
    * The default value. Use when the component is not controlled.
@@ -98,7 +170,6 @@ export type SelectProps<
   value?: Value;
 } & Pick<
   FieldComponentProps,
-  | "ariaDescribedBy"
   | "errorMessage"
   | "errorMessageList"
   | "hint"
@@ -109,7 +180,12 @@ export type SelectProps<
   | "isOptional"
   | "name"
 > &
-  HtmlProps;
+  Pick<HtmlProps, "ariaDescribedBy" | "testId" | "translate">;
+
+type SelectRenderProps = Partial<
+  Pick<FieldComponentRenderProps, "ariaDescribedBy" | "errorMessageElementId">
+> &
+  Pick<FieldComponentRenderProps, "id" | "labelElementId">;
 
 /**
  * Options in Odyssey <Select> are passed as an array, which can contain any combination
@@ -129,7 +205,7 @@ export type SelectProps<
 const { CONTROLLED } = ComponentControlledState;
 const Select = <
   Value extends SelectValueType<HasMultipleChoices>,
-  HasMultipleChoices extends boolean
+  HasMultipleChoices extends boolean,
 >({
   ariaDescribedBy,
   defaultValue,
@@ -159,15 +235,19 @@ const Select = <
       hasMultipleChoicesProp === undefined
         ? isMultiSelect
         : hasMultipleChoicesProp,
-    [hasMultipleChoicesProp, isMultiSelect]
+    [hasMultipleChoicesProp, isMultiSelect],
   );
   const controlledStateRef = useRef(
-    getControlState({ controlledValue: value, uncontrolledValue: defaultValue })
+    getControlState({
+      controlledValue: value,
+      uncontrolledValue: defaultValue,
+    }),
   );
   const [internalSelectedValues, setInternalSelectedValues] = useState(
-    controlledStateRef.current === CONTROLLED ? value : defaultValue
+    controlledStateRef.current === CONTROLLED ? value : defaultValue,
   );
   const localInputRef = useRef<HTMLSelectElement>(null);
+  const odysseyDesignTokens = useOdysseyDesignTokens();
 
   useImperativeHandle(
     inputRef,
@@ -178,7 +258,7 @@ const Select = <
         },
       };
     },
-    []
+    [],
   );
 
   useEffect(() => {
@@ -200,12 +280,12 @@ const Select = <
       } = event;
       if (controlledStateRef.current !== CONTROLLED) {
         setInternalSelectedValues(
-          (typeof value === "string" ? value.split(",") : value) as Value
+          (typeof value === "string" ? value.split(",") : value) as Value,
         );
       }
       onChangeProp?.(event, child);
     },
-    [onChangeProp]
+    [onChangeProp],
   );
 
   // Normalize the options array to accommodate the various
@@ -229,41 +309,85 @@ const Select = <
         }
         return { text: option, value: option, type: "option" };
       }),
-    [options]
+    [options],
   );
 
-  const renderValue = useCallback(
-    (selected: Value) => {
-      // 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
+  const Chips = useCallback(
+    ({
+      selection,
+      isInteractive,
+    }: {
+      selection: string[];
+      isInteractive: boolean;
+    }) => {
+      const removeSelection = (itemToRemove: string) => {
+        if (Array.isArray(internalSelectedValues)) {
+          const newValue = internalSelectedValues.filter(
+            (item: string) => item !== itemToRemove,
           );
 
-          if (!selectedOption) {
-            return null;
-          }
+          const syntheticEvent = {
+            target: { value: newValue },
+          } as SelectChangeEvent<Value>;
 
-          return <Chip key={item} label={selectedOption.text} />;
-        })
-        .filter(Boolean);
+          onChange(syntheticEvent, null);
+        }
+      };
 
-      if (renderedChips.length === 0) {
-        return null;
-      }
+      const stopPropagation = (event: MouseEvent<SVGSVGElement>) =>
+        event.stopPropagation();
 
-      // We need the <Box> to surround the <Chip>s for
-      // proper styling
-      return <Box>{renderedChips}</Box>;
+      return (
+        <ChipsInnerContainer
+          isInteractive={isInteractive}
+          odysseyDesignTokens={odysseyDesignTokens}
+        >
+          <ChipsSpacer odysseyDesignTokens={odysseyDesignTokens} />
+          {selection.map(
+            (item: string) =>
+              item?.length > 0 && (
+                <MuiChip
+                  key={item}
+                  label={
+                    <>
+                      {item}
+                      {!isInteractive &&
+                        controlledStateRef.current === CONTROLLED &&
+                        hasMultipleChoices && (
+                          <NonInteractiveIcon
+                            odysseyDesignTokens={odysseyDesignTokens}
+                          />
+                        )}
+                    </>
+                  }
+                  tabIndex={-1}
+                  onDelete={
+                    isInteractive && controlledStateRef.current === CONTROLLED
+                      ? () => removeSelection(item)
+                      : undefined
+                  }
+                  deleteIcon={
+                    <CloseCircleFilledIcon
+                      sx={{ pointerEvents: "auto" }}
+                      // We need to stop event propagation on mouse down to prevent the deletion
+                      // from being blocked by the Select list opening, and also ensure that
+                      // the pointerEvent is registered even when the parent's are not
+                      onMouseDown={stopPropagation}
+                    />
+                  }
+                />
+              ),
+          )}
+        </ChipsInnerContainer>
+      );
     },
-    [normalizedOptions]
+    [
+      controlledStateRef,
+      hasMultipleChoices,
+      internalSelectedValues,
+      odysseyDesignTokens,
+      onChange,
+    ],
   );
 
   // Convert the options into the ReactNode children
@@ -272,21 +396,22 @@ const Select = <
     () =>
       normalizedOptions.map((option, index) => {
         if (option.type === "heading") {
-          return <ListSubheader key={option.text}>{option.text}</ListSubheader>;
+          return (
+            <ListSubheader key={option.text}> {option.text} </ListSubheader>
+          );
         }
+
+        const isSelected = hasMultipleChoices
+          ? internalSelectedValues?.includes(option.value)
+          : internalSelectedValues === option.value;
+
         return (
-          <MenuItem
+          <MuiMenuItem
             key={normalizedKey(option.text, index.toString())}
             value={option.value}
+            selected={isSelected}
           >
-            {hasMultipleChoices && (
-              <MuiCheckbox
-                checked={
-                  option.value !== undefined &&
-                  internalSelectedValues?.includes(option.value)
-                }
-              />
-            )}
+            {hasMultipleChoices && <MuiCheckbox checked={isSelected} />}
             {option.text}
             {!hasMultipleChoices &&
               (internalSelectedValues?.includes(option.value) ||
@@ -295,48 +420,65 @@ const Select = <
                   <CheckIcon />
                 </ListItemSecondaryAction>
               )}
-          </MenuItem>
+          </MuiMenuItem>
         );
       }),
-    [hasMultipleChoices, normalizedOptions, internalSelectedValues]
+    [hasMultipleChoices, normalizedOptions, internalSelectedValues],
+  );
+
+  const renderValue = useCallback(
+    (value: Value) =>
+      Array.isArray(value) && <Chips selection={value} isInteractive={false} />,
+    [Chips],
   );
 
   const renderFieldComponent = useCallback(
-    ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
-      <MuiSelect
-        {...inputValues}
-        aria-describedby={ariaDescribedBy}
-        aria-errormessage={errorMessageElementId}
-        children={children}
-        data-se={testId}
-        displayEmpty={
-          inputValues?.value === "" || inputValues?.defaultValue === ""
-        }
-        id={id}
-        inputProps={{ "data-se": testId }}
-        inputRef={localInputRef}
-        labelId={labelElementId}
-        multiple={hasMultipleChoices}
-        name={nameOverride ?? id}
-        onBlur={onBlur}
-        onChange={onChange}
-        onFocus={onFocus}
-        renderValue={hasMultipleChoices ? renderValue : undefined}
-        translate={translate}
-      />
+    ({
+      ariaDescribedBy,
+      errorMessageElementId,
+      id,
+      labelElementId,
+    }: SelectRenderProps) => (
+      <SelectContainer>
+        <MuiSelect
+          {...inputValues}
+          aria-describedby={ariaDescribedBy}
+          aria-errormessage={errorMessageElementId}
+          children={children}
+          id={id}
+          inputProps={{ "data-se": testId }}
+          inputRef={localInputRef}
+          labelId={labelElementId}
+          multiple={hasMultipleChoices}
+          name={nameOverride ?? id}
+          onBlur={onBlur}
+          onChange={onChange}
+          onFocus={onFocus}
+          renderValue={hasMultipleChoices ? renderValue : undefined}
+          translate={translate}
+        />
+        {hasMultipleChoices && Array.isArray(value) && (
+          <ChipsPositioningContainer odysseyDesignTokens={odysseyDesignTokens}>
+            <Chips selection={value} isInteractive={true} />
+          </ChipsPositioningContainer>
+        )}
+      </SelectContainer>
     ),
     [
       children,
+      Chips,
       inputValues,
       hasMultipleChoices,
       nameOverride,
+      odysseyDesignTokens,
       onBlur,
       onChange,
       onFocus,
       renderValue,
       testId,
       translate,
-    ]
+      value,
+    ],
   );
 
   return (

package/src/Status.tsx

@@ -10,6 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { memo } from "react";
 import { Chip } from "@mui/material";
 
 import { useMuiProps } from "./MuiPropsContext";
@@ -31,9 +32,9 @@ export type StatusProps = {
    * Determine the color and icon of the Status
    */
   severity: (typeof statusSeverityValues)[number];
-} & HtmlProps;
+} & Pick<HtmlProps, "testId" | "translate">;
 
-export const Status = ({ label, severity, testId, translate }: StatusProps) => {
+const Status = ({ label, severity, testId, translate }: StatusProps) => {
   const muiProps = useMuiProps();
 
   return (
@@ -47,3 +48,8 @@ export const Status = ({ label, severity, testId, translate }: StatusProps) => {
     />
   );
 };
+
+const MemoizedStatus = memo(Status);
+MemoizedStatus.displayName = "Status";
+
+export { MemoizedStatus as Status };