@okta/odyssey-react-mui 1.32.0 → 1.33.0

package/src/PasswordField.tsx

@@ -1,253 +0,0 @@
-/*!
- * 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, IconButton } from "@mui/material";
-import {
-  ChangeEventHandler,
-  FocusEventHandler,
-  forwardRef,
-  memo,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "react";
-
-import { ShowIcon, HideIcon } from "./icons.generated/index.js";
-import { Field } from "./Field.js";
-import {
-  FieldComponentProps,
-  FieldComponentRenderProps,
-} from "./FieldComponentProps.js";
-import type { HtmlProps } from "./HtmlProps.js";
-import { useTranslation } from "react-i18next";
-import { FocusHandle, getControlState, useInputValues } from "./inputUtils.js";
-
-export type PasswordFieldProps = {
-  /**
-   * 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";
-  /**
-   * initial value for input. Use when component in uncontrolled.
-   */
-  defaultValue?: string;
-  /**
-   * If `true`, the component will receive focus automatically.
-   */
-  hasInitialFocus?: boolean;
-  /**
-   * If `true`, the show/hide icon is not shown to the user
-   */
-  hasShowPassword?: boolean;
-  /**
-   * The ref forwarded to the TextField
-   */
-  inputRef?: React.RefObject<FocusHandle>;
-  /**
-   * 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. Use when component is controlled.
-   */
-  value?: string;
-} & FieldComponentProps &
-  Pick<HtmlProps, "ariaDescribedBy" | "testId" | "translate">;
-
-type FieldRenderProps = Partial<
-  Pick<FieldComponentRenderProps, "ariaDescribedBy" | "errorMessageElementId">
-> &
-  Pick<FieldComponentRenderProps, "id" | "labelElementId">;
-
-const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
-  (
-    {
-      ariaDescribedBy,
-      autoCompleteType,
-      defaultValue,
-      errorMessage,
-      errorMessageList,
-      hasInitialFocus,
-      hint,
-      id: idOverride,
-      inputRef,
-      isDisabled = false,
-      isFullWidth = false,
-      isOptional = false,
-      hasShowPassword = true,
-      isReadOnly,
-      label,
-      name: nameOverride,
-      onChange: onChangeProp,
-      onFocus,
-      onBlur,
-      placeholder,
-      testId,
-      translate,
-      value,
-    },
-    ref,
-  ) => {
-    const { t } = useTranslation();
-    const [inputType, setInputType] = useState("password");
-
-    const togglePasswordVisibility = useCallback(() => {
-      setInputType((inputType) =>
-        inputType === "password" ? "text" : "password",
-      );
-    }, []);
-
-    const controlledStateRef = useRef(
-      getControlState({
-        controlledValue: value,
-        uncontrolledValue: defaultValue,
-      }),
-    );
-    const inputValues = useInputValues({
-      defaultValue,
-      value,
-      controlState: controlledStateRef.current,
-    });
-
-    const localInputRef = useRef<HTMLInputElement>(null);
-    useImperativeHandle(inputRef, () => {
-      return {
-        focus: () => {
-          localInputRef.current?.focus();
-        },
-      };
-    }, []);
-
-    const onChange = useCallback<
-      ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>
-    >(
-      (event) => {
-        onChangeProp?.(event);
-      },
-      [onChangeProp],
-    );
-
-    const renderFieldComponent = useCallback(
-      ({
-        ariaDescribedBy,
-        errorMessageElementId,
-        id,
-        labelElementId,
-      }: FieldRenderProps) => (
-        <InputBase
-          {...inputValues}
-          aria-describedby={ariaDescribedBy}
-          autoComplete={inputType === "password" ? autoCompleteType : "off"}
-          /* eslint-disable-next-line jsx-a11y/no-autofocus */
-          autoFocus={hasInitialFocus}
-          endAdornment={
-            hasShowPassword && (
-              <InputAdornment position="end">
-                <IconButton
-                  aria-controls={id}
-                  aria-label={
-                    inputType === "password"
-                      ? t("passwordfield.icon.label.show")
-                      : t("passwordfield.icon.label.hide")
-                  }
-                  aria-pressed={inputType === "text"}
-                  onClick={togglePasswordVisibility}
-                >
-                  {inputType === "password" ? <ShowIcon /> : <HideIcon />}
-                </IconButton>
-              </InputAdornment>
-            )
-          }
-          id={id}
-          inputProps={{
-            "aria-errormessage": errorMessageElementId,
-            "aria-labelledby": labelElementId,
-            "data-se": testId,
-            // role: "textbox" Added because password inputs don't have an implicit role assigned. This causes problems with element selection.
-            role: "textbox",
-          }}
-          inputRef={localInputRef}
-          name={nameOverride ?? id}
-          onChange={onChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          placeholder={placeholder}
-          readOnly={isReadOnly}
-          ref={ref}
-          required={!isOptional}
-          translate={translate}
-          type={inputType}
-        />
-      ),
-      [
-        autoCompleteType,
-        hasInitialFocus,
-        inputValues,
-        t,
-        togglePasswordVisibility,
-        inputType,
-        nameOverride,
-        onChange,
-        onFocus,
-        onBlur,
-        placeholder,
-        isOptional,
-        isReadOnly,
-        hasShowPassword,
-        ref,
-        testId,
-        translate,
-      ],
-    );
-
-    return (
-      <Field
-        ariaDescribedBy={ariaDescribedBy}
-        errorMessage={errorMessage}
-        errorMessageList={errorMessageList}
-        fieldType="single"
-        hasVisibleLabel
-        hint={hint}
-        id={idOverride}
-        isDisabled={isDisabled}
-        isFullWidth={isFullWidth}
-        isOptional={isOptional}
-        label={label}
-        renderFieldComponent={renderFieldComponent}
-      />
-    );
-  },
-);
-
-const MemoizedPasswordField = memo(PasswordField);
-MemoizedPasswordField.displayName = "PasswordField";
-
-export { MemoizedPasswordField as PasswordField };

package/src/Radio.tsx

@@ -1,199 +0,0 @@
-/*!
- * 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, useCallback, useMemo, useRef, useImperativeHandle } from "react";
-import {
-  FormControlLabel,
-  FormControlLabelProps as MuiFormControlLabelProps,
-  FormHelperText,
-  Radio as MuiRadio,
-  RadioProps as MuiRadioProps,
-} from "@mui/material";
-import styled from "@emotion/styled";
-
-import { FieldComponentProps } from "./FieldComponentProps.js";
-import type { HtmlProps } from "./HtmlProps.js";
-import { FocusHandle } from "./inputUtils.js";
-import {
-  useOdysseyDesignTokens,
-  DesignTokens,
-} from "./OdysseyDesignTokensContext.js";
-import { Typography } from "./Typography.js";
-import { useUniqueId } from "./useUniqueId.js";
-
-const HintContainerWithInlineStartSpacing = styled.div<{
-  odysseyDesignTokens: DesignTokens;
-}>(({ odysseyDesignTokens }) => ({
-  paddingInlineStart: `calc(${odysseyDesignTokens.TypographyLineHeightUi}em + ${odysseyDesignTokens.Spacing2})`,
-  marginBlockEnd: odysseyDesignTokens.Spacing2,
-
-  // MUI applies the '.Mui-error' class to this hint text when the checkbox is invalid which turns the copy red
-  // We want to keep the hint text gray in the error state
-  ".Mui-error": {
-    color: odysseyDesignTokens.TypographyColorSubordinate,
-  },
-}));
-
-export type RadioProps = {
-  /**
-   * The ref forwarded to the Radio
-   */
-  inputRef?: React.RefObject<FocusHandle>;
-  /**
-   * Determines whether the Radio button is checked
-   */
-  isChecked?: boolean;
-  /**
-   * If `true`, the radio button has an invalid value
-   */
-  isInvalid?: boolean;
-  /**
-   * The label text for the Radio
-   */
-  label: string;
-  /**
-   * The value attribute of the Radio
-   */
-  value: string;
-  /**
-   * Callback fired when the blur event happens. Provides event value.
-   */
-  onChange?: MuiRadioProps["onChange"];
-  onBlur?: MuiFormControlLabelProps["onBlur"];
-  onClick?: React.MouseEventHandler<HTMLSpanElement>;
-} & Pick<
-  FieldComponentProps,
-  "hint" | "id" | "isDisabled" | "isReadOnly" | "name"
-> &
-  Pick<HtmlProps, "testId" | "translate">;
-
-const Radio = ({
-  hint,
-  id: idOverride,
-  inputRef,
-  isChecked,
-  isDisabled,
-  isInvalid,
-  label: labelProp,
-  name,
-  testId,
-  translate,
-  value,
-  isReadOnly,
-  onChange: onChangeProp,
-  onBlur: onBlurProp,
-  onClick,
-}: RadioProps) => {
-  const localInputRef = useRef<HTMLInputElement>(null);
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-  const id = useUniqueId(idOverride);
-  const hintId = hint ? `${id}-hint` : undefined;
-
-  useImperativeHandle(inputRef, () => {
-    return {
-      focus: () => {
-        localInputRef.current?.focus();
-      },
-    };
-  }, []);
-
-  const label = useMemo(
-    () => <Typography component="span">{labelProp}</Typography>,
-    [labelProp],
-  );
-
-  const onChange = useCallback<NonNullable<MuiRadioProps["onChange"]>>(
-    (event, checked) => {
-      if (isReadOnly) {
-        event.preventDefault();
-      } else {
-        onChangeProp?.(event, checked);
-      }
-    },
-    [onChangeProp, isReadOnly],
-  );
-
-  const handleClick = useCallback<React.MouseEventHandler<HTMLSpanElement>>(
-    (event) => {
-      if (isReadOnly) {
-        event.stopPropagation();
-        event.preventDefault();
-      }
-    },
-    [isReadOnly],
-  );
-  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps["onBlur"]>>(
-    (event) => {
-      onBlurProp?.(event);
-    },
-    [onBlurProp],
-  );
-
-  return (
-    <>
-      <FormControlLabel
-        checked={isChecked}
-        className={isInvalid ? "Mui-error" : ""}
-        control={
-          <MuiRadio
-            inputProps={{
-              "aria-describedby": hintId,
-              "aria-disabled": isDisabled || isReadOnly,
-              "data-se": testId,
-              readOnly: isReadOnly,
-              tabIndex: isReadOnly ? 0 : undefined,
-            }}
-            inputRef={localInputRef}
-            onChange={onChange}
-            onClick={onClick || handleClick}
-            disabled={isDisabled}
-          />
-        }
-        label={label}
-        name={name}
-        translate={translate}
-        value={value}
-        onBlur={onBlur}
-        disabled={isDisabled}
-        sx={{
-          ...(isReadOnly && {
-            cursor: "default",
-            "& .MuiTypography-root": {
-              cursor: "default",
-            },
-          }),
-
-          ...(hint && {
-            // needed to override specific :not(:last-child) selector
-            ":not(:last-child)": {
-              marginBlockEnd: 0,
-            },
-          }),
-        }}
-      />
-      {hint && (
-        <HintContainerWithInlineStartSpacing
-          odysseyDesignTokens={odysseyDesignTokens}
-        >
-          <FormHelperText id={hintId} translate={translate}>
-            {hint}
-          </FormHelperText>
-        </HintContainerWithInlineStartSpacing>
-      )}
-    </>
-  );
-};
-
-const MemoizedRadio = memo(Radio);
-MemoizedRadio.displayName = "Radio";
-
-export { MemoizedRadio as Radio };

package/src/RadioGroup.tsx

@@ -1,164 +0,0 @@
-/*!
- * 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 {
-  RadioGroup as MuiRadioGroup,
-  type RadioGroupProps as MuiRadioGroupProps,
-} from "@mui/material";
-import React, { memo, ReactNode, useCallback, useRef, useMemo } from "react";
-
-import { Field } from "./Field.js";
-import {
-  FieldComponentProps,
-  FieldComponentRenderProps,
-} from "./FieldComponentProps.js";
-import type { HtmlProps } from "./HtmlProps.js";
-import { getControlState, useInputValues } from "./inputUtils.js";
-import { Radio, RadioProps } from "./Radio.js";
-
-export type RadioGroupProps = {
-  /**
-   * The Radio components within the group. Must include two or more.
-   */
-  children: ReactNode;
-  /**
-   * The text value of the Radio that should be selected by default
-   */
-  defaultValue?: string;
-  /**
-   * The text label for the RadioGroup
-   */
-  label: string;
-  /**
-   * Listen for changes in the browser that change `value`
-   */
-  onChange?: MuiRadioGroupProps["onChange"];
-  /**
-   * The `value` on the selected Radio
-   */
-  value?: string;
-} & Pick<
-  FieldComponentProps,
-  | "errorMessage"
-  | "errorMessageList"
-  | "hint"
-  | "HintLinkComponent"
-  | "id"
-  | "isDisabled"
-  | "isReadOnly"
-  | "name"
-> &
-  Pick<HtmlProps, "ariaDescribedBy" | "testId" | "translate">;
-
-type FieldRenderProps = Partial<
-  Pick<FieldComponentRenderProps, "ariaDescribedBy" | "errorMessageElementId">
-> &
-  Pick<FieldComponentRenderProps, "id" | "labelElementId">;
-
-const RadioGroup = ({
-  ariaDescribedBy,
-  children,
-  defaultValue,
-  errorMessage,
-  errorMessageList,
-  hint,
-  HintLinkComponent,
-  id: idOverride,
-  isDisabled,
-  isReadOnly = false,
-  label,
-  name: nameOverride,
-  onChange: onChangeProp,
-  testId,
-  translate,
-  value,
-}: RadioGroupProps) => {
-  const controlledStateRef = useRef(
-    getControlState({
-      controlledValue: value,
-      uncontrolledValue: defaultValue,
-    }),
-  );
-
-  const inputValues = useInputValues({
-    defaultValue,
-    value,
-    controlState: controlledStateRef.current,
-  });
-
-  const onChange = useCallback<NonNullable<MuiRadioGroupProps["onChange"]>>(
-    (event, newValue) => {
-      onChangeProp?.(event, newValue);
-    },
-    [onChangeProp],
-  );
-
-  const memoizedChildren = useMemo(
-    () =>
-      React.Children.map(children, (child) => {
-        if (React.isValidElement<RadioProps>(child) && child.type === Radio) {
-          return React.cloneElement(child, {
-            ...child.props,
-            isDisabled: isDisabled || child.props.isDisabled,
-            isReadOnly: isReadOnly || child.props.isReadOnly,
-          });
-        }
-        return child;
-      }),
-    [children, isDisabled, isReadOnly],
-  );
-  const renderFieldComponent = useCallback(
-    ({
-      ariaDescribedBy,
-      errorMessageElementId,
-      id,
-      labelElementId,
-    }: FieldRenderProps) => (
-      <MuiRadioGroup
-        {...inputValues}
-        aria-describedby={ariaDescribedBy}
-        aria-errormessage={errorMessageElementId}
-        aria-labelledby={labelElementId}
-        data-se={testId}
-        id={id}
-        name={nameOverride ?? id}
-        onChange={onChange}
-        translate={translate}
-      >
-        {memoizedChildren}
-      </MuiRadioGroup>
-    ),
-    [inputValues, nameOverride, onChange, memoizedChildren, testId, translate],
-  );
-
-  return (
-    <Field
-      ariaDescribedBy={ariaDescribedBy}
-      errorMessage={errorMessage}
-      errorMessageList={errorMessageList}
-      fieldType="group"
-      hasVisibleLabel={false}
-      hint={hint}
-      HintLinkComponent={HintLinkComponent}
-      id={idOverride}
-      isDisabled={isDisabled}
-      isReadOnly={isReadOnly}
-      label={label}
-      renderFieldComponent={renderFieldComponent}
-    />
-  );
-};
-
-const MemoizedRadioGroup = memo(RadioGroup);
-MemoizedRadioGroup.displayName = "RadioGroup";
-
-export { MemoizedRadioGroup as RadioGroup };

package/src/ScreenReaderText.tsx

@@ -1,53 +0,0 @@
-/*!
- * 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 } from "@mui/material";
-import { visuallyHidden } from "@mui/utils";
-import { HtmlProps } from "./HtmlProps.js";
-
-export type ScreenReaderTextProps = {
-  /**
-   * The visually-hidden text.
-   */
-  children: ReactNode;
-  id?: string;
-} & Pick<HtmlProps, "ariaHidden" | "translate">;
-
-/**
- * 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 = ({
-  ariaHidden,
-  children,
-  id,
-  translate,
-}: ScreenReaderTextProps) => (
-  <Box
-    aria-hidden={ariaHidden}
-    sx={style}
-    component="span"
-    id={id}
-    translate={translate}
-  >
-    {children}
-  </Box>
-);
-
-const MemoizedScreenReaderText = memo(ScreenReaderText);
-MemoizedScreenReaderText.displayName = "ScreenReaderText";
-
-export { MemoizedScreenReaderText as ScreenReaderText };