@okta/odyssey-react-mui 1.32.0 → 1.32.4

package/src/Accordion.tsx

@@ -1,117 +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 { ReactNode, memo } from "react";
-import type { HtmlProps } from "./HtmlProps.js";
-import {
-  Accordion as MuiAccordion,
-  AccordionDetails as MuiAccordionDetails,
-  AccordionSummary as MuiAccordionSummary,
-  AccordionProps as MuiAccordionProps,
-} from "@mui/material";
-import { ChevronDownIcon } from "./icons.generated/index.js";
-import { Support } from "./Typography.js";
-import { useUniqueId } from "./useUniqueId.js";
-
-export const accordionVariantValues = ["default", "borderless"] as const;
-
-export type AccordionProps = {
-  /**
-   * The content of the Accordion itself
-   */
-  children: ReactNode;
-  /**
-   * Defines IDs for the header and the content of the Accordion
-   */
-  id?: string;
-  /**
-   * The label text for the AccordionSummary
-   */
-  label: string;
-  /**
-   * Whether the item is expanded by default
-   */
-  isDefaultExpanded?: boolean;
-  /**
-   * Whether the item is disabled
-   */
-  isDisabled?: boolean;
-  /**
-   * Whether the item is expanded
-   */
-  isExpanded?: boolean;
-  /**
-   * Event fired when the expansion state of the accordion is changed
-   */
-  /**
-   * Visual style for the accordion (default or borderless)
-   */
-  variant?: (typeof accordionVariantValues)[number];
-  onChange?: MuiAccordionProps["onChange"];
-} & (
-  | {
-      isExpanded: boolean;
-      isDefaultExpanded?: never;
-    }
-  | {
-      isDefaultExpanded?: boolean;
-      isExpanded?: never;
-    }
-) &
-  Pick<HtmlProps, "testId" | "translate">;
-
-const Accordion = ({
-  children,
-  label,
-  id: idOverride,
-  isDefaultExpanded,
-  isDisabled,
-  isExpanded,
-  onChange,
-  testId,
-  translate,
-  variant = "default",
-}: AccordionProps) => {
-  const id = useUniqueId(idOverride);
-  const headerId = `${id}-header`;
-  const contentId = `${id}-content`;
-
-  return (
-    <MuiAccordion
-      data-se={testId}
-      data-ods-variant={variant}
-      defaultExpanded={isDefaultExpanded}
-      disabled={isDisabled}
-      disableGutters
-      expanded={isExpanded}
-      onChange={onChange}
-    >
-      <MuiAccordionSummary
-        aria-controls={contentId}
-        expandIcon={<ChevronDownIcon />}
-        id={headerId}
-      >
-        <Support component="div" translate={translate}>
-          {label}
-        </Support>
-      </MuiAccordionSummary>
-      <MuiAccordionDetails aria-labelledby={headerId}>
-        {children}
-      </MuiAccordionDetails>
-    </MuiAccordion>
-  );
-};
-
-const MemoizedAccordion = memo(Accordion);
-MemoizedAccordion.displayName = "Accordion";
-
-export { MemoizedAccordion as Accordion };

package/src/Autocomplete.tsx

@@ -1,321 +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 { useTranslation } from "react-i18next";
-import {
-  Autocomplete as MuiAutocomplete,
-  AutocompleteProps as MuiAutocompleteProps,
-  UseAutocompleteProps as MuiUseAutocompleteProps,
-} from "@mui/material";
-
-import { FieldComponentProps } from "./FieldComponentProps.js";
-import type { HtmlProps } from "./HtmlProps.js";
-import { PickerVirtualizationListBox } from "./labs/OdysseyPickers/PickerVirtualizationListBox.js";
-import { useAutocomplete } from "./useAutocomplete.js";
-import { TestSelector } from "./test-selectors/index.js";
-
-export const AutocompleteTestSelector = {
-  accessibleText: {
-    errorMessage: "errorMessage",
-    hint: "description",
-    label: "label",
-  },
-  children: {
-    list: {
-      children: {
-        listItem: {
-          elementSelector: {
-            method: "ByRole",
-            options: {
-              label: "name",
-            },
-            role: "option",
-          },
-        },
-      },
-      isControlledElement: true,
-    },
-  },
-  elementSelector: {
-    method: "ByRole",
-    options: {
-      label: "name",
-    },
-    role: "combobox",
-  },
-} as const satisfies TestSelector;
-// type SetItemSize = (size: number) => void;
-
-export type AutocompleteProps<
-  OptionType,
-  HasMultipleChoices extends boolean | undefined,
-  IsCustomValueAllowed extends boolean | undefined,
-> = {
-  /**
-   * The default value. Use when the component is not controlled.
-   */
-  defaultValue?: MuiUseAutocompleteProps<
-    OptionType,
-    HasMultipleChoices,
-    undefined,
-    IsCustomValueAllowed
-  >["defaultValue"];
-  /**
-   * Used to determine the string value for a given option. It's used to fill the input (and the list box options if renderOption is not provided). If used in free solo mode, it must accept both the type of the options and a string.
-   *
-   * `function(option: Value) => string`
-   */
-  getOptionLabel?: MuiUseAutocompleteProps<
-    OptionType,
-    HasMultipleChoices,
-    undefined,
-    IsCustomValueAllowed
-  >["getOptionLabel"];
-
-  /** Used to determine if the option represents the given value. Uses strict equality by default if none provided.
-   * Both arguments need to be handled, an option can only match with one value.
-   * option: the option to test
-   * value: the value to test against
-   *
-   * You will need to implement this function if your `option` items are objects.
-   */
-  getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;
-  /**
-   * Enables multiple choice selection
-   */
-  hasMultipleChoices?: MuiAutocompleteProps<
-    OptionType,
-    HasMultipleChoices,
-    undefined,
-    IsCustomValueAllowed
-  >["multiple"];
-  /**
-   * The value for the input
-   */
-  inputValue?: MuiUseAutocompleteProps<
-    OptionType,
-    HasMultipleChoices,
-    undefined,
-    IsCustomValueAllowed
-  >["inputValue"];
-  /**
-   * Allows the input of custom values
-   */
-  isCustomValueAllowed?: MuiAutocompleteProps<
-    OptionType,
-    HasMultipleChoices,
-    undefined,
-    IsCustomValueAllowed
-  >["freeSolo"];
-  /**
-   * Disables the Autocomplete input
-   */
-  isDisabled?: MuiAutocompleteProps<
-    OptionType,
-    HasMultipleChoices,
-    undefined,
-    IsCustomValueAllowed
-  >["disabled"];
-  /**
-   * Displays a loading indicator
-   */
-  isLoading?: MuiAutocompleteProps<
-    OptionType,
-    HasMultipleChoices,
-    undefined,
-    IsCustomValueAllowed
-  >["loading"];
-  /**
-   * Makes the Autocomplete input read-only
-   */
-  isReadOnly?: MuiAutocompleteProps<
-    OptionType,
-    HasMultipleChoices,
-    undefined,
-    IsCustomValueAllowed
-  >["readOnly"];
-  /**
-   * If this component is required to display a virtualized list of options,
-   * then this value needs to be set to true.
-   * It is recommended if you're options are on the order of 10's of hundreds or more.
-   */
-  isVirtualized?: boolean;
-  /**
-   * The label text for the autocomplete input
-   */
-  label: string;
-  /**
-   * The text to display when no options are available
-   *
-   * default: "No Options"
-   */
-  noOptionsText?: string;
-  /**
-   * Callback fired when the autocomplete loses focus.
-   */
-  onBlur?: MuiAutocompleteProps<
-    OptionType,
-    HasMultipleChoices,
-    undefined,
-    IsCustomValueAllowed
-  >["onBlur"];
-  /**
-   * Callback fired when a selection is made.
-   */
-  onChange?: MuiUseAutocompleteProps<
-    OptionType,
-    HasMultipleChoices,
-    undefined,
-    IsCustomValueAllowed
-  >["onChange"];
-  /**
-   * Callback fired when the textbox receives typed characters.
-   */
-  onInputChange?: MuiAutocompleteProps<
-    OptionType,
-    HasMultipleChoices,
-    undefined,
-    IsCustomValueAllowed
-  >["onInputChange"];
-  /**
-   * Callback fired when the autocomplete gains focus.
-   */
-  onFocus?: MuiAutocompleteProps<
-    OptionType,
-    HasMultipleChoices,
-    undefined,
-    IsCustomValueAllowed
-  >["onFocus"];
-  /**
-   * The options for the Autocomplete input
-   */
-  options: ReadonlyArray<OptionType>;
-  /**
-   * The value of the Autocomplete input
-   */
-  value?: MuiUseAutocompleteProps<
-    OptionType,
-    HasMultipleChoices,
-    undefined,
-    IsCustomValueAllowed
-  >["value"];
-} & Pick<
-  FieldComponentProps,
-  | "errorMessage"
-  | "errorMessageList"
-  | "hint"
-  | "HintLinkComponent"
-  | "id"
-  | "isFullWidth"
-  | "isOptional"
-  | "name"
-> &
-  Pick<HtmlProps, "ariaDescribedBy" | "testId" | "translate">;
-
-const Autocomplete = <
-  OptionType,
-  HasMultipleChoices extends boolean | undefined,
-  IsCustomValueAllowed extends boolean | undefined,
->({
-  ariaDescribedBy,
-  defaultValue,
-  errorMessage,
-  errorMessageList,
-  getOptionLabel,
-  hasMultipleChoices,
-  id: idOverride,
-  inputValue,
-  isCustomValueAllowed,
-  isDisabled,
-  isFullWidth = false,
-  isLoading,
-  isOptional = false,
-  isReadOnly,
-  isVirtualized = false,
-  hint,
-  HintLinkComponent,
-  label,
-  name: nameOverride,
-  noOptionsText,
-  onBlur,
-  onChange,
-  onInputChange,
-  onFocus,
-  options,
-  value,
-  getIsOptionEqualToValue,
-  testId,
-  translate,
-}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
-  const { t } = useTranslation();
-  const { inputValueProp, isVirtualizedRef, renderInput, valueProps } =
-    useAutocomplete<OptionType, HasMultipleChoices, IsCustomValueAllowed>({
-      ariaDescribedBy,
-      defaultValue,
-      errorMessage,
-      errorMessageList,
-      hasMultipleChoices,
-      hint,
-      HintLinkComponent,
-      inputValue,
-      isFullWidth,
-      isOptional,
-      isVirtualized,
-      label,
-      name: nameOverride,
-      testId,
-      value,
-    });
-
-  return (
-    <MuiAutocomplete
-      {...valueProps}
-      {...inputValueProp}
-      // conditionally provide the ListboxComponent if this needs to be virtualized
-      {...(isVirtualizedRef.current && {
-        ListboxComponent: PickerVirtualizationListBox,
-      })}
-      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div
-      aria-disabled={isDisabled}
-      clearText={t("clear.text")}
-      closeText={t("close.text")}
-      disableCloseOnSelect={hasMultipleChoices}
-      disabled={isDisabled}
-      freeSolo={isCustomValueAllowed}
-      filterSelectedOptions={true}
-      getOptionLabel={getOptionLabel}
-      id={idOverride}
-      fullWidth={isFullWidth}
-      loading={isLoading}
-      multiple={hasMultipleChoices}
-      noOptionsText={noOptionsText}
-      onBlur={onBlur}
-      onChange={onChange}
-      onInputChange={onInputChange}
-      onFocus={onFocus}
-      openText={t("open.text")}
-      options={options}
-      readOnly={isReadOnly}
-      renderInput={renderInput}
-      isOptionEqualToValue={getIsOptionEqualToValue}
-      translate={translate}
-    />
-  );
-};
-
-// Need the `typeof Autocomplete` because generics don't get passed through
-const MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;
-// @ts-expect-error displayName is expected to not be on `typeof Autocomplete`
-MemoizedAutocomplete.displayName = "Autocomplete";
-
-export { MemoizedAutocomplete as Autocomplete };

package/src/Badge.tsx

@@ -1,112 +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 { CSSProperties, memo, useMemo } from "react";
-
-import {
-  useOdysseyDesignTokens,
-  DesignTokens,
-} from "./OdysseyDesignTokensContext.js";
-import { Box } from "./Box.js";
-import type { HtmlProps } from "./HtmlProps.js";
-
-export const badgeContentMaxValues = [
-  10, 20, 30, 40, 50, 60, 70, 80, 90, 100,
-] as const;
-export const badgeTypeValues = ["default", "attention", "danger"] as const;
-
-export type BadgeProps = {
-  badgeContent: number;
-  badgeContentMax?: (typeof badgeContentMaxValues)[number];
-  type?: (typeof badgeTypeValues)[number];
-} & Pick<HtmlProps, "testId" | "translate">;
-
-const badgeTypeColors = (odysseyTokens: DesignTokens) => ({
-  default: {
-    background: odysseyTokens.HueNeutral200,
-    font: odysseyTokens.TypographyColorBody,
-  },
-  attention: {
-    background: odysseyTokens.PalettePrimaryMain,
-    font: odysseyTokens.TypographyColorInverse,
-  },
-  danger: {
-    background: odysseyTokens.PaletteDangerMain,
-    font: odysseyTokens.TypographyColorInverse,
-  },
-});
-
-const Badge = ({
-  badgeContent,
-  badgeContentMax = 100,
-  testId,
-  translate,
-  type = "default",
-}: BadgeProps) => {
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-
-  const renderBadge = useMemo(() => {
-    const greaterThanZeroContentMax = badgeContentMax > 0 ? badgeContentMax : 1;
-    const threeDigitLimitedMax =
-      greaterThanZeroContentMax > 999 ? 999 : greaterThanZeroContentMax;
-    const isOverContentMax = badgeContent > threeDigitLimitedMax;
-    const overContentMaxMessage = `${greaterThanZeroContentMax}+`;
-    const formattedContent = isOverContentMax
-      ? overContentMaxMessage
-      : badgeContent.toString();
-
-    const badgeStyles: CSSProperties = {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      minWidth: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,
-      height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,
-      minHeight: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,
-      // 6px horizontal padding per design requirements
-      padding: "0 6px",
-      backgroundColor: badgeTypeColors(odysseyDesignTokens)[type].background,
-      color: badgeTypeColors(odysseyDesignTokens)[type].font,
-      borderRadius:
-        formattedContent.length > 1
-          ? `${odysseyDesignTokens.BorderRadiusOuter}`
-          : "50%",
-      fontSize: `${odysseyDesignTokens.TypographyScale0}`,
-      fontFamily: `${odysseyDesignTokens.TypographyFamilyMono}`,
-      fontWeight: `${odysseyDesignTokens.TypographyWeightBodyBold}`,
-      lineHeight: 1,
-      transitionDuration: `${odysseyDesignTokens.TransitionDurationMain}`,
-      transitionProperty: `background-color, color`,
-    };
-
-    const hasNotificationCount = badgeContent && badgeContent > 0;
-
-    return hasNotificationCount ? (
-      <Box sx={badgeStyles} testId={testId} translate={translate}>
-        {formattedContent}
-      </Box>
-    ) : null;
-  }, [
-    badgeContent,
-    badgeContentMax,
-    odysseyDesignTokens,
-    testId,
-    translate,
-    type,
-  ]);
-
-  return renderBadge;
-};
-
-const MemoizedBadge = memo(Badge);
-MemoizedBadge.displayName = "Badge";
-
-export { MemoizedBadge as Badge };

package/src/Banner.tsx

@@ -1,112 +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 { useTranslation } from "react-i18next";
-import { Alert, AlertColor, AlertTitle, AlertProps } from "@mui/material";
-
-import type { HtmlProps } from "./HtmlProps.js";
-import { Link, LinkProps } from "./Link.js";
-import { ScreenReaderText } from "./ScreenReaderText.js";
-
-export const bannerRoleValues = ["status", "alert"] as const;
-export const bannerSeverityValues: AlertColor[] = [
-  "success",
-  "info",
-  "warning",
-  "error",
-];
-
-export type BannerProps = {
-  /**
-   * The function that's fired when the user clicks the close button. If undefined,
-   * the close button will not be shown.
-   */
-  onClose?: AlertProps["onClose"];
-  /**
-   * Sets the ARIA role of the alert
-   * ("status" for something that dynamically updates, "alert" for errors, null for something
-   * unchanging)
-   */
-  role?: (typeof bannerRoleValues)[number];
-  /**
-   * Determine the color and icon of the alert
-   */
-  severity: (typeof bannerSeverityValues)[number];
-  /**
-   * The text content of the alert
-   */
-  text: string;
-} & Pick<HtmlProps, "testId" | "translate"> &
-  (
-    | {
-        linkRel?: LinkProps["rel"];
-        linkTarget?: LinkProps["target"];
-        linkText: string;
-        /**
-         * If defined, the Banner will include a link to the URL
-         */
-        linkUrl: LinkProps["href"];
-      }
-    | {
-        linkRel?: never;
-        linkTarget?: never;
-        linkText?: never;
-        linkUrl?: never;
-      }
-  );
-
-const Banner = ({
-  linkRel,
-  linkTarget,
-  linkText,
-  linkUrl,
-  onClose,
-  role,
-  severity,
-  text,
-  testId,
-  translate,
-}: BannerProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <Alert
-      data-se={testId}
-      onClose={onClose}
-      role={role}
-      severity={severity}
-      variant="banner"
-    >
-      <ScreenReaderText translate={translate}>
-        {t(`severity.${severity}`)}
-      </ScreenReaderText>
-      <AlertTitle translate={translate}>{text}</AlertTitle>
-      {linkUrl && (
-        <Link
-          href={linkUrl}
-          rel={linkRel}
-          target={linkTarget}
-          translate={translate}
-          variant="monochrome"
-        >
-          {linkText}
-        </Link>
-      )}
-    </Alert>
-  );
-};
-
-const MemoizedBanner = memo(Banner);
-MemoizedBanner.displayName = "Banner";
-
-export { MemoizedBanner as Banner };

package/src/Box.tsx

@@ -1,44 +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 { Box as MuiBox, BoxProps as MuiBoxProps } from "@mui/material";
-import { AriaRole, ReactNode, forwardRef, memo } from "react";
-
-import type { HtmlProps } from "./HtmlProps.js";
-
-export type BoxProps = {
-  children?: ReactNode;
-  component?: MuiBoxProps["component"];
-  id?: MuiBoxProps["id"];
-  role?: AriaRole;
-  sx?: MuiBoxProps["sx"];
-} & Pick<HtmlProps, "testId" | "translate">;
-
-const Box = forwardRef<HTMLElement, BoxProps>(
-  ({ children, component, id, role, sx, testId, translate }, ref) => (
-    <MuiBox
-      ref={ref}
-      children={children}
-      component={component}
-      data-se={testId}
-      id={id}
-      role={role}
-      sx={sx}
-      translate={translate}
-    />
-  ),
-);
-
-const MemoizedBox = memo(Box);
-MemoizedBox.displayName = "Box";
-
-export { MemoizedBox as Box };