@okta/odyssey-react-mui 1.32.0 → 1.32.4

package/src/Callout.tsx

@@ -1,176 +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 styled from "@emotion/styled";
-import { Alert, AlertTitle, Box } from "@mui/material";
-import { memo, ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-
-import type { HtmlProps } from "./HtmlProps.js";
-import { Link, LinkProps } from "./Link.js";
-import {
-  DesignTokens,
-  useOdysseyDesignTokens,
-} from "./OdysseyDesignTokensContext.js";
-import { type TestSelector } from "./test-selectors/index.js";
-import { Paragraph } from "./Typography.js";
-import { useUniqueId } from "./useUniqueId.js";
-
-export const CalloutTestSelector = {
-  accessibleText: {
-    text: "description",
-    title: "label",
-  },
-  children: {
-    link: {
-      elementSelector: {
-        method: "ByRole",
-        options: {
-          linkText: "name",
-        },
-        role: "link",
-      },
-    },
-  },
-  elementSelector: {
-    method: "ByRole",
-    options: {
-      title: "name",
-    },
-    role: ["alert", "status"],
-  },
-} as const satisfies TestSelector;
-
-export const calloutRoleValues = ["status", "alert"] as const;
-export const calloutSeverityValues = [
-  "success",
-  "info",
-  "warning",
-  "error",
-] as const;
-
-export type CalloutProps = {
-  /**
-   * Used to optionally pass a text list to the component
-   */
-  children?: ReactNode;
-  /**
-   * Sets the ARIA role of the Callout
-   * ("status" for something that dynamically updates, "alert" for errors, null for something
-   * unchanging)
-   */
-  role?: (typeof calloutRoleValues)[number];
-  /**
-   * Determine the color and icon of the Callout
-   */
-  severity: (typeof calloutSeverityValues)[number];
-  /**
-   * The text content of the Callout
-   */
-  text?: string;
-  /**
-   * The title of the Callout
-   */
-  title?: string;
-} & (
-  | {
-      children?: never;
-      text: string;
-    }
-  | {
-      children: ReactNode;
-      text?: never;
-    }
-) &
-  (
-    | {
-        linkRel?: LinkProps["rel"];
-        linkTarget?: LinkProps["target"];
-        linkText: string;
-        /**
-         * If defined, the Callout will include a link to the URL
-         */
-        linkUrl: LinkProps["href"];
-      }
-    | {
-        linkRel?: never;
-        linkTarget?: never;
-        linkUrl?: never;
-        linkText?: never;
-      }
-  ) &
-  Pick<HtmlProps, "testId" | "translate">;
-
-const ContentContainer = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
-  "& > * + *": {
-    marginBlockStart: odysseyDesignTokens.Spacing4,
-  },
-}));
-
-const Callout = ({
-  children,
-  linkRel,
-  linkTarget,
-  linkText,
-  linkUrl,
-  role,
-  severity,
-  testId,
-  text,
-  title,
-  translate,
-}: CalloutProps) => {
-  const { t } = useTranslation();
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-  const titleId = useUniqueId();
-
-  return (
-    <Alert
-      aria-label={t(`severity.${severity}`)}
-      aria-labelledby={titleId}
-      data-se={testId}
-      role={role}
-      severity={severity}
-      variant="callout"
-    >
-      {title && (
-        <AlertTitle aria-hidden id={titleId} translate={translate}>
-          {title}
-        </AlertTitle>
-      )}
-
-      <ContentContainer odysseyDesignTokens={odysseyDesignTokens}>
-        {children && <Box component="div">{children}</Box>}
-        {text && <Paragraph>{text}</Paragraph>}
-        {linkUrl && (
-          <Box>
-            <Link
-              href={linkUrl}
-              rel={linkRel}
-              target={linkTarget}
-              variant="monochrome"
-            >
-              {linkText}
-            </Link>
-          </Box>
-        )}
-      </ContentContainer>
-    </Alert>
-  );
-};
-
-const MemoizedCallout = memo(Callout);
-MemoizedCallout.displayName = "Callout";
-
-export { MemoizedCallout as Callout };

package/src/Card.tsx

@@ -1,186 +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 {
-  MouseEventHandler,
-  ReactElement,
-  memo,
-  useMemo,
-  useEffect,
-} from "react";
-import {
-  Card as MuiCard,
-  CardActions as MuiCardActions,
-  CardActionArea as MuiCardActionArea,
-} from "@mui/material";
-import styled from "@emotion/styled";
-
-import {
-  Button,
-  ButtonContext,
-  MenuButton,
-  MenuButtonProps,
-} from "./Buttons/index.js";
-import { MoreIcon } from "./icons.generated/index.js";
-import {
-  DesignTokens,
-  useOdysseyDesignTokens,
-} from "./OdysseyDesignTokensContext.js";
-import { Heading5, Paragraph, Support } from "./Typography.js";
-import { Box } from "./Box.js";
-
-export const CARD_IMAGE_HEIGHT = "64px";
-
-export type CardProps = {
-  description?: string;
-  image?: ReactElement;
-  overline?: string;
-  title?: string;
-} & (
-  | {
-      onClick: MouseEventHandler;
-      button?: never;
-      menuButtonChildren?: never;
-    }
-  | {
-      onClick?: never;
-      button?: ReactElement<typeof Button>;
-      menuButtonChildren?: MenuButtonProps["children"];
-    }
-);
-
-const ImageContainer = styled("div", {
-  shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" && prop !== "hasMenuButtonChildren",
-})<{
-  odysseyDesignTokens: DesignTokens;
-  hasMenuButtonChildren: boolean;
-}>(({ odysseyDesignTokens, hasMenuButtonChildren }) => ({
-  display: "flex",
-  alignItems: "flex-start",
-  maxHeight: CARD_IMAGE_HEIGHT,
-  height: CARD_IMAGE_HEIGHT,
-  marginBlockEnd: odysseyDesignTokens.Spacing5,
-  paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0,
-}));
-
-const MenuButtonContainer = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
-  position: "absolute",
-  right: odysseyDesignTokens.Spacing3,
-  top: odysseyDesignTokens.Spacing3,
-}));
-
-const CardContentContainer = styled("div")(() => ({
-  display: "flex",
-}));
-
-const buttonProviderValue = { isFullWidth: true };
-
-const Card = ({
-  button,
-  description,
-  image,
-  menuButtonChildren,
-  onClick,
-  overline,
-  title,
-}: CardProps) => {
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-
-  const cardContent = useMemo(
-    () => (
-      <CardContentContainer>
-        <Box>
-          {image && (
-            <ImageContainer
-              odysseyDesignTokens={odysseyDesignTokens}
-              hasMenuButtonChildren={Boolean(menuButtonChildren)}
-            >
-              {image}
-            </ImageContainer>
-          )}
-
-          {overline && <Support component="div">{overline}</Support>}
-          {title && <Heading5 component="div">{title}</Heading5>}
-          {description && (
-            <Paragraph color="textSecondary">{description}</Paragraph>
-          )}
-
-          {button && (
-            <MuiCardActions>
-              <ButtonContext.Provider value={buttonProviderValue}>
-                {button}
-              </ButtonContext.Provider>
-            </MuiCardActions>
-          )}
-        </Box>
-      </CardContentContainer>
-    ),
-    [
-      button,
-      description,
-      image,
-      menuButtonChildren,
-      overline,
-      title,
-      odysseyDesignTokens,
-    ],
-  );
-
-  return (
-    <MuiCard className={onClick ? "isClickable" : ""}>
-      {onClick ? (
-        <MuiCardActionArea onClick={onClick}>{cardContent}</MuiCardActionArea>
-      ) : (
-        cardContent
-      )}
-
-      {menuButtonChildren && (
-        <MenuButtonContainer odysseyDesignTokens={odysseyDesignTokens}>
-          <MenuButton
-            endIcon={<MoreIcon />}
-            ariaLabel="Card menu"
-            buttonVariant="floating"
-            menuAlignment="right"
-            size="small"
-            tooltipText="Actions"
-          >
-            {menuButtonChildren}
-          </MenuButton>
-        </MenuButtonContainer>
-      )}
-    </MuiCard>
-  );
-};
-
-const MemoizedCard = memo(Card);
-MemoizedCard.displayName = "Card";
-
-/**
- * @deprecated The 'Tile' component is now called 'Card'. Please update your references as 'Tile' will be deprecated soon.
- */
-const Tile = (props: CardProps) => {
-  useEffect(() => {
-    console.warn(
-      "Warning: The 'Tile' component is now called 'Card'. Please update your references as 'Tile' will be deprecated soon.",
-    );
-  }, []);
-
-  return <MemoizedCard {...props} />;
-};
-
-const MemoizedTile = memo(Tile);
-MemoizedTile.displayName = "Tile";
-
-export { MemoizedCard as Card, MemoizedTile as Tile };

package/src/Checkbox.tsx

@@ -1,261 +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 { useTranslation } from "react-i18next";
-import { memo, useCallback, useMemo, useRef, useImperativeHandle } from "react";
-import {
-  Checkbox as MuiCheckbox,
-  CheckboxProps as MuiCheckboxProps,
-  FormControlLabel,
-  FormControlLabelProps as MuiFormControlLabelProps,
-  FormHelperText,
-} from "@mui/material";
-import styled from "@emotion/styled";
-
-import { CheckedFieldProps } from "./FormCheckedProps.js";
-import type { HtmlProps } from "./HtmlProps.js";
-import {
-  ComponentControlledState,
-  FocusHandle,
-  getControlState,
-} from "./inputUtils.js";
-import { FieldComponentProps } from "./FieldComponentProps.js";
-import {
-  useOdysseyDesignTokens,
-  DesignTokens,
-} from "./OdysseyDesignTokensContext.js";
-import { Typography } from "./Typography.js";
-import { useUniqueId } from "./useUniqueId.js";
-
-export const checkboxValidityValues = ["valid", "invalid", "inherit"] as const;
-
-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 CheckboxProps = {
-  /**
-   * The ref forwarded to the Checkbox
-   */
-  inputRef?: React.RefObject<FocusHandle>;
-  /**
-   * Determines whether the Checkbox is in an indeterminate state
-   */
-  isIndeterminate?: boolean;
-  /**
-   * Determines whether the Checkbox is required
-   */
-  isRequired?: boolean;
-  /**
-   * The label text for the Checkbox
-   */
-  label?: string;
-  /**
-   * The checkbox validity, if different from its enclosing group. Defaults to "inherit".
-   */
-  validity?: (typeof checkboxValidityValues)[number];
-  /**
-   * The value attribute of the Checkbox
-   */
-  value?: string;
-  /**
-   * Callback fired when the blur event happens. Provides event value.
-   */
-  onBlur?: MuiFormControlLabelProps["onBlur"];
-} & Pick<
-  FieldComponentProps,
-  "hint" | "id" | "isDisabled" | "isReadOnly" | "name"
-> &
-  CheckedFieldProps<MuiCheckboxProps> &
-  Pick<HtmlProps, "ariaLabel" | "ariaLabelledBy" | "testId" | "translate">;
-
-const Checkbox = ({
-  ariaLabel,
-  ariaLabelledBy,
-  id: idOverride,
-  inputRef,
-  isChecked,
-  isDefaultChecked,
-  isDisabled,
-  isIndeterminate,
-  isReadOnly = false,
-  isRequired,
-  label: labelProp,
-  hint,
-  name: nameOverride,
-  onChange: onChangeProp,
-  onBlur: onBlurProp,
-  testId,
-  translate,
-  validity = "inherit",
-  value,
-}: CheckboxProps) => {
-  const { t } = useTranslation();
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-  const id = useUniqueId(idOverride);
-  const hintId = hint ? `${id}-hint` : undefined;
-
-  const controlledStateRef = useRef(
-    getControlState({
-      controlledValue: isChecked,
-      uncontrolledValue: isDefaultChecked,
-    }),
-  );
-  const inputValues = useMemo(() => {
-    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {
-      return { checked: isChecked };
-    }
-    return { defaultChecked: isDefaultChecked };
-  }, [isDefaultChecked, isChecked]);
-
-  const localInputRef = useRef<HTMLInputElement>(null);
-  useImperativeHandle(
-    inputRef,
-    () => ({
-      focus: () => {
-        localInputRef.current?.focus();
-      },
-    }),
-    [],
-  );
-
-  const label = useMemo(() => {
-    return (
-      <>
-        <Typography component="span">{labelProp}</Typography>
-        {isRequired && (
-          <>
-            {" "}
-            <Typography component="span" color="textSecondary">
-              ({t("fieldlabel.required.text")})
-            </Typography>
-          </>
-        )}
-      </>
-    );
-  }, [isRequired, labelProp, t]);
-
-  const onChange = useCallback<NonNullable<MuiCheckboxProps["onChange"]>>(
-    (event, checked) => {
-      onChangeProp?.(event, checked);
-    },
-    [onChangeProp],
-  );
-
-  const onClick = useCallback<NonNullable<MuiCheckboxProps["onClick"]>>(
-    (event) => {
-      if (isReadOnly) {
-        event.stopPropagation();
-        event.preventDefault();
-      }
-    },
-    [isReadOnly],
-  );
-
-  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps["onBlur"]>>(
-    (event) => {
-      onBlurProp?.(event);
-    },
-    [onBlurProp],
-  );
-
-  const checkboxStyles = useMemo(
-    () => ({
-      alignItems: "flex-start",
-
-      ...(isReadOnly && {
-        cursor: "default",
-        "& .MuiTypography-root": {
-          cursor: "default",
-        },
-      }),
-
-      ...(hint && {
-        // needed to override specific :not(:last-child) selector
-        ":not(:last-child)": {
-          marginBlockEnd: 0,
-        },
-      }),
-    }),
-    [hint, isReadOnly],
-  );
-
-  return (
-    <>
-      <FormControlLabel
-        sx={checkboxStyles}
-        aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledBy}
-        className={
-          validity === "invalid"
-            ? "Mui-error"
-            : validity === "valid"
-              ? "Mui-valid"
-              : ""
-        }
-        control={
-          <MuiCheckbox
-            {...inputValues}
-            indeterminate={isIndeterminate}
-            onChange={onChange}
-            onClick={
-              onClick as unknown as React.MouseEventHandler<HTMLButtonElement>
-            }
-            required={isRequired}
-            inputProps={{
-              "aria-describedby": hintId,
-              "aria-readonly": isReadOnly,
-              "data-se": testId,
-              readOnly: isReadOnly,
-            }}
-            disabled={isDisabled}
-            inputRef={localInputRef}
-            sx={{
-              marginBlockStart: "2px",
-            }}
-          />
-        }
-        disabled={isDisabled}
-        id={idOverride}
-        label={label}
-        name={nameOverride ?? idOverride}
-        value={value}
-        required={isRequired}
-        onBlur={onBlur}
-        translate={translate}
-      />
-      {hint && (
-        <HintContainerWithInlineStartSpacing
-          odysseyDesignTokens={odysseyDesignTokens}
-        >
-          <FormHelperText id={hintId} translate={translate}>
-            {hint}
-          </FormHelperText>
-        </HintContainerWithInlineStartSpacing>
-      )}
-    </>
-  );
-};
-
-const MemoizedCheckbox = memo(Checkbox);
-MemoizedCheckbox.displayName = "Checkbox";
-
-export { MemoizedCheckbox as Checkbox };