@okta/odyssey-react-mui 0.23.0 → 1.0.0

package/src/PasswordField.tsx

@@ -20,7 +20,8 @@ import {
   useState,
 } from "react";
 
-import { EyeIcon, EyeOffIcon, IconButton } from "./";
+import { ShowIcon, HideIcon } from "./icons.generated";
+import { Button } from "./Button";
 import { Field } from "./Field";
 
 export type PasswordFieldProps = {
@@ -121,13 +122,13 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
           autoFocus={hasInitialFocus}
           endAdornment={
             <InputAdornment position="end">
-              <IconButton
-                aria-label="toggle password visibility"
-                edge="end"
+              <Button
+                ariaLabel="toggle password visibility"
+                endIcon={inputType === "password" ? <ShowIcon /> : <HideIcon />}
                 onClick={togglePasswordVisibility}
-              >
-                {inputType === "password" ? <EyeIcon /> : <EyeOffIcon />}
-              </IconButton>
+                size="small"
+                variant="floating"
+              />
             </InputAdornment>
           }
           id={id}
@@ -176,5 +177,6 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
 );
 
 const MemoizedPasswordField = memo(PasswordField);
+MemoizedPasswordField.displayName = "PasswordField";
 
 export { MemoizedPasswordField as PasswordField };

package/src/Radio.tsx

@@ -13,32 +13,47 @@
 import { Radio as MuiRadio } from "@mui/material";
 import { memo } from "react";
 
-import { FormControlLabel } from ".";
+import { FormControlLabel } from "@mui/material";
 
 export type RadioProps = {
+  /**
+   * If `true`, the Radio is selected
+   */
   isChecked?: boolean;
-  isDefaultChecked?: boolean;
+  /**
+   * If `true`, the Radio is disabled
+   */
   isDisabled?: boolean;
-  hasError?: boolean;
+  /**
+   * If `true`, the Radio has an invalid value
+   */
+  isInvalid?: boolean;
+  /**
+   * The label text for the Radio
+   */
   label: string;
+  /**
+   * The name attribute of the Radio
+   */
   name?: string;
+  /**
+   * The value attribute of the Radio
+   */
   value: string;
 };
 
 const Radio = ({
   isChecked,
-  isDefaultChecked,
   isDisabled,
-  hasError,
+  isInvalid,
   label,
   name,
   value,
 }: RadioProps) => (
   <FormControlLabel
     checked={isChecked}
-    className={hasError ? "Mui-error" : ""}
+    className={isInvalid ? "Mui-error" : ""}
     control={<MuiRadio />}
-    defaultChecked={isDefaultChecked}
     disabled={isDisabled}
     label={label}
     name={name}
@@ -47,5 +62,6 @@ const Radio = ({
 );
 
 const MemoizedRadio = memo(Radio);
+MemoizedRadio.displayName = "Radio";
 
 export { MemoizedRadio as Radio };

package/src/RadioGroup.tsx

@@ -18,15 +18,15 @@ import { Field } from "./Field";
 
 export type RadioGroupProps = {
   /**
-   * The <Radio> components within the group. Must include two or more.
+   * The Radio components within the group. Must include two or more.
    */
   children: Array<ReactElement<typeof Radio>>;
   /**
-   * The text value of the radio that should be selected by default
+   * The text value of the Radio that should be selected by default
    */
   defaultValue?: string;
   /**
-   * The error text for an invalid group
+   * The error text for an invalid RadioGroup
    */
   errorMessage?: string;
   /**
@@ -38,19 +38,19 @@ export type RadioGroupProps = {
    */
   id?: string;
   /**
-   * Disables the whole radio group
+   * Disables the whole RadioGroup
    */
   isDisabled?: boolean;
   /**
-   * The text label for the radio group
+   * The text label for the RadioGroup
    */
   label: string;
   /**
-   * Listen for changes in the browser that change `value`.
+   * Listen for changes in the browser that change `value`
    */
   onChange?: ChangeEventHandler<EventTarget>;
   /**
-   * The `value` on the selected radio button.
+   * The `value` on the selected Radio
    */
   value?: RadioProps["value"];
 };
@@ -97,5 +97,6 @@ const RadioGroup = ({
 };
 
 const MemoizedRadioGroup = memo(RadioGroup);
+MemoizedRadioGroup.displayName = "RadioGroup";
 
 export { MemoizedRadioGroup as RadioGroup };

package/src/ScreenReaderText.tsx

@@ -11,7 +11,8 @@
  */
 
 import { memo, ReactNode } from "react";
-import { Box, visuallyHidden } from "./";
+import { Box } from "@mui/material";
+import { visuallyHidden } from "@mui/utils";
 
 export type ScreenReaderTextProps = {
   /**
@@ -28,9 +29,12 @@ export type ScreenReaderTextProps = {
 const style = { ...visuallyHidden };
 
 const ScreenReaderText = ({ children }: ScreenReaderTextProps) => (
-  <Box sx={style}>{children}</Box>
+  <Box sx={style} component="span">
+    {children}
+  </Box>
 );
 
 const MemoizedScreenReaderText = memo(ScreenReaderText);
+MemoizedScreenReaderText.displayName = "ScreenReaderText";
 
 export { MemoizedScreenReaderText as ScreenReaderText };

package/src/SearchField.tsx

@@ -10,6 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { useState, useEffect } from "react";
 import { InputAdornment, InputBase } from "@mui/material";
 import {
   ChangeEventHandler,
@@ -20,8 +21,9 @@ import {
   useCallback,
 } from "react";
 
-import { SearchIcon } from "./";
+import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated";
 import { Field } from "./Field";
+import { Button } from "./Button";
 
 export type SearchFieldProps = {
   /**
@@ -50,6 +52,10 @@ export type SearchFieldProps = {
    * Callback fired when the `input` element loses focus.
    */
   onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  /**
+   * Callback fired when the clear button is pressed.
+   */
+  onClear?: () => void;
   /**
    * Callback fired when the value is changed.
    */
@@ -76,14 +82,37 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       id: idOverride,
       isDisabled = false,
       label,
-      onChange,
+      onChange: onChangeProp,
       onFocus,
       onBlur,
+      onClear: onClearProp,
       placeholder,
-      value,
+      value: controlledValue,
     },
     ref
   ) => {
+    const [uncontrolledValue, setUncontrolledValue] = useState("");
+
+    const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =
+      useCallback(
+        (event) => {
+          setUncontrolledValue(event.currentTarget.value);
+          onChangeProp?.(event);
+        },
+        [onChangeProp]
+      );
+
+    const onClear = useCallback(() => {
+      setUncontrolledValue("");
+      onClearProp?.();
+    }, [onClearProp]);
+
+    useEffect(() => {
+      if (controlledValue !== undefined) {
+        setUncontrolledValue(controlledValue);
+      }
+    }, [controlledValue]);
+
     const renderFieldComponent = useCallback(
       ({ ariaDescribedBy, id }) => (
         <InputBase
@@ -91,6 +120,21 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
           autoComplete={autoCompleteType}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
           autoFocus={hasInitialFocus}
+          endAdornment={
+            uncontrolledValue && (
+              <InputAdornment position="end">
+                <Button
+                  ariaLabel="Clear"
+                  isDisabled={isDisabled}
+                  label=""
+                  onClick={onClear}
+                  size="small"
+                  startIcon={<CloseCircleFilledIcon />}
+                  variant="floating"
+                />
+              </InputAdornment>
+            )
+          }
           id={id}
           name={id}
           onChange={onChange}
@@ -104,18 +148,23 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
             </InputAdornment>
           }
           type="search"
-          value={value}
+          value={
+            controlledValue === undefined ? uncontrolledValue : controlledValue
+          }
         />
       ),
       [
         autoCompleteType,
         hasInitialFocus,
+        isDisabled,
+        onClear,
         onChange,
         onFocus,
         onBlur,
         placeholder,
         ref,
-        value,
+        controlledValue,
+        uncontrolledValue,
       ]
     );
 
@@ -134,5 +183,6 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
 );
 
 const MemoizedSearchField = memo(SearchField);
+MemoizedSearchField.displayName = "SearchField";
 
 export { MemoizedSearchField as SearchField };

package/src/Select.tsx

@@ -0,0 +1,264 @@
+/*!
+ * Copyright (c) 2022-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 { ReactNode, forwardRef, memo, useCallback, useState } from "react";
+import {
+  Box,
+  Chip,
+  ListSubheader,
+  MenuItem,
+  Select as MuiSelect,
+  SelectChangeEvent,
+} from "@mui/material";
+import { SelectProps as MuiSelectProps } from "@mui/material";
+import { Checkbox } from "./Checkbox";
+import { Field } from "./Field";
+
+export type SelectOption = {
+  text: string;
+  type?: "heading" | "option";
+  value?: string;
+};
+
+export type SelectProps = {
+  /**
+   * The error message for the Select
+   */
+  errorMessage?: string;
+  /**
+   * The hint text for the Select
+   */
+  hint?: string;
+  /**
+   * The id attribute of the Select
+   */
+  id?: string;
+  /**
+   * If `true`, the Select is disabled
+   */
+  isDisabled?: boolean;
+  /**
+   * If `true`, the Select allows multiple selections
+   */
+  isMultiSelect?: boolean;
+  /**
+   * If `true`, the Select is optional
+   */
+  isOptional?: boolean;
+  /**
+   * The label text for the Select
+   */
+  label: string;
+  /**
+   * Callback fired when the Select loses focus
+   */
+  onBlur?: MuiSelectProps["onBlur"];
+  /**
+   * Callback fired when the value of the Select changes
+   */
+  onChange?: MuiSelectProps["onChange"];
+  /**
+   * Callback fired when the Select gains focus
+   */
+  onFocus?: MuiSelectProps["onFocus"];
+  /**
+   * The options for the Select
+   */
+  options: (string | SelectOption)[];
+  /**
+   * The value or values selected in the Select
+   */
+  value?: string | string[];
+};
+
+/**
+ * Options in Odyssey <Select> are passed as an array, which can contain any combination
+ * of the following:
+ *   - string —                            A simple string. The string will be both the text and the value of the resulting option.
+ *                                         <option value="string">string</option>
+ *
+ *   - { text: string } —                  Same as above, but the string is contained within an object.
+ *                                         <option value="text">text</option>
+ *
+ *   - { text: string, value: string } —   The option text will be text, and the option value will be value.
+ *                                         <option value="value">text</option>
+ *
+ *   - { 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;
+
+        // 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);
+        }
+
+        // Trigger the onChange event, if one has been passed
+        if (onChangeProp) {
+          onChangeProp(event, child);
+        }
+      },
+      [isMultiSelect, onChangeProp, setSelectedValue]
+    );
+
+    // 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",
+        };
+      }
+
+      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
+            );
+
+            if (!selectedOption) {
+              return null;
+            }
+
+            return <Chip key={item} label={selectedOption.text} />;
+          })
+          .filter(Boolean);
+
+        if (renderedChips.length === 0) {
+          return null;
+        }
+
+        // We need the <Box> to surround the <Chip>s for
+        // proper styling
+        return <Box>{renderedChips}</Box>;
+      },
+      [normalizedOptions]
+    );
+
+    // 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>;
+      }
+
+      return (
+        <MenuItem key={option.value} value={option.value}>
+          {isMultiSelect && (
+            <Checkbox isDefaultChecked={selectedValue.includes(option.value)} />
+          )}
+          {option.text}
+        </MenuItem>
+      );
+    });
+
+    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,
+      ]
+    );
+
+    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";
+
+export { MemoizedSelect as Select };

package/src/Status.tsx

@@ -10,20 +10,37 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Chip } from "./";
+import { Chip } from "@mui/material";
+
+import { useMuiProps } from "./MuiPropsContext";
+
+export const statusSeverityValues = [
+  "default",
+  "error",
+  "success",
+  "warning",
+] as const;
+export const statusVariantValues = ["lamp", "pill"] as const;
 
 export type StatusProps = {
   /**
-   * Determine the color and icon of the alert
+   * The text content of the Status
    */
-  severity: "default" | "error" | "info" | "success" | "warning";
-
+  label: string;
   /**
-   * The text content of the status
+   * Determine the color and icon of the Status
    */
-  label: string;
+  severity: (typeof statusSeverityValues)[number];
+  /**
+   * The style of the Status indicator
+   */
+  variant?: (typeof statusVariantValues)[number];
 };
 
-export const Status = ({ severity, label }: StatusProps) => (
-  <Chip label={label} color={severity} variant="status" />
-);
+export const Status = ({ severity, label, variant = "lamp" }: StatusProps) => {
+  const muiProps = useMuiProps();
+
+  return (
+    <Chip {...muiProps} label={label} color={severity} variant={variant} />
+  );
+};

package/src/SvgIcon.ts

@@ -0,0 +1,23 @@
+/*!
+ * Copyright (c) 2022-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 type { SvgIconProps } from "./SvgIcon";
+
+export interface SvgIconNoChildrenProps extends Omit<SvgIconProps, "children"> {
+  /**
+   * Children are never rendered.
+   */
+  children?: never;
+}
+
+export { default as SvgIcon } from "@mui/material/SvgIcon";
+export * from "@mui/material/SvgIcon";