@okta/odyssey-react-mui 1.32.0 → 1.33.0

package/src/HtmlProps.ts

@@ -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 { HTMLAttributes } from "react";
-
-export type HtmlProps = {
-  /**
-   * Used in [ARIA live regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions), the global aria-busy state indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
-   */
-  ariaBusy?: HTMLAttributes<HTMLElement>["aria-busy"];
-  /**
-   * The `aria-checked` attribute indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
-   *
-   * NOTE: Where possible use an HTML `<input>` element with `type="checkbox"` and `type="radio"` as these have built in semantics and do not require ARIA attributes.
-   */
-  ariaChecked?: HTMLAttributes<HTMLElement>["aria-checked"];
-  /**
-   * The global `aria-controls` property identifies the element (or elements) whose contents or presence are controlled by the element on which this attribute is set.
-   *
-   * Value: A space-separated list of one or more ID values referencing the elements being controlled by the current element
-   */
-  ariaControls?: HTMLAttributes<HTMLElement>["aria-controls"];
-  /**
-   * A non-null aria-current state on an element indicates that this element represents the current item within a container or set of related elements.
-   *
-   * Value:
-   * 
-   * `page`
-      Represents the current page within a set of pages such as the link to the current document in a breadcrumb.
-
-      `step`
-      Represents the current step within a process such as the current step in an enumerated multi step checkout flow.
-
-      `location`
-      Represents the current location within an environment or context such as the image that is visually highlighted as the current component of a flow chart.
-
-      `date`
-      Represents the current date within a collection of dates such as the current date within a calendar.
-
-      `time`
-      Represents the current time within a set of times such as the current time within a timetable.
-
-      `true`
-      Represents the current item within a set.
-
-      `false` (default)
-        Does not represent the current item within a set.
-   */
-  ariaCurrent?: HTMLAttributes<HTMLElement>["aria-current"];
-  /**
-   * The global `aria-describedby` attribute identifies the element (or elements) that describes the element on which the attribute is set.
-   *
-   * Value: The id or space-separated list of element ids that describe the current element.
-   *
-   * Note: The `aria-describedby` attribute is not designed to reference descriptions from external resources. It must reference elements in the same DOM document.
-   */
-  ariaDescribedBy?: HTMLAttributes<HTMLElement>["aria-describedby"];
-  /**
-   * The `aria-errormessage` attribute on an object identifies the element that provides an error message for that object.
-   *
-   * Value: The value of the id of the element containing the error message for the current element
-   */
-  ariaErrorMessage?: HTMLAttributes<HTMLElement>["aria-errormessage"];
-  /**
-   * The `aria-expanded` attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden.
-   */
-  ariaExpanded?: HTMLAttributes<HTMLElement>["aria-expanded"];
-  /**
-   * The `aria-haspopup` attribute indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.
-   */
-  ariaHasPopup?: HTMLAttributes<HTMLElement>["aria-haspopup"];
-  ariaHidden?: HTMLAttributes<HTMLElement>["aria-hidden"];
-  /**
-   * The `aria-label` attribute defines a string value that labels an interactive element.
-   */
-  ariaLabel?: HTMLAttributes<HTMLElement>["aria-label"];
-  /**
-   * The `aria-labelledby` attribute identifies the element (or elements) that labels the element it is applied to.
-   *
-   * Value: Space separated list of one or more ID values referencing the elements that label the current element.
-   */
-  ariaLabelledBy?: HTMLAttributes<HTMLElement>["aria-labelledby"];
-  /**
-   * The `aria-pressed` attribute indicates the current "pressed" state of a toggle button.
-   */
-  ariaPressed?: HTMLAttributes<HTMLElement>["aria-pressed"];
-  /**
-   * The `tabindex` global attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable
-   *
-   * Note: Manipulating the natural tab order is generally advised against
-   */
-  tabIndex?: HTMLAttributes<HTMLElement>["tabIndex"];
-  /**
-   * This prop puts a `data` attribute on an HTML element in this component with the value provided.
-   *
-   * @deprecated **WARNING:** You should be using Semantic Selectors instead of this property. This is a temporary measure for backwards compatibility with existing Selenium tests.
-   */
-  testId?: string;
-  /**
-   * This prop puts a `translate` attribute on an HTML element. It should be used to indicate whether text within the element should be translated.
-   */
-  translate?: "yes" | "no";
-};

package/src/IconWithTooltip.tsx

@@ -1,90 +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, ReactNode } from "react";
-import styled from "@emotion/styled";
-import { Tooltip as MuiTooltip } from "@mui/material";
-import type { TooltipProps as MuiTooltipProps } from "@mui/material";
-
-import { HtmlProps } from "./HtmlProps.js";
-import { InformationCircleIcon } from "./icons.generated/index.js";
-import { useMuiProps } from "./MuiPropsContext.js";
-import {
-  useOdysseyDesignTokens,
-  DesignTokens,
-} from "./OdysseyDesignTokensContext.js";
-
-const IconContainer = styled.span<{
-  odysseyDesignTokens: DesignTokens;
-}>(({ odysseyDesignTokens }) => ({
-  display: "inline-flex",
-  transitionProperty: "border-color, box-shadow, outline",
-  transitionDuration: odysseyDesignTokens.TransitionDurationMain,
-  border: "1px solid transparent",
-
-  "&:focus, &:focus-visible": {
-    borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,
-    boxShadow: `0 0 0 1px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,
-    outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`,
-    outlineOffset: odysseyDesignTokens.FocusOutlineOffsetTight,
-  },
-
-  svg: {
-    display: "flex",
-  },
-}));
-
-export type IconWithTooltipProps = {
-  /**
-   * The icon to render. Defaults to `InformationCircleIcon`
-   */
-  IconComponent?: ReactNode;
-  /**
-   * The placement of the Tooltip
-   */
-  placement?: MuiTooltipProps["placement"];
-  /**
-   * The text to display in the Tooltip
-   */
-  tooltipText: string;
-} & Pick<HtmlProps, "testId" | "translate">;
-
-const IconWithTooltip = ({
-  IconComponent = <InformationCircleIcon />,
-  placement = "right",
-  testId,
-  tooltipText,
-  translate,
-}: IconWithTooltipProps) => {
-  const muiProps = useMuiProps();
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-
-  return (
-    <MuiTooltip
-      data-se={testId}
-      describeChild
-      placement={placement}
-      tabIndex={0}
-      title={tooltipText}
-      translate={translate}
-    >
-      <IconContainer odysseyDesignTokens={odysseyDesignTokens} {...muiProps}>
-        {IconComponent}
-      </IconContainer>
-    </MuiTooltip>
-  );
-};
-
-const MemoizedIconWithTooltip = memo(IconWithTooltip);
-MemoizedIconWithTooltip.displayName = "IconWithTooltip";
-
-export { MemoizedIconWithTooltip as IconWithTooltip };

package/src/Link.tsx

@@ -1,115 +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, useImperativeHandle, useRef } from "react";
-import { ExternalLinkIcon } from "./icons.generated/index.js";
-import type { HtmlProps } from "./HtmlProps.js";
-import { FocusHandle } from "./inputUtils.js";
-
-import { Link as MuiLink, LinkProps as MuiLinkProps } from "@mui/material";
-
-export const linkVariantValues = ["default", "monochrome"] as const;
-
-export type LinkProps = {
-  /**
-   * The content within the Link
-   */
-  children: React.ReactNode;
-  /**
-   * The Link destination
-   */
-  href: string;
-  /**
-   * An optional Icon component at the start of the Link
-   */
-  icon?: ReactElement;
-  /**
-   * The ref forwarded to the TextField
-   */
-  linkRef?: React.RefObject<FocusHandle>;
-  /**
-   * The click event handler for the Link
-   */
-  onClick?: MuiLinkProps["onClick"];
-  /**
-   * The rel attribute defines the relationship between a linked resource and the current document
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
-   */
-  rel?: string;
-  /**
-   * The HTML `target` attribute for the Link
-   */
-  target?:
-    | "_self"
-    | "_blank"
-    | "_parent"
-    | "_top"
-    | (string & NonNullable<unknown>);
-  /**
-   * The visual presentation of the Link (default or monochrome)
-   */
-  variant?: (typeof linkVariantValues)[number];
-} & Pick<HtmlProps, "ariaLabel" | "testId" | "translate">;
-
-const Link = ({
-  ariaLabel,
-  children,
-  href,
-  icon,
-  linkRef,
-  rel,
-  target,
-  testId,
-  translate,
-  variant,
-  onClick,
-}: LinkProps) => {
-  const localLinkRef = useRef<HTMLAnchorElement>(null);
-  useImperativeHandle(linkRef, () => {
-    return {
-      focus: () => {
-        localLinkRef.current?.focus();
-      },
-    };
-  }, []);
-
-  return (
-    <MuiLink
-      aria-label={ariaLabel}
-      data-se={testId}
-      href={href}
-      ref={localLinkRef}
-      rel={rel}
-      target={target}
-      translate={translate}
-      variant={variant}
-      onClick={onClick}
-    >
-      {icon && <span className="Link-icon">{icon}</span>}
-
-      {children}
-
-      {target === "_blank" && (
-        <span className="Link-indicator" role="presentation">
-          <ExternalLinkIcon />
-        </span>
-      )}
-    </MuiLink>
-  );
-};
-
-const MemoizedLink = memo(Link);
-
-MemoizedLink.displayName = "Link";
-
-export { MemoizedLink as Link };

package/src/MuiPropsChild.tsx

@@ -1,42 +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 { forwardRef, memo, ReactNode, useMemo } from "react";
-
-import { MuiPropsContext, MuiPropsContextType } from "./MuiPropsContext.js";
-
-export type MuiPropsChildProps = {
-  children: ReactNode;
-};
-
-const MuiPropsChild = forwardRef<HTMLElement, MuiPropsChildProps>(
-  ({ children, ...muiProps }, ref) => {
-    const providerValue = useMemo<MuiPropsContextType>(
-      () => ({
-        ...muiProps,
-        ref,
-      }),
-      [muiProps, ref],
-    );
-
-    return (
-      <MuiPropsContext.Provider value={providerValue}>
-        {children}
-      </MuiPropsContext.Provider>
-    );
-  },
-);
-
-const MemoizedMuiPropsChild = memo(MuiPropsChild);
-MemoizedMuiPropsChild.displayName = "MuiPropsChild";
-
-export { MemoizedMuiPropsChild as MuiPropsChild };

package/src/MuiPropsContext.ts

@@ -1,18 +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 { createContext, useContext } from "react";
-
-export type MuiPropsContextType = Record<string, unknown>;
-export const MuiPropsContext = createContext<MuiPropsContextType>({});
-
-export const useMuiProps = () => useContext(MuiPropsContext);

package/src/NativeSelect.tsx

@@ -1,249 +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, {
-  InputHTMLAttributes,
-  ReactElement,
-  forwardRef,
-  memo,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from "react";
-import {
-  Select as MuiSelect,
-  SelectProps as MuiSelectProps,
-} from "@mui/material";
-import { Field } from "./Field.js";
-import {
-  FieldComponentProps,
-  FieldComponentRenderProps,
-} from "./FieldComponentProps.js";
-import type { HtmlProps } from "./HtmlProps.js";
-import { FocusHandle, getControlState, useInputValues } from "./inputUtils.js";
-
-export type NativeSelectOption = {
-  text: string;
-  value?: string;
-  type?: "heading" | "option";
-};
-
-export type NativeSelectValueType<HasMultipleChoices> =
-  HasMultipleChoices extends true ? string[] : string;
-
-export type NativeSelectProps<
-  Value extends NativeSelectValueType<HasMultipleChoices>,
-  HasMultipleChoices extends boolean,
-> = {
-  /**
-   * 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 options or optgroup elements within the NativeSelect
-   */
-  children?: ReactElement<"option"> | ReactElement<"optgroup">;
-  /**
-   * The default value of the NativeSelect. Use when component is uncontrolled
-   */
-  defaultValue?: Value;
-  /**
-   * If `true`, the Select allows multiple selections
-   */
-  hasMultipleChoices?: HasMultipleChoices;
-  /**
-   * The ref forwarded to the NativeSelect
-   */
-  inputRef?: React.RefObject<FocusHandle>;
-  /**
-   * @deprecated Use `hasMultipleChoices` instead
-   */
-  /** **Deprecated:** use `hasMultipleChoices` */
-  isMultiSelect?: HasMultipleChoices;
-  /**
-   * The label text for the NativeSelect
-   */
-  label: string;
-  /**
-   * Callback fired when the NativeSelect loses focus
-   */
-  onBlur?: MuiSelectProps<Value>["onBlur"];
-  /**
-   * Callback fired when the value of the NativeSelect changes
-   */
-  onChange?: MuiSelectProps<Value>["onChange"];
-  /**
-   * Callback fired when the NativeSelect gains focus
-   */
-  onFocus?: MuiSelectProps<Value>["onFocus"];
-  options: Value;
-  /**
-   * The value or values selected in the NativeSelect. Use when component is controlled
-   */
-  value?: Value;
-} & Pick<
-  FieldComponentProps,
-  | "errorMessage"
-  | "errorMessageList"
-  | "hint"
-  | "HintLinkComponent"
-  | "id"
-  | "isDisabled"
-  | "isFullWidth"
-  | "isOptional"
-> &
-  Pick<HtmlProps, "ariaDescribedBy" | "testId" | "translate">;
-
-type NativeSelectRenderProps = Partial<
-  Pick<FieldComponentRenderProps, "ariaDescribedBy" | "errorMessageElementId">
-> &
-  Pick<FieldComponentRenderProps, "labelElementId">;
-
-const NativeSelect = forwardRef(
-  <
-    Value extends NativeSelectValueType<HasMultipleChoices>,
-    HasMultipleChoices extends boolean,
-  >(
-    {
-      ariaDescribedBy,
-      autoCompleteType,
-      defaultValue,
-      errorMessage,
-      errorMessageList,
-      hasMultipleChoices: hasMultipleChoicesProp,
-      hint,
-      HintLinkComponent,
-      id: idOverride,
-      inputRef,
-      isDisabled = false,
-      isFullWidth = false,
-      isMultiSelect,
-      isOptional = false,
-      label,
-      onBlur,
-      onChange: onChangeProp,
-      onFocus,
-      testId,
-      translate,
-      value,
-      children,
-    }: NativeSelectProps<Value, HasMultipleChoices>,
-    ref?: React.Ref<ReactElement>,
-  ) => {
-    const controlledStateRef = useRef(
-      getControlState({
-        controlledValue: value,
-        uncontrolledValue: defaultValue,
-      }),
-    );
-    const localInputRef = useRef<HTMLSelectElement>(null);
-
-    useImperativeHandle(inputRef, () => {
-      return {
-        focus: () => {
-          localInputRef.current?.focus();
-        },
-      };
-    }, []);
-
-    const inputValues = useInputValues({
-      defaultValue,
-      value,
-      controlState: controlledStateRef.current,
-    });
-
-    const onChange = useCallback<
-      NonNullable<MuiSelectProps<Value>["onChange"]>
-    >(
-      (event, child) => {
-        onChangeProp?.(event, child);
-      },
-      [onChangeProp],
-    );
-
-    const hasMultipleChoices = useMemo(
-      () =>
-        hasMultipleChoicesProp === undefined
-          ? isMultiSelect
-          : hasMultipleChoicesProp,
-      [hasMultipleChoicesProp, isMultiSelect],
-    );
-    const renderFieldComponent = useCallback(
-      ({
-        ariaDescribedBy,
-        errorMessageElementId,
-        labelElementId,
-      }: NativeSelectRenderProps) => (
-        <MuiSelect
-          {...inputValues}
-          aria-describedby={ariaDescribedBy}
-          autoComplete={autoCompleteType}
-          children={children}
-          id={idOverride}
-          inputProps={{
-            "aria-errormessage": errorMessageElementId,
-            "aria-labelledby": labelElementId,
-            "data-se": testId,
-          }}
-          inputRef={localInputRef}
-          name={idOverride}
-          multiple={hasMultipleChoices}
-          native={true}
-          onBlur={onBlur}
-          onChange={onChange}
-          onFocus={onFocus}
-          ref={ref}
-          translate={translate}
-        />
-      ),
-      [
-        autoCompleteType,
-        children,
-        idOverride,
-        inputValues,
-        hasMultipleChoices,
-        onBlur,
-        onChange,
-        onFocus,
-        ref,
-        testId,
-        translate,
-      ],
-    );
-
-    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 MemoizedNativeSelect = memo(NativeSelect);
-MemoizedNativeSelect.displayName = "NativeSelect";
-
-export { MemoizedNativeSelect as NativeSelect };

package/src/NullElement.tsx

@@ -1,13 +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.
- */
-
-export type NullElement = false | null | undefined;

package/src/OdysseyCacheProvider.test.tsx

@@ -1,39 +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 { render, screen } from "@testing-library/react";
-import "@testing-library/jest-dom";
-import { Button } from "./index.js";
-import { OdysseyCacheProvider } from "./OdysseyCacheProvider.js";
-
-// This component needs to be tested, even if it doesn't make much sense, because it can't be loaded by Storybook; therefore, any issues will only be seen by consumers of Odyssey.
-describe("OdysseyCacheProvider", () => {
-  it("renders without crashing the app", () => {
-    expect(() =>
-      render(
-        <OdysseyCacheProvider>
-          <div />
-        </OdysseyCacheProvider>,
-      ),
-    ).not.toThrow();
-  });
-
-  it("themes a Button", () => {
-    render(
-      <OdysseyCacheProvider>
-        <Button label="text" variant="primary" />
-      </OdysseyCacheProvider>,
-    );
-
-    expect(screen.queryByRole("button")).toHaveTextContent("text");
-  });
-});