@okta/odyssey-react-mui 1.32.0 → 1.32.4

package/src/Drawer.tsx

@@ -1,255 +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 {
-  memo,
-  ReactElement,
-  ReactNode,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-
-import { Drawer as MuiDrawer } from "@mui/material";
-import styled from "@emotion/styled";
-import { useTranslation } from "react-i18next";
-
-import { Button } from "./Buttons/index.js";
-import { CloseIcon } from "./icons.generated/index.js";
-import {
-  DesignTokens,
-  useOdysseyDesignTokens,
-} from "./OdysseyDesignTokensContext.js";
-import { Heading5 } from "./Typography.js";
-import type { HtmlProps } from "./HtmlProps.js";
-
-export const variantValues = ["temporary", "persistent"] as const;
-
-export type DrawerProps = {
-  /**
-   * An optional Button object to be situated in the Drawerfooter. Should almost always be of variant `primary`.
-   */
-  primaryCallToActionComponent?: ReactElement<typeof Button>;
-  /**
-   * An optional Button object to be situated in the Drawer footer, alongside the `callToActionPrimaryComponent`.
-   */
-  secondaryCallToActionComponent?: ReactElement<typeof Button>;
-  /**
-   * An optional Button object to be situated in the Drawer footer, alongside the other two `callToAction` components.
-   */
-  tertiaryCallToActionComponent?: ReactElement<typeof Button>;
-  /**
-   * The content of the Drawer. May be a `string` or any other `ReactNode` or array of `ReactNode`s.
-   */
-  children?: ReactNode;
-  /**
-   * When set to `true`, the Drawer will be visible.
-   */
-  isOpen?: boolean;
-  /**
-   * Callback that controls what happens when the Drawer is dismissed
-   */
-  onClose: () => void;
-  /**
-   * Shows divider lines separating header, content, and footer (if using action buttons)
-   */
-  showDividers: boolean;
-  /**
-   * The title of the Drawer
-   */
-  title?: string;
-  /**
-   * Type of Drawer
-   */
-  variant?: (typeof variantValues)[number];
-} & Pick<HtmlProps, "ariaLabel" | "testId" | "translate">;
-
-interface DrawerStyleProps {
-  odysseyDesignTokens: DesignTokens;
-  showDividers: boolean;
-}
-const DrawerHeader = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<DrawerStyleProps>`
-  position: sticky;
-  top: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: 0;
-  padding: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing4}
-    ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing5};
-  color: ${({ odysseyDesignTokens }) => odysseyDesignTokens.HueNeutral900};
-  background-color: ${({ odysseyDesignTokens }) =>
-    odysseyDesignTokens.HueNeutralWhite};
-  border-bottom: ${({ showDividers, odysseyDesignTokens }) =>
-    showDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : "none"};
-`;
-
-const DrawerContentWrapper = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<{
-  odysseyDesignTokens: DesignTokens;
-}>`
-  overflow-y: auto;
-`;
-
-const DrawerContent = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<DrawerStyleProps>`
-  padding: ${({ showDividers, odysseyDesignTokens }) =>
-    showDividers
-      ? `${odysseyDesignTokens.Spacing5}`
-      : `0 ${odysseyDesignTokens.Spacing5}`};
-`;
-
-const DrawerFooter = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<DrawerStyleProps>`
-  position: sticky;
-  bottom: 0;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  align-content: center;
-  padding: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing4};
-  border-top: ${({ showDividers, odysseyDesignTokens }) =>
-    showDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : "none"};
-  background-color: ${({ odysseyDesignTokens }) =>
-    odysseyDesignTokens.HueNeutralWhite};
-`;
-
-const Drawer = ({
-  ariaLabel,
-  children,
-  isOpen,
-  onClose,
-  primaryCallToActionComponent,
-  secondaryCallToActionComponent,
-  showDividers = false,
-  tertiaryCallToActionComponent,
-  testId,
-  title,
-  translate,
-  variant = "temporary",
-}: DrawerProps) => {
-  const [isContentScrollable, setIsContentScrollable] = useState(false);
-  const drawerContentRef = useRef<HTMLDivElement>(null);
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-
-  //If RTL is set in the theme, align the drawer on the left side of the screen, uses right by default.
-  const { i18n } = useTranslation();
-  const anchorDirection = i18n.dir() === "rtl" ? "left" : "right";
-
-  useEffect(() => {
-    let frameId: number;
-
-    const handleContentScroll = () => {
-      const drawerContentElement = drawerContentRef.current;
-      if (drawerContentElement) {
-        cancelAnimationFrame(frameId);
-        setIsContentScrollable(
-          drawerContentElement.scrollHeight > drawerContentElement.clientHeight,
-        );
-      }
-      frameId = requestAnimationFrame(handleContentScroll);
-    };
-
-    if (isOpen) {
-      frameId = requestAnimationFrame(handleContentScroll);
-    }
-
-    return () => {
-      cancelAnimationFrame(frameId);
-    };
-  }, [isOpen]);
-
-  const dividersVisible = useMemo(() => {
-    return showDividers || isContentScrollable;
-  }, [showDividers, isContentScrollable]);
-
-  const hasFooter = useMemo(
-    () =>
-      primaryCallToActionComponent ||
-      secondaryCallToActionComponent ||
-      tertiaryCallToActionComponent,
-    [
-      primaryCallToActionComponent,
-      secondaryCallToActionComponent,
-      tertiaryCallToActionComponent,
-    ],
-  );
-
-  return (
-    <MuiDrawer
-      data-se={testId}
-      anchor={anchorDirection}
-      open={isOpen}
-      onClose={onClose}
-      variant={variant}
-      sx={{
-        //Overrides defualt MUI inline style
-        ...(variant === "persistent" && {
-          "& .MuiDrawer-paper": {
-            transition: "none",
-          },
-        }),
-      }}
-    >
-      <DrawerContentWrapper
-        {...(isContentScrollable && {
-          //Sets tabIndex on content element if scrollable so content is easier to navigate with the keyboard
-          tabIndex: 0,
-        })}
-        odysseyDesignTokens={odysseyDesignTokens}
-        ref={drawerContentRef}
-      >
-        <DrawerHeader
-          translate={translate}
-          odysseyDesignTokens={odysseyDesignTokens}
-          showDividers={dividersVisible}
-        >
-          <Heading5>{title}</Heading5>
-          <Button
-            ariaLabel={ariaLabel}
-            onClick={onClose}
-            size="small"
-            startIcon={<CloseIcon />}
-            variant="floating"
-          />
-        </DrawerHeader>
-        <DrawerContent
-          showDividers={dividersVisible}
-          odysseyDesignTokens={odysseyDesignTokens}
-        >
-          {children}
-        </DrawerContent>
-      </DrawerContentWrapper>
-      {hasFooter && (
-        <DrawerFooter
-          odysseyDesignTokens={odysseyDesignTokens}
-          showDividers={dividersVisible}
-        >
-          {tertiaryCallToActionComponent}
-          {secondaryCallToActionComponent}
-          {primaryCallToActionComponent}
-        </DrawerFooter>
-      )}
-    </MuiDrawer>
-  );
-};
-
-const MemoizedDrawer = memo(Drawer);
-MemoizedDrawer.displayName = "Drawer";
-
-export { MemoizedDrawer as Drawer };

package/src/EmptyState.tsx

@@ -1,79 +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 { ReactNode, memo } from "react";
-import { Heading4, Paragraph } from "./Typography.js";
-import { Box } from "./Box.js";
-import styled from "@emotion/styled";
-import {
-  useOdysseyDesignTokens,
-  DesignTokens,
-} from "./OdysseyDesignTokensContext.js";
-
-const EmptyContainer = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
-  display: "flex",
-  flexDirection: "column",
-  marginBlock: odysseyDesignTokens.Spacing9,
-  padding: odysseyDesignTokens.Spacing5,
-  textAlign: "center",
-  width: "100%",
-  alignItems: "center",
-}));
-
-export type EmptyStateProps = {
-  /**
-   * Main heading of the empty state
-   */
-  heading: string;
-  /**
-   * A descriptive text explaining more context as to why we don't have data.
-   */
-  description: string;
-  /**
-   * Primary call to action
-   */
-  PrimaryCallToActionComponent?: ReactNode;
-  /**
-   * Secondary call to action
-   */
-  SecondaryCallToActionComponent?: ReactNode;
-};
-
-const EmptyState = ({
-  heading,
-  description,
-  PrimaryCallToActionComponent,
-  SecondaryCallToActionComponent,
-}: EmptyStateProps) => {
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-
-  return (
-    <EmptyContainer odysseyDesignTokens={odysseyDesignTokens}>
-      <Heading4>{heading}</Heading4>
-      <Paragraph>{description}</Paragraph>
-      {(PrimaryCallToActionComponent || SecondaryCallToActionComponent) && (
-        <Box sx={{ marginBlockStart: 5 }}>
-          {SecondaryCallToActionComponent}
-          {PrimaryCallToActionComponent}
-        </Box>
-      )}
-    </EmptyContainer>
-  );
-};
-
-const MemoizedEmptyState = memo(EmptyState);
-MemoizedEmptyState.displayName = "EmptyState";
-
-export { MemoizedEmptyState as EmptyState };
-export { MemoizedEmptyState as DataTableEmptyState };

package/src/ErrorMessageList.tsx

@@ -1,56 +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 { List as MuiList, ListItem as MuiListItem } from "@mui/material";
-import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
-import { memo, useMemo } from "react";
-
-export type ErrorMessageListProps = {
-  errorMessages: string[];
-};
-
-const listItemStyles = {
-  display: "list-item",
-  paddingInlineStart: 0,
-};
-
-const ErrorMessageList = ({ errorMessages }: ErrorMessageListProps) => {
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-
-  const listStyles = useMemo(
-    () => ({
-      listStyle: "disc",
-      paddingInlineStart: odysseyDesignTokens.Spacing4,
-    }),
-    [odysseyDesignTokens],
-  );
-
-  return (
-    <MuiList disablePadding dense sx={listStyles}>
-      {errorMessages.map((errorMessage) => (
-        <MuiListItem
-          key={errorMessage}
-          disablePadding
-          dense
-          sx={listItemStyles}
-        >
-          {errorMessage}
-        </MuiListItem>
-      ))}
-    </MuiList>
-  );
-};
-
-const MemoizedErrorMessageList = memo(ErrorMessageList);
-MemoizedErrorMessageList.displayName = "ErrorMessageList";
-
-export { MemoizedErrorMessageList as ErrorMessageList };

package/src/Field.tsx

@@ -1,189 +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, useMemo } from "react";
-import {
-  FormControl as MuiFormControl,
-  FormLabel as MuiFormLabel,
-} from "@mui/material";
-import { FieldComponentProps } from "./FieldComponentProps.js";
-import { FieldError } from "./FieldError.js";
-import { FieldHint } from "./FieldHint.js";
-import { FieldLabel } from "./FieldLabel.js";
-import { HtmlProps } from "./HtmlProps.js";
-import { Typography } from "./Typography.js";
-import { useFieldset } from "./FieldsetContext.js";
-import { useTranslation } from "react-i18next";
-import { useUniqueId } from "./useUniqueId.js";
-
-export const fieldTypeValues = ["single", "group"] as const;
-
-export type RenderFieldComponentProps = {
-  ariaDescribedBy?: string;
-  dataSe?: string;
-  errorMessageElementId?: string;
-  id: string;
-  labelElementId: string;
-  isReadOnly?: boolean;
-};
-
-export type FieldProps = {
-  /**
-   * If `error` is not undefined, the `input` will indicate an error.
-   */
-  errorMessageList?: string[];
-  /**
-   * The field type determines how ARIA components are setup. It's important to use this to denote if you expect only one component (like a text field) or multiple (like a radio group).
-   */
-  fieldType: (typeof fieldTypeValues)[number];
-  /**
-   * If `true`, the Field label will be shown
-   */
-  hasVisibleLabel: boolean;
-  /**
-   * Important for narrowing down the `fieldset` role to "radiogroup".
-   */
-  isRadioGroup?: boolean;
-  /**
-   * Important for determining if children inherit error state
-   */
-  isCheckboxGroup?: boolean;
-  /**
-   * The label for the `input` element.
-   */
-  label: string;
-  /**
-   * The short hint displayed in the `input` before the user enters a value.
-   */
-  placeholder?: string;
-  /**
-   * Render-props function that sends back ARIA props to your field component.
-   */
-  renderFieldComponent: ({
-    ariaDescribedBy,
-    dataSe,
-    errorMessageElementId,
-    id,
-    labelElementId,
-    isReadOnly,
-  }: RenderFieldComponentProps) => ReactElement;
-};
-
-const Field = ({
-  ariaDescribedBy,
-  errorMessage,
-  errorMessageList,
-  fieldType,
-  hasVisibleLabel,
-  hint,
-  HintLinkComponent,
-  id: idOverride,
-  isDisabled: isDisabledProp = false,
-  isFullWidth = false,
-  isRadioGroup = false,
-  isOptional = false,
-  isReadOnly = false,
-  label,
-  renderFieldComponent,
-}: FieldProps &
-  Pick<
-    FieldComponentProps,
-    | "errorMessage"
-    | "errorMessageList"
-    | "hint"
-    | "HintLinkComponent"
-    | "id"
-    | "isDisabled"
-    | "isFullWidth"
-    | "isOptional"
-    | "isReadOnly"
-  > &
-  Pick<HtmlProps, "ariaDescribedBy">) => {
-  const { t } = useTranslation();
-
-  const id = useUniqueId(idOverride);
-  const hintId = hint ? `${id}-hint` : undefined;
-  const errorMessageElementId =
-    errorMessage || errorMessageList ? `${id}-error` : undefined;
-  const labelElementId = `${id}-label`;
-
-  const localAriaDescribedBy = useMemo(
-    () =>
-      [hintId, errorMessageElementId, ariaDescribedBy].join(" ").trim() ||
-      undefined,
-    [ariaDescribedBy, errorMessageElementId, hintId],
-  );
-
-  const { isDisabled: isFieldsetDisabled } = useFieldset();
-
-  const isDisabled = useMemo(
-    () => isDisabledProp || isFieldsetDisabled,
-    [isDisabledProp, isFieldsetDisabled],
-  );
-
-  return (
-    <MuiFormControl
-      component={fieldType === "group" ? "fieldset" : "div"}
-      disabled={isDisabled}
-      error={
-        Boolean(errorMessage) ||
-        (Array.isArray(errorMessageList) && errorMessageList.length > 0)
-      }
-      role={isRadioGroup ? "radiogroup" : undefined}
-      fullWidth={isFullWidth}
-    >
-      {fieldType === "group" ? (
-        <MuiFormLabel component="legend" id={labelElementId}>
-          {label}{" "}
-          {isOptional && label && (
-            <Typography component="span" color="textSecondary">
-              ({t("fieldlabel.optional.text")})
-            </Typography>
-          )}
-        </MuiFormLabel>
-      ) : (
-        <FieldLabel
-          hasVisibleLabel={hasVisibleLabel}
-          id={labelElementId}
-          inputId={id}
-          isOptional={isOptional}
-          text={label}
-        />
-      )}
-
-      {hint && (
-        <FieldHint id={hintId} LinkComponent={HintLinkComponent} text={hint} />
-      )}
-
-      {renderFieldComponent({
-        ariaDescribedBy: localAriaDescribedBy,
-        errorMessageElementId,
-        id,
-        labelElementId,
-        isReadOnly,
-      })}
-
-      {(errorMessage || errorMessageList) && (
-        <FieldError
-          id={errorMessageElementId}
-          message={errorMessage}
-          messageList={errorMessageList}
-        />
-      )}
-    </MuiFormControl>
-  );
-};
-
-const MemoizedField = memo(Field);
-MemoizedField.displayName = "Field";
-
-export { MemoizedField as Field };

package/src/FieldComponentProps.ts

@@ -1,66 +0,0 @@
-/*!
- * Copyright (c) 2021-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 { ReactElement } from "react";
-
-import { HintLink } from "./HintLink.js";
-
-export type FieldComponentProps = {
-  /**
-   * If `error` is not undefined, the `input` will indicate an error.
-   */
-  errorMessage?: string;
-  /**
-   * If `error` is not undefined, the `input` will indicate multiple errors.
-   */
-  errorMessageList?: string[];
-  /**
-   * The helper text content.
-   */
-  hint?: string;
-  /**
-   * A `Link` component to provide greater context that is rendered at the end of the `hint` text
-   */
-  HintLinkComponent?: ReactElement<typeof HintLink>;
-  /**
-   * The id of the `input` element.
-   */
-  id?: string;
-  /**
-   * If `true`, the component is disabled.
-   */
-  isDisabled?: boolean;
-  /**
-   * If `true`, the component can stretch to fill the width of the container.
-   */
-  isFullWidth?: boolean;
-  /**
-   * If `true`, the `input` element is not required.
-   */
-  isOptional?: boolean;
-  /**
-   * It prevents the user from changing the value of the field
-   */
-  isReadOnly?: boolean;
-  /**
-   * The name of the `input` element. Defaults to the `id` if not set.
-   */
-  name?: string;
-};
-
-export type FieldComponentRenderProps = {
-  ariaDescribedBy: string;
-  dataSe: string;
-  errorMessageElementId: string;
-  id: string;
-  labelElementId: string;
-};

package/src/FieldError.tsx

@@ -1,59 +0,0 @@
-/*!
- * 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 "@mui/material";
-import { useTranslation } from "react-i18next";
-
-import { Box } from "./Box.js";
-import { ErrorMessageList } from "./ErrorMessageList.js";
-import type { HtmlProps } from "./HtmlProps.js";
-import { ScreenReaderText } from "./ScreenReaderText.js";
-
-export type FieldErrorProps = {
-  id?: string;
-  message?: string;
-  messageList?: string[];
-} & Pick<HtmlProps, "testId" | "translate">;
-
-const FieldError = ({
-  id,
-  message,
-  messageList,
-  testId,
-  translate,
-}: FieldErrorProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <FormHelperText
-      component="div"
-      data-se={testId}
-      error
-      id={id}
-      translate={translate}
-    >
-      <ScreenReaderText translate={translate}>{`${t(
-        "fielderror.screenreader.text",
-      )}:`}</ScreenReaderText>
-      <Box>
-        {message}
-        {messageList && <ErrorMessageList errorMessages={messageList} />}
-      </Box>
-    </FormHelperText>
-  );
-};
-
-const MemoizedFieldError = memo(FieldError);
-MemoizedFieldError.displayName = "FieldError";
-
-export { MemoizedFieldError as FieldError };