@okta/odyssey-react-mui 1.32.0 → 1.33.0

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

package/src/CheckboxGroup.tsx

@@ -1,127 +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 React, { memo, ReactNode, useCallback, useMemo } from "react";
-import { FormGroup as MuiFormGroup } from "@mui/material";
-import { CheckboxProps } from "./Checkbox.js";
-import { Field } from "./Field.js";
-import {
-  FieldComponentProps,
-  FieldComponentRenderProps,
-} from "./FieldComponentProps.js";
-import type { HtmlProps } from "./HtmlProps.js";
-
-export type CheckboxGroupProps = {
-  /**
-   * A single Checkbox element or an array of Checkbox elements
-   */
-  children: ReactNode;
-  /**
-   * If `true`, the CheckboxGroup is required
-   */
-  isRequired?: boolean;
-  /**
-   * The label text for the CheckboxGroup
-   */
-  label: string;
-} & Pick<
-  FieldComponentProps,
-  | "errorMessage"
-  | "errorMessageList"
-  | "hint"
-  | "HintLinkComponent"
-  | "id"
-  | "isDisabled"
-  | "isReadOnly"
-> &
-  Pick<HtmlProps, "ariaDescribedBy" | "testId" | "translate">;
-
-type CheckboxGroupRenderProps = Pick<
-  FieldComponentRenderProps,
-  "id" | "labelElementId"
-> &
-  Partial<
-    Pick<FieldComponentRenderProps, "ariaDescribedBy" | "errorMessageElementId">
-  >;
-
-const CheckboxGroup = ({
-  ariaDescribedBy,
-  children,
-  errorMessage,
-  errorMessageList,
-  hint,
-  HintLinkComponent,
-  id: idOverride,
-  isDisabled,
-  isReadOnly = false,
-  isRequired = false,
-  label,
-  testId,
-  translate,
-}: CheckboxGroupProps) => {
-  const memoizedChildren = useMemo(
-    () =>
-      React.Children.map(children, (child) => {
-        if (React.isValidElement<CheckboxProps>(child)) {
-          return React.cloneElement(child, {
-            isReadOnly,
-            isDisabled: isDisabled || child.props.isDisabled,
-          });
-        }
-        return child;
-      }),
-    [children, isReadOnly, isDisabled],
-  );
-
-  const renderFieldComponent = useCallback(
-    ({
-      ariaDescribedBy,
-      errorMessageElementId,
-      id,
-      labelElementId,
-    }: CheckboxGroupRenderProps) => (
-      <MuiFormGroup
-        aria-describedby={ariaDescribedBy}
-        aria-errormessage={errorMessageElementId}
-        aria-labelledby={labelElementId}
-        data-se={testId}
-        id={id}
-        translate={translate}
-      >
-        {memoizedChildren}
-      </MuiFormGroup>
-    ),
-    [memoizedChildren, testId, translate],
-  );
-
-  return (
-    <Field
-      ariaDescribedBy={ariaDescribedBy}
-      errorMessage={errorMessage}
-      errorMessageList={errorMessageList}
-      fieldType="group"
-      hasVisibleLabel={true}
-      hint={hint}
-      HintLinkComponent={HintLinkComponent}
-      id={idOverride}
-      isDisabled={isDisabled}
-      isOptional={!isRequired}
-      label={label}
-      renderFieldComponent={renderFieldComponent}
-    />
-  );
-};
-
-const MemoizedCheckboxGroup = memo(CheckboxGroup);
-MemoizedCheckboxGroup.displayName = "CheckboxGroup";
-
-export { MemoizedCheckboxGroup as CheckboxGroup };

package/src/CircularProgress.tsx

@@ -1,42 +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 } from "react";
-import { CircularProgress as MuiCircularProgress } from "@mui/material";
-
-import type { HtmlProps } from "./HtmlProps.js";
-
-export type CircularProgressProps = {
-  /**
-   * The percentage filled the spinner should be, as an integer.
-   * If undefined, the spinner will spin perpetually.
-   */
-  value?: number;
-} & Pick<HtmlProps, "ariaLabel" | "testId">;
-
-const CircularProgress = ({
-  ariaLabel,
-  testId,
-  value,
-}: CircularProgressProps) => (
-  <MuiCircularProgress
-    data-se={testId}
-    value={value}
-    variant={value ? "determinate" : "indeterminate"}
-    aria-label={ariaLabel}
-  />
-);
-
-const MemoizedCircularProgress = memo(CircularProgress);
-MemoizedCircularProgress.displayName = "CircularProgress";
-
-export { MemoizedCircularProgress as CircularProgress };