@okta/odyssey-react-mui 0.21.4 → 0.22.0

package/src/SearchField.tsx

@@ -0,0 +1,136 @@
+/*!
+ * 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 { InputAdornment, InputBase } from "@mui/material";
+import {
+  ChangeEventHandler,
+  FocusEventHandler,
+  forwardRef,
+  InputHTMLAttributes,
+  memo,
+  useCallback,
+} from "react";
+
+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"];
+  /**
+   * The id of the `input` element.
+   */
+  id?: string;
+  /**
+   * If `true`, the component is disabled.
+   */
+  isDisabled?: boolean;
+  /**
+   * This label won't show up visually, but it's required for accessibility.
+   */
+  label: string;
+  /**
+   * Callback fired when the `input` element loses focus.
+   */
+  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  /**
+   * Callback fired when the value is changed.
+   */
+  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
+  /**
+   * Callback fired when the `input` element get focus.
+   */
+  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  /**
+   * The short hint displayed in the `input` before the user enters a value.
+   */
+  placeholder?: string;
+  /**
+   * The value of the `input` element, required for a controlled component.
+   */
+  value?: string;
+};
+
+const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
+  (
+    {
+      autoCompleteType,
+      autoFocus,
+      id: idOverride,
+      isDisabled = false,
+      label,
+      onChange,
+      onFocus,
+      onBlur,
+      placeholder,
+      value,
+    },
+    ref
+  ) => {
+    const renderFieldComponent = useCallback(
+      ({ ariaDescribedBy, id }) => (
+        <InputBase
+          aria-describedby={ariaDescribedBy}
+          autoComplete={autoCompleteType}
+          /* eslint-disable-next-line jsx-a11y/no-autofocus */
+          autoFocus={autoFocus}
+          id={id}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          placeholder={placeholder}
+          ref={ref}
+          startAdornment={
+            <InputAdornment position="start">
+              <SearchIcon />
+            </InputAdornment>
+          }
+          type="search"
+          value={value}
+        />
+      ),
+      [
+        autoCompleteType,
+        autoFocus,
+        onChange,
+        onFocus,
+        onBlur,
+        placeholder,
+        ref,
+        value,
+      ]
+    );
+
+    return (
+      <Field
+        hasVisibleLabel={false}
+        id={idOverride}
+        isDisabled={isDisabled}
+        isRequired={false}
+        label={label}
+        renderFieldComponent={renderFieldComponent}
+      />
+    );
+  }
+);
+
+const MemoizedSearchField = memo(SearchField);
+
+export { MemoizedSearchField as SearchField };

package/src/Tag.tsx

@@ -0,0 +1,41 @@
+/*!
+ * 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 { Chip, ChipProps } from "@mui/material";
+import { memo, useContext } from "react";
+import { TagListContext } from "./TagListContext";
+
+export type TagProps = {
+  isDisabled?: boolean;
+  label: string;
+  onClick?: ChipProps["onClick"];
+  onRemove?: ChipProps["onDelete"];
+};
+
+const Tag = ({ isDisabled, label, onClick, onRemove }: TagProps) => {
+  const { chipElementType } = useContext(TagListContext);
+
+  return (
+    <Chip
+      label={label}
+      clickable={onClick ? true : false}
+      component={chipElementType}
+      disabled={isDisabled}
+      onClick={onClick}
+      onDelete={onRemove}
+    />
+  );
+};
+
+const MemoizedTag = memo(Tag);
+
+export { MemoizedTag as Tag };

package/src/TagList.tsx

@@ -0,0 +1,43 @@
+/*!
+ * 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 { Tag } from "./";
+import { Stack } from "@mui/material";
+import { memo, ReactElement, useMemo } from "react";
+import { ChipElementType, TagListContext } from "./TagListContext";
+
+export type TagListProps = {
+  children: ReactElement<typeof Tag> | Array<ReactElement<typeof Tag>>;
+};
+
+const TagList = ({ children }: TagListProps) => {
+  const providerValue = useMemo<{
+    chipElementType: ChipElementType;
+  }>(
+    () => ({
+      chipElementType: "li",
+    }),
+    []
+  );
+
+  return (
+    <Stack component="ul" direction="row" spacing={2}>
+      <TagListContext.Provider value={providerValue}>
+        {children}
+      </TagListContext.Provider>
+    </Stack>
+  );
+};
+
+const MemoizedTagList = memo(TagList);
+
+export { MemoizedTagList as TagList };

package/src/TagListContext.tsx

@@ -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 { createContext } from "react";
+
+export type ChipElementType = "li" | "div";
+
+export type TagListContextType = {
+  chipElementType: ChipElementType;
+};
+
+export const TagListContext = createContext<TagListContextType>({
+  chipElementType: "div",
+});

package/src/TextField.tsx

@@ -10,12 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import {
-  InputAdornment,
-  InputBase,
-  InputBaseProps,
-  InputLabel,
-} from "@mui/material";
+import { InputBase } from "@mui/material";
 import {
   ChangeEventHandler,
   FocusEventHandler,
@@ -24,22 +19,9 @@ import {
   memo,
   ReactNode,
   useCallback,
-  useEffect,
-  useMemo,
-  useState,
 } from "react";
 
-import {
-  EyeIcon,
-  EyeOffIcon,
-  FormControl,
-  FormHelperText,
-  IconButton,
-  SearchIcon,
-  Typography,
-  useUniqueId,
-  ScreenReaderText,
-} from "./";
+import { Field } from "./Field";
 
 export type TextFieldProps = {
   /**
@@ -68,10 +50,6 @@ export type TextFieldProps = {
    * The id of the `input` element.
    */
   id?: string;
-  /**
-   * Props that go onto the HTML `input` element.
-   */
-  inputProps?: InputBaseProps["inputProps"];
   /**
    * If `true`, the component is disabled.
    */
@@ -91,7 +69,7 @@ export type TextFieldProps = {
   /**
    * The label for the `input` element.
    */
-  label?: string;
+  label: string;
   /**
    * Callback fired when the `input` element loses focus.
    */
@@ -119,11 +97,11 @@ export type TextFieldProps = {
   /**
    * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
    */
-  type?: string;
+  type?: "email" | "number" | "tel" | "text" | "url";
   /**
    * The value of the `input` element, required for a controlled component.
    */
-  value?: unknown;
+  value?: string;
 };
 
 const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
@@ -135,15 +113,14 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       errorMessage,
       hint,
       id: idOverride,
-      inputProps = {},
       isDisabled = false,
       isMultiline = false,
       isReadOnly,
       isRequired = true,
       label,
+      onBlur,
       onChange,
       onFocus,
-      onBlur,
       optionalLabel,
       placeholder,
       startAdornment,
@@ -152,91 +129,56 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
     },
     ref
   ) => {
-    const [inputType, setInputType] = useState(type);
-
-    useEffect(() => {
-      setInputType(type);
-    }, [type]);
-
-    const togglePasswordVisibility = useCallback(() => {
-      setInputType((currentType) =>
-        currentType === "password" ? "text" : "password"
-      );
-    }, []);
-
-    const id = useUniqueId(idOverride);
-    const hintId = hint ? `${id}-hint` : undefined;
-    const errorId = errorMessage ? `${id}-error` : undefined;
-    const labelId = label ? `${id}-label` : undefined;
-
-    const localInputProps = useMemo(() => {
-      const ariaDescribedBy =
-        errorId && hintId ? `${hintId} ${errorId}` : errorId || hintId;
-
-      return {
-        ...inputProps,
-        "aria-describedby":
-          inputProps["aria-describedby"]?.concat(` ${ariaDescribedBy}`) ??
-          ariaDescribedBy,
-      };
-    }, [errorId, hintId, inputProps]);
-
-    return (
-      <FormControl disabled={isDisabled} error={Boolean(errorMessage)}>
-        <InputLabel htmlFor={id} id={labelId}>
-          {label}
-          {!isRequired && (
-            <Typography variant="subtitle1">{optionalLabel}</Typography>
-          )}
-        </InputLabel>
-        {hint && <FormHelperText id={hintId}>{hint}</FormHelperText>}
+    const renderFieldComponent = useCallback(
+      ({ ariaDescribedBy, id }) => (
         <InputBase
+          aria-describedby={ariaDescribedBy}
           autoComplete={autoCompleteType}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
           autoFocus={autoFocus}
-          endAdornment={
-            type === "password" ? (
-              <InputAdornment position="end">
-                <IconButton
-                  aria-label="toggle password visibility"
-                  edge="end"
-                  onClick={togglePasswordVisibility}
-                >
-                  {inputType === "password" ? <EyeIcon /> : <EyeOffIcon />}
-                </IconButton>
-              </InputAdornment>
-            ) : (
-              endAdornment
-            )
-          }
+          endAdornment={endAdornment}
           id={id}
-          inputProps={localInputProps}
           multiline={isMultiline}
+          onBlur={onBlur}
           onChange={onChange}
           onFocus={onFocus}
-          onBlur={onBlur}
           placeholder={placeholder}
           readOnly={isReadOnly}
           ref={ref}
-          startAdornment={
-            inputType === "search" ? (
-              <InputAdornment position="start">
-                <SearchIcon />
-              </InputAdornment>
-            ) : (
-              startAdornment
-            )
-          }
-          type={inputType}
+          startAdornment={startAdornment}
+          type={type}
           value={value}
         />
-        {errorMessage && (
-          <FormHelperText error id={errorId}>
-            <ScreenReaderText>Error:</ScreenReaderText>
-            {errorMessage}
-          </FormHelperText>
-        )}
-      </FormControl>
+      ),
+      [
+        autoCompleteType,
+        autoFocus,
+        endAdornment,
+        isMultiline,
+        onChange,
+        onFocus,
+        onBlur,
+        placeholder,
+        isReadOnly,
+        ref,
+        startAdornment,
+        type,
+        value,
+      ]
+    );
+
+    return (
+      <Field
+        errorMessage={errorMessage}
+        hasVisibleLabel
+        hint={hint}
+        id={idOverride}
+        isDisabled={isDisabled}
+        isRequired={isRequired}
+        label={label}
+        optionalLabel={optionalLabel}
+        renderFieldComponent={renderFieldComponent}
+      />
     );
   }
 );

package/src/index.ts

@@ -14,7 +14,6 @@ export {
   Alert,
   AlertTitle,
   Box,
-  Button,
   Chip,
   createTheme,
   CssBaseline,
@@ -66,7 +65,6 @@ export type {
   AlertProps,
   AlertTitleProps,
   BoxProps,
-  ButtonProps,
   ChipProps,
   CssBaselineProps,
   DialogProps,
@@ -122,11 +120,16 @@ export { default as FavoriteIcon } from "@mui/icons-material/Favorite";
 
 export { deepmerge, visuallyHidden } from "@mui/utils";
 
+export * from "./Autocomplete";
 export * from "./Banner";
+export * from "./Button";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./CircularProgress";
 export * from "./createUniqueId";
+export * from "./FieldError";
+export * from "./FieldHint";
+export * from "./FieldLabel";
 export * from "./Icon";
 export * from "./iconDictionary";
 export * from "./Infobox";
@@ -135,11 +138,14 @@ export * from "./MenuButton";
 export * from "./MenuItem";
 export * from "./OdysseyCacheProvider";
 export * from "./OdysseyThemeProvider";
-export * from "./PasswordInput";
+export * from "./PasswordField";
 export * from "./Radio";
 export * from "./RadioGroup";
 export * from "./ScreenReaderText";
+export * from "./SearchField";
 export * from "./Status";
+export * from "./Tag";
+export * from "./TagList";
 export * from "./TextField";
 export * from "./theme";
 export * from "./ThemeProvider";

package/src/theme/components.tsx

@@ -36,6 +36,7 @@ import {
   CheckCircleFilledIcon,
   ChevronDownIcon,
   CloseCircleFilledIcon,
+  CloseIcon,
   InformationCircleFilledIcon,
   SubtractIcon,
 } from "../iconDictionary";
@@ -144,6 +145,68 @@ export const components: ThemeOptions["components"] = {
       }),
     },
   },
+  MuiAutocomplete: {
+    defaultProps: {
+      autoHighlight: true,
+      autoSelect: false,
+      blurOnSelect: false,
+      clearIcon: <CloseIcon />,
+      clearOnEscape: true,
+      disableClearable: false,
+      disabledItemsFocusable: false,
+      disableListWrap: false,
+      disablePortal: false,
+      filterSelectedOptions: false,
+      fullWidth: false,
+      handleHomeEndKeys: true,
+      includeInputInList: true,
+      limitTags: -1,
+      openOnFocus: false,
+      popupIcon: <ChevronDownIcon />,
+      selectOnFocus: true,
+    },
+    styleOverrides: {
+      clearIndicator: ({ theme }) => ({
+        marginRight: "unset",
+        padding: theme.spacing(1),
+      }),
+      endAdornment: ({ theme, ownerState }) => ({
+        display: "flex",
+        gap: theme.spacing(1),
+        top: `calc(${theme.spacing(2)} - ${theme.mixins.borderWidth})`,
+        right: theme.spacing(2),
+        maxHeight: "unset",
+        alignItems: "center",
+        whiteSpace: "nowrap",
+        color: theme.palette.action.active,
+
+        ...(ownerState.disabled === true && {
+          display: "none",
+        }),
+
+        ...(ownerState.readOnly === true && {
+          display: "none",
+        }),
+      }),
+      loading: ({ theme }) => ({
+        paddingBlock: theme.spacing(3),
+        paddingInline: theme.spacing(4),
+      }),
+      popupIndicator: ({ theme }) => ({
+        padding: theme.spacing(1),
+        marginRight: "unset",
+      }),
+      inputRoot: ({ theme, ownerState }) => ({
+        ...(ownerState.readOnly === true && {
+          backgroundColor: theme.palette.grey[50],
+
+          [`&:not(:hover)`]: {
+            borderColor: "transparent",
+          },
+        }),
+      }),
+    },
+  },
   MuiBackdrop: {
     styleOverrides: {
       root: ({ ownerState }) => ({
@@ -255,7 +318,7 @@ export const components: ThemeOptions["components"] = {
         }),
       },
       {
-        props: { size: "s" },
+        props: { size: "small" },
         style: ({ theme }) => ({
           paddingBlock: `calc(${theme.spacing(2)} - 1px)`,
           paddingInline: `calc(${theme.spacing(2)} - 1px)`,
@@ -263,7 +326,7 @@ export const components: ThemeOptions["components"] = {
         }),
       },
       {
-        props: { size: "l" },
+        props: { size: "large" },
         style: ({ theme }) => ({
           paddingBlock: `calc(${theme.spacing(4)} - 1px)`,
           paddingInline: `calc(${theme.spacing(4)} - 1px)`,
@@ -468,19 +531,6 @@ export const components: ThemeOptions["components"] = {
           paddingInlineEnd: theme.spacing(2),
         }),
 
-        [`& .${chipClasses.deleteIcon}`]: {
-          WebkitTapHighlightColor: "transparent",
-          color: theme.palette.text.secondary,
-          fontSize: "1em",
-          cursor: "pointer",
-          margin: "0",
-          marginInlineStart: theme.spacing(2),
-
-          "&:hover": {
-            color: theme.palette.text.primary,
-          },
-        },
-
         [`&.${chipClasses.disabled}`]: {
           opacity: 1,
           pointerEvents: "none",
@@ -539,10 +589,32 @@ export const components: ThemeOptions["components"] = {
             },
           },
         }),
+
+        [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
+          backgroundColor: theme.palette.grey[200],
+        },
       }),
+
       label: {
         padding: 0,
       },
+
+      deleteIcon: ({ theme }) => ({
+        WebkitTapHighlightColor: "transparent",
+        color: theme.palette.text.secondary,
+        fontSize: "1em",
+        cursor: "pointer",
+        margin: "0",
+        marginInlineStart: theme.spacing(2),
+
+        "&:hover": {
+          color: theme.palette.text.primary,
+        },
+
+        [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
+          display: "none",
+        },
+      }),
     },
   },
   MuiCircularProgress: {
@@ -1112,9 +1184,6 @@ export const components: ThemeOptions["components"] = {
     },
   },
   MuiInputAdornment: {
-    defaultProps: {
-      variant: "outlined",
-    },
     styleOverrides: {
       root: ({ theme, ownerState }) => ({
         display: "flex",

package/src/theme/components.types.ts

@@ -33,14 +33,6 @@ declare module "@mui/material/Button" {
     contained: false;
     outlined: false;
   }
-  interface ButtonPropsSizeOverrides {
-    s: true;
-    m: true;
-    l: true;
-    small: false;
-    medium: false;
-    large: false;
-  }
   interface ButtonPropsColorOverrides {
     inherit: false;
     primary: false;