@okta/odyssey-react-mui 1.32.0 → 1.33.0

package/src/TextField.tsx

@@ -1,298 +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 {
-  ChangeEventHandler,
-  FocusEventHandler,
-  forwardRef,
-  InputHTMLAttributes,
-  memo,
-  ReactElement,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-} from "react";
-import { InputAdornment, InputBase } from "@mui/material";
-
-import {
-  FieldComponentProps,
-  FieldComponentRenderProps,
-} from "./FieldComponentProps.js";
-import { Field } from "./Field.js";
-import { HtmlProps } from "./HtmlProps.js";
-import { FocusHandle, useInputValues, getControlState } from "./inputUtils.js";
-import { type TestSelector } from "./test-selectors/index.js";
-
-export const TextFieldTestSelector = {
-  accessibleText: {
-    errorMessage: "errorMessage",
-    hint: "description",
-    label: "label",
-  },
-  children: {
-    link: {
-      elementSelector: {
-        method: "ByRole",
-        options: {
-          label: "name",
-        },
-        role: "link",
-      },
-    },
-  },
-  elementSelector: {
-    method: "ByRole",
-    options: {
-      label: "name",
-    },
-    role: "textbox",
-  },
-} as const satisfies TestSelector;
-
-export const textFieldTypeValues = [
-  "email",
-  "number",
-  "tel",
-  "text",
-  "url",
-] as const;
-
-export type TextFieldProps = {
-  /**
-   * This prop helps users to fill forms faster, especially on mobile devices.
-   * The name can be confusing, as it's more like an autofill.
-   * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
-   */
-  autoCompleteType?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
-  /**
-   * The default value. Use when the component is not controlled.
-   */
-  defaultValue?: string;
-  /**
-   * End `InputAdornment` for this component.
-   */
-  endAdornment?: string | ReactElement;
-  /**
-   * If `true`, the component will receive focus automatically.
-   */
-  hasInitialFocus?: boolean;
-  /**
-   * The ref forwarded to the TextField
-   */
-  inputRef?: React.RefObject<FocusHandle>;
-  /**
-   * Hints at the type of data that might be entered by the user while editing the element or its contents
-   * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
-   */
-  inputMode?: InputHTMLAttributes<HTMLInputElement>["inputMode"];
-  /**
-   * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
-   */
-  isMultiline?: 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;
-  /**
-   * Start `InputAdornment` for this component.
-   */
-  startAdornment?: string | ReactElement;
-  /**
-   * 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?: (typeof textFieldTypeValues)[number];
-  /**
-   * The value of the `input` element, required for a controlled component.
-   */
-  value?: string;
-} & FieldComponentProps &
-  Pick<HtmlProps, "ariaDescribedBy" | "testId" | "translate">;
-
-type FieldRenderProps = Partial<
-  Pick<FieldComponentRenderProps, "ariaDescribedBy" | "errorMessageElementId">
-> &
-  Pick<FieldComponentRenderProps, "id" | "labelElementId">;
-
-const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
-  (
-    {
-      ariaDescribedBy,
-      autoCompleteType,
-      defaultValue,
-      hasInitialFocus,
-      endAdornment,
-      errorMessage,
-      errorMessageList,
-      hint,
-      HintLinkComponent,
-      id: idOverride,
-      inputRef,
-      inputMode,
-      isDisabled = false,
-      isFullWidth = false,
-      isMultiline = false,
-      isOptional = false,
-      isReadOnly,
-      label,
-      name: nameOverride,
-      onBlur,
-      onChange: onChangeProp,
-      onFocus,
-      placeholder,
-      startAdornment,
-      testId,
-      translate,
-      type = "text",
-      value: value,
-    },
-    ref,
-  ) => {
-    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<
-      NonNullable<ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>>
-    >(
-      (event) => {
-        onChangeProp?.(event);
-      },
-      [onChangeProp],
-    );
-
-    const renderFieldComponent = useCallback(
-      ({
-        ariaDescribedBy,
-        errorMessageElementId,
-        id,
-        labelElementId,
-      }: FieldRenderProps) => (
-        <InputBase
-          {...inputValues}
-          aria-describedby={ariaDescribedBy}
-          autoComplete={autoCompleteType}
-          /* eslint-disable-next-line jsx-a11y/no-autofocus */
-          autoFocus={hasInitialFocus}
-          endAdornment={
-            endAdornment && (
-              <InputAdornment position="end" translate={translate}>
-                {endAdornment}
-              </InputAdornment>
-            )
-          }
-          id={id}
-          inputProps={{
-            "aria-errormessage": errorMessageElementId,
-            "aria-labelledby": labelElementId,
-            "data-se": testId,
-            inputMode,
-          }}
-          inputRef={localInputRef}
-          multiline={isMultiline}
-          name={nameOverride ?? id}
-          onBlur={onBlur}
-          onChange={onChange}
-          onFocus={onFocus}
-          placeholder={placeholder}
-          readOnly={isReadOnly}
-          ref={ref}
-          required={!isOptional}
-          startAdornment={
-            startAdornment && (
-              <InputAdornment position="start" translate={translate}>
-                {startAdornment}
-              </InputAdornment>
-            )
-          }
-          type={type}
-          translate={translate}
-        />
-      ),
-      [
-        autoCompleteType,
-        inputValues,
-        hasInitialFocus,
-        endAdornment,
-        inputMode,
-        isMultiline,
-        nameOverride,
-        onBlur,
-        onChange,
-        onFocus,
-        placeholder,
-        isOptional,
-        isReadOnly,
-        ref,
-        startAdornment,
-        testId,
-        translate,
-        type,
-      ],
-    );
-
-    return (
-      <Field
-        ariaDescribedBy={ariaDescribedBy}
-        errorMessage={errorMessage}
-        errorMessageList={errorMessageList}
-        fieldType="single"
-        hasVisibleLabel
-        hint={hint}
-        HintLinkComponent={HintLinkComponent}
-        id={idOverride}
-        isDisabled={isDisabled}
-        isFullWidth={isFullWidth}
-        isOptional={isOptional}
-        label={label}
-        renderFieldComponent={renderFieldComponent}
-      />
-    );
-  },
-);
-
-const MemoizedTextField = memo(TextField);
-MemoizedTextField.displayName = "TextField";
-
-export { MemoizedTextField as TextField };

package/src/Toast.tsx

@@ -1,151 +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 { useEffect, memo, useState, useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { Alert, AlertTitle, Snackbar } from "@mui/material";
-
-import { Button } from "./Buttons/index.js";
-import { HtmlProps } from "./HtmlProps.js";
-import { CloseIcon } from "./icons.generated/index.js";
-import { Link } from "./Link.js";
-import { ScreenReaderText } from "./ScreenReaderText.js";
-
-export const toastRoleValues = ["status", "alert"] as const;
-export const toastSeverityValues = [
-  "success",
-  "info",
-  "warning",
-  "error",
-] as const;
-
-export type ToastProps = {
-  /**
-   * If set, this determines how long the Toast should appear before automatically disappearing in milliseconds.
-   * It will only take effect if the Toast is not dismissible.
-   * If left blank, it defaults to 6000.
-   */
-  autoHideDuration?: number;
-  /**
-   * If `true`, the Toast will include a close button.
-   */
-  isDismissable?: boolean;
-  /**
-   * If true, the Toast is visible
-   */
-  isVisible?: boolean;
-  /**
-   * If linkUrl is not undefined, this is the text of the link.
-   * If left blank, it defaults to "Learn more".
-   * Note that linkText does nothing if linkUrl is not defined
-   */
-  linkText?: string;
-  /**
-   * If defined, the Toast will include a link to the URL
-   */
-  linkUrl?: string;
-  /**
-   * An optional function to run when the Toast is closed.
-   */
-  onHide?: () => void;
-  /**
-   * Sets the ARIA role of the Toast
-   * ("status" for something that dynamically updates, "alert" for errors, null for something
-   * unchanging)
-   */
-  role?: (typeof toastRoleValues)[number];
-  /**
-   * Determine the color and icon of the Toast
-   */
-  severity: (typeof toastSeverityValues)[number];
-  /**
-   * The text content of the Toast
-   */
-  text: string;
-} & Pick<HtmlProps, "testId" | "translate">;
-
-const ClickAwayListenerProps = { onClickAway: () => false };
-
-const Toast = ({
-  autoHideDuration = 6000,
-  isDismissable,
-  linkText,
-  linkUrl,
-  isVisible: isVisibleProp,
-  onHide: onHideProp,
-  role,
-  severity,
-  testId,
-  text,
-  translate,
-}: ToastProps) => {
-  const { t } = useTranslation();
-  const [isVisible, setIsVisible] = useState(isVisibleProp);
-
-  useEffect(() => {
-    setIsVisible(isVisibleProp);
-  }, [isVisibleProp]);
-
-  const onHide = useCallback(() => {
-    setIsVisible(false);
-    onHideProp?.();
-  }, [onHideProp]);
-
-  return (
-    <>
-      <Snackbar
-        open={isVisible}
-        autoHideDuration={
-          isDismissable || autoHideDuration <= 0 ? undefined : autoHideDuration
-        }
-        onClose={onHide}
-        className="Toast"
-        ClickAwayListenerProps={ClickAwayListenerProps}
-      >
-        <Alert
-          action={
-            isDismissable === true && (
-              <Button
-                ariaLabel={t("close.text")}
-                onClick={onHide}
-                size="small"
-                startIcon={<CloseIcon />}
-                variant="floating"
-              />
-            )
-          }
-          data-se={testId}
-          role={role}
-          severity={severity}
-          variant="toast"
-        >
-          <AlertTitle translate={translate}>
-            <ScreenReaderText translate={translate}>
-              {t(`severity.${severity}`)}:
-            </ScreenReaderText>
-            {text}
-          </AlertTitle>
-          {linkUrl && (
-            <Link href={linkUrl} variant="monochrome" translate={translate}>
-              {linkText}
-            </Link>
-          )}
-        </Alert>
-      </Snackbar>
-    </>
-  );
-};
-
-const MemoizedToast = memo(Toast);
-MemoizedToast.displayName = "Toast";
-
-export { MemoizedToast as Toast };

package/src/ToastStack.tsx

@@ -1,43 +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, ReactElement } from "react";
-import { Box, Snackbar } from "@mui/material";
-import { Toast } from "./Toast.js";
-
-export type ToastListProps = {
-  /**
-   * The Toast or array of Toasts within the ToastStack
-   */
-  children: ReactElement<typeof Toast> | Array<ReactElement<typeof Toast>>;
-};
-
-const ToastStack = ({ children }: ToastListProps) => {
-  return (
-    <Snackbar open={true}>
-      <Box
-        sx={{
-          display: "flex",
-          flexDirection: "column-reverse",
-          gap: 2,
-        }}
-      >
-        {children}
-      </Box>
-    </Snackbar>
-  );
-};
-
-const MemoizedToastStack = memo(ToastStack);
-MemoizedToastStack.displayName = "ToastStack";
-
-export { MemoizedToastStack as ToastStack };

package/src/Tooltip.tsx

@@ -1,61 +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 { Tooltip as MuiTooltip } from "@mui/material";
-import type { TooltipProps as MuiTooltipProps } from "@mui/material";
-
-import { MuiPropsChild } from "./MuiPropsChild.js";
-import { ReactElement, memo } from "react";
-import { HtmlProps } from "./HtmlProps.js";
-
-export type TooltipProps = {
-  /**
-   * The type of ARIA attribute to use
-   */
-  ariaType: "description" | "label";
-  /**
-   * The content that triggers the Tooltip when hovered
-   */
-  children: ReactElement;
-  /**
-   * The placement of the Tooltip
-   */
-  placement?: MuiTooltipProps["placement"];
-  /**
-   * The text to display in the Tooltip
-   */
-  text: string;
-} & Pick<HtmlProps, "testId" | "translate">;
-
-const Tooltip = ({
-  ariaType,
-  children,
-  placement = "top",
-  testId,
-  text,
-  translate,
-}: TooltipProps) => (
-  <MuiTooltip
-    data-se={testId}
-    describeChild={ariaType === "description"}
-    placement={placement}
-    title={text}
-    translate={translate}
-  >
-    <MuiPropsChild>{children}</MuiPropsChild>
-  </MuiTooltip>
-);
-
-const MemoizedTooltip = memo(Tooltip);
-MemoizedTooltip.displayName = "Tooltip";
-
-export { MemoizedTooltip as Tooltip };

package/src/Typography.test.tsx

@@ -1,26 +0,0 @@
-/*!
- * Copyright (c) 2024-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 { render, screen } from "@testing-library/react";
-import { Typography } from "./Typography.js";
-
-describe("Typography", () => {
-  test("renders Overline", () => {
-    render(
-      <Typography ariaLabel="overline" variant="overline">
-        Overline test
-      </Typography>,
-    );
-
-    expect(screen.getByLabelText("overline")).toBeVisible();
-  });
-});