@okta/odyssey-react-mui 0.21.3 → 0.22.0

package/src/PasswordField.tsx

@@ -0,0 +1,174 @@
+/*!
+ * 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,
+  memo,
+  useCallback,
+  useState,
+} from "react";
+
+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.
+   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
+   */
+  autoCompleteType?: "current-password" | "new-password";
+  /**
+   * If `error` is not undefined, the `input` will indicate an error.
+   */
+  errorMessage?: string;
+  /**
+   * The helper text content.
+   */
+  hint?: string;
+  /**
+   * The id of the `input` element.
+   */
+  id?: string;
+  /**
+   * If `true`, the component is disabled.
+   */
+  isDisabled?: boolean;
+  /**
+   * It prevents the user from changing the value of the field
+   */
+  isReadOnly?: boolean;
+  /**
+   * If `true`, the `input` element is required.
+   */
+  isRequired?: boolean;
+  /**
+   * The label for the `input` element.
+   */
+  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 PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
+  (
+    {
+      autoCompleteType,
+      autoFocus,
+      errorMessage,
+      hint,
+      id: idOverride,
+      isDisabled = false,
+      isReadOnly,
+      label,
+      onChange,
+      onFocus,
+      onBlur,
+      placeholder,
+      value,
+    },
+    ref
+  ) => {
+    const [inputType, setInputType] = useState("password");
+
+    const togglePasswordVisibility = useCallback(() => {
+      setInputType((inputType) =>
+        inputType === "password" ? "text" : "password"
+      );
+    }, []);
+
+    const renderFieldComponent = useCallback(
+      ({ ariaDescribedBy, id }) => (
+        <InputBase
+          aria-describedby={ariaDescribedBy}
+          autoComplete={autoCompleteType}
+          /* eslint-disable-next-line jsx-a11y/no-autofocus */
+          autoFocus={autoFocus}
+          endAdornment={
+            <InputAdornment position="end">
+              <IconButton
+                aria-label="toggle password visibility"
+                edge="end"
+                onClick={togglePasswordVisibility}
+              >
+                {inputType === "password" ? <EyeIcon /> : <EyeOffIcon />}
+              </IconButton>
+            </InputAdornment>
+          }
+          id={id}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          placeholder={placeholder}
+          readOnly={isReadOnly}
+          ref={ref}
+          type={inputType}
+          value={value}
+        />
+      ),
+      [
+        autoCompleteType,
+        autoFocus,
+        togglePasswordVisibility,
+        inputType,
+        onChange,
+        onFocus,
+        onBlur,
+        placeholder,
+        isReadOnly,
+        ref,
+        value,
+      ]
+    );
+
+    return (
+      <Field
+        errorMessage={errorMessage}
+        hasVisibleLabel
+        hint={hint}
+        id={idOverride}
+        isDisabled={isDisabled}
+        label={label}
+        renderFieldComponent={renderFieldComponent}
+      />
+    );
+  }
+);
+
+const MemoizedPasswordField = memo(PasswordField);
+
+export { MemoizedPasswordField as PasswordField };

package/src/RadioGroup.tsx

@@ -17,8 +17,8 @@ import {
   FormControl,
   FormLabel,
   FormHelperText,
-  visuallyHidden,
   Radio,
+  ScreenReaderText,
   useUniqueId,
   RadioProps,
 } from ".";
@@ -104,7 +104,7 @@ const RadioGroup = ({
       </MuiRadioGroup>
       {errorMessage && (
         <FormHelperText id={`${uniqueName}-error`} error>
-          <span style={visuallyHidden}>Error:</span> {errorMessage}
+          <ScreenReaderText>Error:</ScreenReaderText> {errorMessage}
         </FormHelperText>
       )}
     </FormControl>

package/src/ScreenReaderText.tsx

@@ -0,0 +1,36 @@
+/*!
+ * 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 { memo, ReactNode } from "react";
+import { Box, visuallyHidden } from "./";
+
+export type ScreenReaderTextProps = {
+  /**
+   * The visually-hidden text.
+   */
+  children: ReactNode;
+};
+
+/**
+ * MUI sx expects you pass in a CSS object, not an object with CSS.
+ * They seem identical, but only if you create a new object like this will MUI be happy with the type of visuallyHidden.
+ * It's otherwise a regular object with CSS properties.
+ */
+const style = { ...visuallyHidden };
+
+const ScreenReaderText = ({ children }: ScreenReaderTextProps) => (
+  <Box sx={style}>{children}</Box>
+);
+
+const MemoizedScreenReaderText = memo(ScreenReaderText);
+
+export { MemoizedScreenReaderText as ScreenReaderText };

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,
-  visuallyHidden,
-} 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}>
-            <span style={visuallyHidden}>Error:</span>
-            {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}
+      />
     );
   }
 );