@okta/odyssey-react-mui 0.22.0 → 0.24.0

package/src/PasswordField.tsx

@@ -24,10 +24,6 @@ import { EyeIcon, EyeOffIcon, IconButton } from "./";
 import { Field } from "./Field";
 
 export type PasswordFieldProps = {
-  /**
-   * If `true`, the component will receive focus automatically.
-   */
-  autoFocus?: boolean;
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
    * The name can be confusing, as it's more like an autofill.
@@ -38,6 +34,10 @@ export type PasswordFieldProps = {
    * If `error` is not undefined, the `input` will indicate an error.
    */
   errorMessage?: string;
+  /**
+   * If `true`, the component will receive focus automatically.
+   */
+  hasInitialFocus?: boolean;
   /**
    * The helper text content.
    */
@@ -51,13 +51,13 @@ export type PasswordFieldProps = {
    */
   isDisabled?: boolean;
   /**
-   * It prevents the user from changing the value of the field
+   * If `true`, the `input` element is not required.
    */
-  isReadOnly?: boolean;
+  isOptional?: boolean;
   /**
-   * If `true`, the `input` element is required.
+   * It prevents the user from changing the value of the field
    */
-  isRequired?: boolean;
+  isReadOnly?: boolean;
   /**
    * The label for the `input` element.
    */
@@ -88,11 +88,12 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
   (
     {
       autoCompleteType,
-      autoFocus,
       errorMessage,
+      hasInitialFocus,
       hint,
       id: idOverride,
       isDisabled = false,
+      isOptional = false,
       isReadOnly,
       label,
       onChange,
@@ -117,7 +118,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
           aria-describedby={ariaDescribedBy}
           autoComplete={autoCompleteType}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
-          autoFocus={autoFocus}
+          autoFocus={hasInitialFocus}
           endAdornment={
             <InputAdornment position="end">
               <IconButton
@@ -130,25 +131,28 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
             </InputAdornment>
           }
           id={id}
+          name={id}
           onChange={onChange}
           onFocus={onFocus}
           onBlur={onBlur}
           placeholder={placeholder}
           readOnly={isReadOnly}
           ref={ref}
+          required={!isOptional}
           type={inputType}
           value={value}
         />
       ),
       [
         autoCompleteType,
-        autoFocus,
+        hasInitialFocus,
         togglePasswordVisibility,
         inputType,
         onChange,
         onFocus,
         onBlur,
         placeholder,
+        isOptional,
         isReadOnly,
         ref,
         value,
@@ -158,10 +162,12 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
     return (
       <Field
         errorMessage={errorMessage}
+        fieldType="single"
         hasVisibleLabel
         hint={hint}
         id={idOverride}
         isDisabled={isDisabled}
+        isOptional={isOptional}
         label={label}
         renderFieldComponent={renderFieldComponent}
       />
@@ -170,5 +176,6 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
 );
 
 const MemoizedPasswordField = memo(PasswordField);
+MemoizedPasswordField.displayName = "PasswordField";
 
 export { MemoizedPasswordField as PasswordField };

package/src/RadioGroup.tsx

@@ -11,19 +11,12 @@
  */
 
 import { RadioGroup as MuiRadioGroup } from "@mui/material";
-import { ChangeEventHandler, memo, ReactElement, useMemo } from "react";
+import { ChangeEventHandler, memo, ReactElement, useCallback } from "react";
 
-import {
-  FormControl,
-  FormLabel,
-  FormHelperText,
-  Radio,
-  ScreenReaderText,
-  useUniqueId,
-  RadioProps,
-} from ".";
+import { Radio, RadioProps } from "./Radio";
+import { Field } from "./Field";
 
-export interface RadioGroupProps {
+export type RadioGroupProps = {
   /**
    * The <Radio> components within the group. Must include two or more.
    */
@@ -40,6 +33,10 @@ export interface RadioGroupProps {
    * Optional hint text
    */
   hint?: string;
+  /**
+   * The id of the `input` element. This will also be the input's `name` field.
+   */
+  id?: string;
   /**
    * Disables the whole radio group
    */
@@ -48,10 +45,6 @@ export interface RadioGroupProps {
    * The text label for the radio group
    */
   label: string;
-  /**
-   * The name of the radio group, which only needs to be changed if there are multiple radio groups on the same screen
-   */
-  name?: string;
   /**
    * Listen for changes in the browser that change `value`.
    */
@@ -60,54 +53,46 @@ export interface RadioGroupProps {
    * The `value` on the selected radio button.
    */
   value?: RadioProps["value"];
-}
+};
 
 const RadioGroup = ({
   children,
   defaultValue,
   errorMessage,
   hint,
+  id: idOverride,
   isDisabled,
   label,
-  name,
   onChange,
+  value,
 }: RadioGroupProps) => {
-  const ariaDescribedBy = useMemo(
-    () =>
-      errorMessage || hint
-        ? [hint && `${name}-hint`, errorMessage && `${name}-error`]
-            .filter(Boolean)
-            .join(" ")
-        : undefined,
-    [errorMessage, hint, name]
-  );
-
-  const uniqueName = useUniqueId(name);
-
-  return (
-    <FormControl
-      component="fieldset"
-      disabled={isDisabled}
-      error={Boolean(errorMessage)}
-    >
-      <FormLabel component="legend">{label}</FormLabel>
-      {hint && (
-        <FormHelperText id={`${uniqueName}-hint`}>{hint}</FormHelperText>
-      )}
+  const renderFieldComponent = useCallback(
+    ({ ariaDescribedBy, id }) => (
       <MuiRadioGroup
         aria-describedby={ariaDescribedBy}
         defaultValue={defaultValue}
-        name={uniqueName}
+        id={id}
+        name={id}
         onChange={onChange}
+        value={value}
       >
         {children}
       </MuiRadioGroup>
-      {errorMessage && (
-        <FormHelperText id={`${uniqueName}-error`} error>
-          <ScreenReaderText>Error:</ScreenReaderText> {errorMessage}
-        </FormHelperText>
-      )}
-    </FormControl>
+    ),
+    [children, defaultValue, onChange, value]
+  );
+
+  return (
+    <Field
+      errorMessage={errorMessage}
+      fieldType="group"
+      hasVisibleLabel={false}
+      hint={hint}
+      id={idOverride}
+      isDisabled={isDisabled}
+      label={label}
+      renderFieldComponent={renderFieldComponent}
+    />
   );
 };
 

package/src/SearchField.tsx

@@ -24,16 +24,16 @@ import { SearchIcon } from "./";
 import { Field } from "./Field";
 
 export type SearchFieldProps = {
-  /**
-   * If `true`, the component will receive focus automatically.
-   */
-  autoFocus?: boolean;
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
    * The name can be confusing, as it's more like an autofill.
    * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
    */
   autoCompleteType?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
+  /**
+   * If `true`, the component will receive focus automatically.
+   */
+  hasInitialFocus?: boolean;
   /**
    * The id of the `input` element.
    */
@@ -72,7 +72,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
   (
     {
       autoCompleteType,
-      autoFocus,
+      hasInitialFocus,
       id: idOverride,
       isDisabled = false,
       label,
@@ -90,8 +90,9 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
           aria-describedby={ariaDescribedBy}
           autoComplete={autoCompleteType}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
-          autoFocus={autoFocus}
+          autoFocus={hasInitialFocus}
           id={id}
+          name={id}
           onChange={onChange}
           onFocus={onFocus}
           onBlur={onBlur}
@@ -108,7 +109,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       ),
       [
         autoCompleteType,
-        autoFocus,
+        hasInitialFocus,
         onChange,
         onFocus,
         onBlur,
@@ -120,10 +121,11 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
 
     return (
       <Field
+        fieldType="single"
         hasVisibleLabel={false}
         id={idOverride}
         isDisabled={isDisabled}
-        isRequired={false}
+        isOptional={true}
         label={label}
         renderFieldComponent={renderFieldComponent}
       />

package/src/Select.tsx

@@ -0,0 +1,226 @@
+/*!
+ * 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;
+  value?: string;
+  type?: "heading" | "option";
+};
+
+export type SelectProps = {
+  errorMessage?: string;
+  hint?: string;
+  id?: string;
+  isDisabled?: boolean;
+  isMultiSelect?: boolean;
+  isOptional?: boolean;
+  label: string;
+  onBlur?: MuiSelectProps["onBlur"];
+  onChange?: MuiSelectProps["onChange"];
+  onFocus?: MuiSelectProps["onFocus"];
+  options: (string | SelectOption)[];
+  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 isChecked={selectedValue.includes(option.value)} />
+          )}
+          {option.text}
+        </MenuItem>
+      );
+    });
+
+    const renderFieldComponent = useCallback(
+      () => (
+        <MuiSelect
+          id={idOverride}
+          name={idOverride}
+          multiple={isMultiSelect}
+          onBlur={onBlur}
+          onChange={onChange}
+          onFocus={onFocus}
+          ref={ref}
+          children={children}
+          renderValue={isMultiSelect ? renderValue : undefined}
+          value={selectedValue}
+        />
+      ),
+      [
+        idOverride,
+        isMultiSelect,
+        onBlur,
+        onChange,
+        onFocus,
+        ref,
+        children,
+        renderValue,
+        selectedValue,
+      ]
+    );
+
+    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

@@ -12,7 +12,7 @@
 
 import { Chip } from "./";
 
-export interface StatusProps {
+export type StatusProps = {
   /**
    * Determine the color and icon of the alert
    */
@@ -22,7 +22,7 @@ export interface StatusProps {
    * The text content of the status
    */
   label: string;
-}
+};
 
 export const Status = ({ severity, label }: StatusProps) => (
   <Chip label={label} color={severity} variant="status" />

package/src/Tabs.tsx

@@ -0,0 +1,70 @@
+/*!
+ * 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 React, { ReactElement, ReactNode, useCallback, useState } from "react";
+import { Tab as MuiTab } from "@mui/material";
+import {
+  TabList as MuiTabList,
+  TabPanel as MuiTabPanel,
+  TabContext as MuiTabContext,
+} from "@mui/lab";
+
+export type TabItemProps = {
+  children: ReactNode;
+  startIcon?: ReactElement;
+  label: string;
+  isDisabled?: boolean;
+  value?: string;
+};
+
+export type TabsProps = {
+  tabs: TabItemProps[];
+  initialValue?: string;
+  ariaLabel?: string;
+};
+
+const Tabs = ({ ariaLabel, tabs, initialValue = "0" }: TabsProps) => {
+  const [tabState, setTabState] = useState(initialValue);
+
+  const onChange = useCallback(
+    (_event: React.SyntheticEvent, newState: string) => {
+      setTabState(newState);
+    },
+    []
+  );
+
+  return (
+    <MuiTabContext value={tabState}>
+      <MuiTabList onChange={onChange} aria-label={ariaLabel}>
+        {tabs.map((tab, index) => (
+          <MuiTab
+            disabled={tab.isDisabled}
+            icon={tab.startIcon}
+            label={tab.label}
+            value={tab.value ? tab.value : index.toString()}
+            key={tab.value ? tab.value : index.toString()}
+          />
+        ))}
+      </MuiTabList>
+      {tabs.map((tab, index) => (
+        <MuiTabPanel
+          value={tab.value ? tab.value : index.toString()}
+          key={tab.value ? tab.value : index.toString()}
+        >
+          {tab.children}
+        </MuiTabPanel>
+      ))}
+    </MuiTabContext>
+  );
+};
+
+export { Tabs };