@okta/odyssey-react-mui 0.21.4 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "0.21.4",
+  "version": "0.22.0",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -25,7 +25,7 @@
     "@mui/lab": "^5.0.0-alpha.117",
     "@mui/material": "^5.11.6",
     "@mui/utils": "^5.11.2",
-    "@okta/odyssey-design-tokens": "0.21.4"
+    "@okta/odyssey-design-tokens": "0.22.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -33,5 +33,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "facb0d98d72297e662093673a0e0ee8d7e226be2"
+  "gitHead": "b1a4a93f7d570162a52e4c28012fb65e31d5bb4b"
 }

package/src/Autocomplete.tsx

@@ -0,0 +1,132 @@
+/*!
+ * Copyright (c) 2023-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 {
+  Autocomplete as MuiAutocomplete,
+  AutocompleteProps as MuiAutocompleteProps,
+  InputBase,
+} from "@mui/material";
+import { memo, useCallback } from "react";
+
+import { Field } from "./Field";
+
+export type AutocompleteProps<
+  OptionType,
+  HasMultipleChoices extends boolean | undefined,
+  IsCustomValueAllowed extends boolean | undefined
+> = {
+  hasMultipleChoices?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["multiple"];
+  hint?: string;
+  isCustomValueAllowed?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["freeSolo"];
+  isDisabled?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["disabled"];
+  isLoading?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["loading"];
+  isReadOnly?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["readOnly"];
+  label: string;
+  onChange?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["onChange"];
+  options: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["options"];
+  value?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["value"];
+};
+
+const Autocomplete = <
+  OptionType,
+  HasMultipleChoices extends boolean | undefined,
+  IsCustomValueAllowed extends boolean | undefined
+>({
+  isCustomValueAllowed,
+  hasMultipleChoices,
+  isDisabled,
+  isLoading,
+  isReadOnly,
+  hint,
+  label,
+  onChange,
+  options,
+  value,
+}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
+  const renderInput = useCallback(
+    ({ InputLabelProps, InputProps, ...params }) => (
+      <Field
+        {...InputLabelProps}
+        hasVisibleLabel
+        hint={hint}
+        label={label}
+        renderFieldComponent={({ ariaDescribedBy, id }) => (
+          <InputBase
+            {...params}
+            {...InputProps}
+            aria-describedby={ariaDescribedBy}
+            id={id}
+          />
+        )}
+      />
+    ),
+    [hint, label]
+  );
+
+  return (
+    <MuiAutocomplete
+      disabled={isDisabled}
+      freeSolo={isCustomValueAllowed}
+      loading={isLoading}
+      multiple={hasMultipleChoices}
+      onChange={onChange}
+      options={options}
+      readOnly={isReadOnly}
+      renderInput={renderInput}
+      value={value}
+    />
+  );
+};
+
+const MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;
+
+export { MemoizedAutocomplete as Autocomplete };

package/src/Button.tsx

@@ -0,0 +1,75 @@
+/*!
+ * 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 { Button as MuiButton } from "@mui/material";
+import type { ButtonProps as MuiButtonProps } from "@mui/material";
+import { Tooltip } from "./";
+import { memo } from "react";
+
+export type ButtonProps = {
+  endIcon?: React.ReactNode;
+  id?: string;
+  isDisabled?: boolean;
+  isFullWidth?: boolean;
+  onClick?: MuiButtonProps["onClick"];
+  size?: MuiButtonProps["size"];
+  startIcon?: React.ReactNode;
+  text?: string;
+  /**
+   * `tooltipText` determines the text of the tooltip that wraps the button if it's icon-only.
+   */
+  tooltipText?: string;
+  variant?: "primary" | "secondary" | "danger" | "floating";
+};
+
+const Button = ({
+  endIcon,
+  id,
+  isDisabled,
+  isFullWidth,
+  onClick,
+  size = "medium",
+  startIcon,
+  text,
+  tooltipText,
+  variant,
+}: ButtonProps) => {
+  const button = (
+    <MuiButton
+      disabled={isDisabled}
+      endIcon={endIcon}
+      fullWidth={isFullWidth}
+      id={id}
+      onClick={onClick}
+      size={size}
+      startIcon={startIcon}
+      variant={variant}
+    >
+      {text}
+    </MuiButton>
+  );
+
+  return (
+    <>
+      {tooltipText && (
+        <Tooltip describeChild placement="top" title={tooltipText}>
+          {button}
+        </Tooltip>
+      )}
+      {!tooltipText && button}
+    </>
+  );
+};
+
+const MemoizedButton = memo(Button);
+
+export { MemoizedButton as Button };

package/src/Field.tsx

@@ -0,0 +1,112 @@
+/*!
+ * 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, ReactElement, useMemo } from "react";
+
+import {
+  FieldError,
+  FieldHint,
+  FieldLabel,
+  FormControl,
+  useUniqueId,
+} from "./";
+
+export type FieldProps = {
+  /**
+   * If `error` is not undefined, the `input` will indicate an error.
+   */
+  errorMessage?: string;
+  hasVisibleLabel: boolean;
+  /**
+   * The helper text content.
+   */
+  hint?: string;
+  /**
+   * The id of the `input` element.
+   */
+  id?: string;
+  /**
+   * If `true`, the component is disabled.
+   */
+  isDisabled?: boolean;
+  /**
+   * If `true`, the `input` element is required.
+   */
+  isRequired?: boolean;
+  /**
+   * The label for the `input` element.
+   */
+  label: string;
+  /**
+   * The label for the `input` element if the it's not optional
+   */
+  optionalLabel?: string;
+  /**
+   * The short hint displayed in the `input` before the user enters a value.
+   */
+  placeholder?: string;
+  renderFieldComponent: ({
+    ariaDescribedBy,
+    id,
+  }: {
+    ariaDescribedBy?: string;
+    id: string;
+  }) => ReactElement;
+};
+
+const Field = ({
+  errorMessage,
+  hasVisibleLabel,
+  hint,
+  id: idOverride,
+  isDisabled = false,
+  isRequired = true,
+  label,
+  optionalLabel,
+  renderFieldComponent,
+}: FieldProps) => {
+  const id = useUniqueId(idOverride);
+  const hintId = hint ? `${id}-hint` : undefined;
+  const errorId = errorMessage ? `${id}-error` : undefined;
+  const labelId = `${id}-label`;
+
+  const ariaDescribedBy = useMemo(
+    () => [hintId, errorId].join(" ").trim() || undefined,
+    [errorId, hintId]
+  );
+
+  return (
+    <FormControl disabled={isDisabled} error={Boolean(errorMessage)}>
+      <FieldLabel
+        hasVisibleLabel={hasVisibleLabel}
+        id={labelId}
+        inputId={id}
+        isRequired={isRequired}
+        optionalText={optionalLabel}
+        text={label}
+      />
+
+      {hint && <FieldHint id={hintId} text={hint} />}
+
+      {renderFieldComponent({
+        ariaDescribedBy,
+        id,
+      })}
+
+      {errorMessage && <FieldError id={errorId} text={errorMessage} />}
+    </FormControl>
+  );
+};
+
+const MemoizedField = memo(Field);
+
+export { MemoizedField as Field };

package/src/FieldError.tsx

@@ -0,0 +1,34 @@
+/*!
+ * Copyright (c) 2023-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 } from "react";
+
+import { FormHelperText } from ".";
+import { ScreenReaderText } from "./ScreenReaderText";
+
+export type FieldErrorProps = {
+  id?: string;
+  text: string;
+};
+
+const FieldError = ({ id, text }: FieldErrorProps) => {
+  return (
+    <FormHelperText error id={id}>
+      <ScreenReaderText>Error:</ScreenReaderText>
+      {text}
+    </FormHelperText>
+  );
+};
+
+const MemoizedFieldError = memo(FieldError);
+
+export { MemoizedFieldError as FieldError };

package/src/FieldHint.tsx

@@ -0,0 +1,28 @@
+/*!
+ * Copyright (c) 2023-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 } from "react";
+
+import { FormHelperText } from "./";
+
+export type FieldHintProps = {
+  id?: string;
+  text: string;
+};
+
+const FieldHint = ({ id, text }: FieldHintProps) => {
+  return <FormHelperText id={id}>{text}</FormHelperText>;
+};
+
+const MemoizedFieldHint = memo(FieldHint);
+
+export { MemoizedFieldHint as FieldHint };

package/src/FieldLabel.tsx

@@ -0,0 +1,57 @@
+/*!
+ * Copyright (c) 2023-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 { InputLabel } from "@mui/material";
+import { memo, useMemo } from "react";
+
+import { ScreenReaderText } from "./ScreenReaderText";
+import { Typography } from ".";
+
+export type FieldLabelProps = {
+  hasVisibleLabel: boolean;
+  id: string;
+  inputId: string;
+  isRequired: boolean;
+  optionalText?: string;
+  text: string;
+};
+
+const FieldLabel = ({
+  hasVisibleLabel,
+  id,
+  inputId,
+  isRequired,
+  optionalText,
+  text,
+}: FieldLabelProps) => {
+  const inputLabel = useMemo(
+    () => (
+      <InputLabel htmlFor={inputId} id={id}>
+        {text}
+        {!isRequired && (
+          <Typography variant="subtitle1">{optionalText}</Typography>
+        )}
+      </InputLabel>
+    ),
+    [id, inputId, isRequired, optionalText, text]
+  );
+
+  return hasVisibleLabel ? (
+    inputLabel
+  ) : (
+    <ScreenReaderText>{inputLabel}</ScreenReaderText>
+  );
+};
+
+const MemoizedFieldLabel = memo(FieldLabel);
+
+export { MemoizedFieldLabel as FieldLabel };

package/src/MenuButton.tsx

@@ -77,10 +77,9 @@ const MenuButton = ({
         aria-haspopup="true"
         aria-expanded={open ? "true" : undefined}
         onClick={handleClick}
+        text={buttonLabel}
         variant={buttonVariant}
-      >
-        {buttonLabel}
-      </Button>
+      />
       <Menu
         id={`${uniqueId}-menu`}
         anchorEl={anchorEl}

package/src/MenuItem.tsx

@@ -45,6 +45,5 @@ const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
 );
 
 const MemoizedMenuItem = memo(MenuItem);
-MemoizedMenuItem.displayName = "MenuItem";
 
 export { MemoizedMenuItem as MenuItem };

package/src/OdysseyCacheProvider.test.tsx

@@ -29,7 +29,7 @@ describe("OdysseyCacheProvider", () => {
   it("themes a Button", () => {
     render(
       <OdysseyCacheProvider>
-        <Button>text</Button>
+        <Button text="text" />
       </OdysseyCacheProvider>
     );
 

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 };