@okta/odyssey-react-mui 1.6.0 → 1.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -51,7 +51,7 @@
     "@mui/system": "^5.14.9",
     "@mui/utils": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "1.6.0",
+    "@okta/odyssey-design-tokens": "1.6.2",
     "date-fns": "^2.30.0",
     "i18next": "^23.5.1",
     "material-react-table": "^1.14.0",
@@ -63,5 +63,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "03b8e69263df83250402101d7637a5ede3578099"
+  "gitHead": "01feb062b03dc39ba97724277fd289eaa0000a5b"
 }

package/src/Autocomplete.tsx

@@ -18,6 +18,7 @@ import {
 import { memo, useCallback } from "react";
 
 import { Field } from "./Field";
+import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
 
 export type AutocompleteProps<
@@ -25,10 +26,6 @@ export type AutocompleteProps<
   HasMultipleChoices extends boolean | undefined,
   IsCustomValueAllowed extends boolean | undefined
 > = {
-  /**
-   * The error message for the Select
-   */
-  errorMessage?: string;
   /**
    * Enables multiple choice selection
    */
@@ -38,14 +35,6 @@ export type AutocompleteProps<
     undefined,
     IsCustomValueAllowed
   >["multiple"];
-  /**
-   * The hint text for the Autocomplete input
-   */
-  hint?: string;
-  /**
-   * The id attribute of the Select
-   */
-  id?: string;
   /**
    * Allows the input of custom values
    */
@@ -73,10 +62,6 @@ export type AutocompleteProps<
     undefined,
     IsCustomValueAllowed
   >["loading"];
-  /**
-   * If `true`, the `input` element is not required.
-   */
-  isOptional?: boolean;
   /**
    * Makes the Autocomplete input read-only
    */
@@ -90,10 +75,6 @@ export type AutocompleteProps<
    * The label text for the autocomplete input
    */
   label: string;
-  /**
-   * The name of the `input` element. Defaults to the `id` if not set.
-   */
-  name?: string;
   /**
    * Callback fired when the autocomplete loses focus.
    */
@@ -148,7 +129,11 @@ export type AutocompleteProps<
     undefined,
     IsCustomValueAllowed
   >["value"];
-} & SeleniumProps;
+} & Pick<
+  FieldComponentProps,
+  "errorMessage" | "hint" | "id" | "isOptional" | "name"
+> &
+  SeleniumProps;
 
 const Autocomplete = <
   OptionType,

package/src/Checkbox.tsx

@@ -10,15 +10,16 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { useTranslation } from "react-i18next";
+import { memo, useCallback, useMemo, useState } from "react";
 import {
   Checkbox as MuiCheckbox,
   CheckboxProps as MuiCheckboxProps,
   FormControlLabel,
 } from "@mui/material";
-import { Typography } from "./Typography";
-import { memo, useCallback, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
 
+import { FieldComponentProps } from "./FieldComponentProps";
+import { Typography } from "./Typography";
 import type { SeleniumProps } from "./SeleniumProps";
 
 export const checkboxValidityValues = ["valid", "invalid", "inherit"] as const;
@@ -32,18 +33,10 @@ export type CheckboxProps = {
    * The ID of the element that labels the Checkbox
    */
   ariaLabelledBy?: string;
-  /**
-   * The id of the `input` element.
-   */
-  id?: string;
   /**
    * Determines whether the Checkbox is checked
    */
   isDefaultChecked?: boolean;
-  /**
-   * Determines whether the Checkbox is disabled
-   */
-  isDisabled?: boolean;
   /**
    * Determines whether the Checkbox is in an indeterminate state
    */
@@ -56,10 +49,6 @@ export type CheckboxProps = {
    * The label text for the Checkbox
    */
   label?: string;
-  /**
-   * The name of the `input` element. Defaults to the `id` if not set.
-   */
-  name?: string;
   /**
    * The change event handler for the Checkbox
    */
@@ -72,7 +61,8 @@ export type CheckboxProps = {
    * The value attribute of the Checkbox
    */
   value?: string;
-} & SeleniumProps;
+} & Pick<FieldComponentProps, "id" | "isDisabled" | "name"> &
+  SeleniumProps;
 
 const Checkbox = ({
   ariaLabel,

package/src/CheckboxGroup.tsx

@@ -15,6 +15,7 @@ import { memo, ReactElement, useCallback } from "react";
 
 import { Checkbox } from "./Checkbox";
 import { Field } from "./Field";
+import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
 
 export type CheckboxGroupProps = {
@@ -24,18 +25,6 @@ export type CheckboxGroupProps = {
   children:
     | ReactElement<typeof Checkbox>
     | Array<ReactElement<typeof Checkbox>>;
-  /**
-   * The error message for the CheckboxGroup
-   */
-  errorMessage?: string;
-  /**
-   * The hint text for the CheckboxGroup
-   */
-  hint?: string;
-  /**
-   * If `true`, the CheckboxGroup is disabled
-   */
-  isDisabled?: boolean;
   /**
    * If `true`, the CheckboxGroup is required
    */
@@ -44,7 +33,8 @@ export type CheckboxGroupProps = {
    * The label text for the CheckboxGroup
    */
   label: string;
-} & SeleniumProps;
+} & Pick<FieldComponentProps, "errorMessage" | "hint" | "isDisabled"> &
+  SeleniumProps;
 
 const CheckboxGroup = ({
   children,

package/src/FieldComponentProps.ts

@@ -0,0 +1,42 @@
+/*!
+ * 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.
+ */
+
+export type FieldComponentProps = {
+  /**
+   * If `error` is not undefined, the `input` will indicate an error.
+   */
+  errorMessage?: string;
+  /**
+   * The helper text content.
+   */
+  hint?: string;
+  /**
+   * The id of the `input` element.
+   */
+  id?: string;
+  /**
+   * If `true`, the component is disabled.
+   */
+  isDisabled?: 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;
+};

package/src/NativeSelect.tsx

@@ -14,7 +14,7 @@ import { ReactElement, forwardRef, memo, useCallback } from "react";
 import { Select as MuiSelect } from "@mui/material";
 import { SelectProps as MuiSelectProps } from "@mui/material";
 import { Field } from "./Field";
-
+import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
 
 export type NativeSelectOption = {
@@ -32,30 +32,10 @@ export type NativeSelectProps = {
    * The default value of the NativeSelect. Only applicable if `value` is not provided
    */
   defaultValue?: string;
-  /**
-   * The error message for the NativeSelect
-   */
-  errorMessage?: string;
-  /**
-   * The hint text for the NativeSelect
-   */
-  hint?: string;
-  /**
-   * The id attribute of the NativeSelect
-   */
-  id?: string;
-  /**
-   * If `true`, the NativeSelect is disabled
-   */
-  isDisabled?: boolean;
   /**
    * If `true`, the NativeSelect allows multiple selections
    */
   isMultiSelect?: boolean;
-  /**
-   * If `true`, the NativeSelect is optional
-   */
-  isOptional?: boolean;
   /**
    * The label text for the NativeSelect
    */
@@ -76,7 +56,11 @@ export type NativeSelectProps = {
    * The value or values selected in the NativeSelect
    */
   value?: string | string[];
-} & SeleniumProps;
+} & Pick<
+  FieldComponentProps,
+  "errorMessage" | "hint" | "id" | "isDisabled" | "isOptional"
+> &
+  SeleniumProps;
 
 const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
   (

package/src/OdysseyCacheProvider.tsx

@@ -28,19 +28,29 @@ export type OdysseyCacheProviderProps = {
    * Emotion renders into this HTML element.
    * When enabling this prop, Emotion renders at the top of this component rather than the bottom like it does in the HTML `<head>`.
    */
-  emotionRootElement?: HTMLStyleElement;
   nonce?: string;
+  shadowDomElement?: HTMLDivElement;
   stylisPlugins?: StylisPlugin[];
 };
 
 const OdysseyCacheProvider = ({
   children,
-  emotionRootElement,
   nonce,
+  shadowDomElement,
   stylisPlugins,
 }: OdysseyCacheProviderProps) => {
   const uniqueAlphabeticalId = useUniqueAlphabeticalId();
 
+  const emotionRootElement = useMemo(() => {
+    const emotionRootElement = document.createElement("div");
+
+    emotionRootElement.setAttribute("data-emotion-root", "data-emotion-root");
+
+    shadowDomElement?.prepend?.(emotionRootElement);
+
+    return emotionRootElement;
+  }, [shadowDomElement]);
+
   const emotionCache = useMemo(
     () =>
       createCache({

package/src/OdysseyProvider.tsx

@@ -35,8 +35,7 @@ export type OdysseyProviderProps = OdysseyCacheProviderProps &
 const OdysseyProvider = ({
   children,
   designTokensOverride,
-  emotionRootElement,
-  shadowRootElement,
+  shadowDomElement,
   languageCode,
   nonce,
   stylisPlugins,
@@ -44,13 +43,13 @@ const OdysseyProvider = ({
   translationOverrides,
 }: OdysseyProviderProps) => (
   <OdysseyCacheProvider
-    emotionRootElement={emotionRootElement}
     nonce={nonce}
+    shadowDomElement={shadowDomElement}
     stylisPlugins={stylisPlugins}
   >
     <OdysseyThemeProvider
       designTokensOverride={designTokensOverride}
-      shadowRootElement={shadowRootElement}
+      shadowDomElement={shadowDomElement}
       themeOverride={themeOverride}
     >
       <ScopedCssBaseline>

package/src/OdysseyThemeProvider.tsx

@@ -25,14 +25,14 @@ import { OdysseyDesignTokensContext } from "./OdysseyDesignTokensContext";
 export type OdysseyThemeProviderProps = {
   children: ReactNode;
   designTokensOverride?: DesignTokensOverride;
-  shadowRootElement?: HTMLDivElement;
+  shadowDomElement?: HTMLDivElement;
   themeOverride?: ThemeOptions;
 };
 
 const OdysseyThemeProvider = ({
   children,
   designTokensOverride,
-  shadowRootElement,
+  shadowDomElement,
   themeOverride,
 }: OdysseyThemeProviderProps) => {
   const odysseyTokens = useMemo(
@@ -43,9 +43,9 @@ const OdysseyThemeProvider = ({
     () =>
       createOdysseyMuiTheme({
         odysseyTokens,
-        shadowRootElement,
+        shadowDomElement,
       }),
-    [odysseyTokens, shadowRootElement]
+    [odysseyTokens, shadowDomElement]
   );
 
   const customOdysseyTheme = useMemo(

package/src/PasswordField.tsx

@@ -22,6 +22,7 @@ import {
 
 import { ShowIcon, HideIcon } from "./icons.generated";
 import { Field } from "./Field";
+import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
 import { useTranslation } from "react-i18next";
 
@@ -32,10 +33,6 @@ export type PasswordFieldProps = {
    * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
    */
   autoCompleteType?: "current-password" | "new-password";
-  /**
-   * If `error` is not undefined, the `input` will indicate an error.
-   */
-  errorMessage?: string;
   /**
    * If `true`, the component will receive focus automatically.
    */
@@ -44,34 +41,10 @@ export type PasswordFieldProps = {
    * If `true`, the show/hide icon is not shown to the user
    */
   hasShowPassword?: boolean;
-  /**
-   * The helper text content.
-   */
-  hint?: string;
-  /**
-   * The id of the `input` element.
-   */
-  id?: string;
-  /**
-   * If `true`, the component is disabled.
-   */
-  isDisabled?: 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 label for the `input` element.
    */
   label: string;
-  /**
-   * The name of the `input` element. Defaults to the `id` if not set.
-   */
-  name?: string;
   /**
    * Callback fired when the `input` element loses focus.
    */
@@ -92,7 +65,8 @@ export type PasswordFieldProps = {
    * The value of the `input` element, required for a controlled component.
    */
   value?: string;
-} & SeleniumProps;
+} & FieldComponentProps &
+  SeleniumProps;
 
 const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
   (

package/src/Radio.tsx

@@ -15,6 +15,7 @@ import { memo } from "react";
 
 import { FormControlLabel } from "@mui/material";
 
+import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
 
 export type RadioProps = {
@@ -22,10 +23,6 @@ export type RadioProps = {
    * If `true`, the Radio is selected
    */
   isChecked?: boolean;
-  /**
-   * If `true`, the Radio is disabled
-   */
-  isDisabled?: boolean;
   /**
    * If `true`, the Radio has an invalid value
    */
@@ -34,15 +31,12 @@ export type RadioProps = {
    * The label text for the Radio
    */
   label: string;
-  /**
-   * The name attribute of the Radio
-   */
-  name?: string;
   /**
    * The value attribute of the Radio
    */
   value: string;
-} & SeleniumProps;
+} & Pick<FieldComponentProps, "isDisabled" | "name"> &
+  SeleniumProps;
 
 const Radio = ({
   isChecked,

package/src/RadioGroup.tsx

@@ -18,6 +18,7 @@ import { memo, ReactElement, useCallback } from "react";
 
 import { Radio, RadioProps } from "./Radio";
 import { Field } from "./Field";
+import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
 
 export type RadioGroupProps = {
@@ -29,30 +30,10 @@ export type RadioGroupProps = {
    * The text value of the Radio that should be selected by default
    */
   defaultValue?: string;
-  /**
-   * The error text for an invalid RadioGroup
-   */
-  errorMessage?: string;
-  /**
-   * Optional hint text
-   */
-  hint?: string;
-  /**
-   * The id of the `input` element.
-   */
-  id?: string;
-  /**
-   * Disables the whole RadioGroup
-   */
-  isDisabled?: boolean;
   /**
    * The text label for the RadioGroup
    */
   label: string;
-  /**
-   * The name of the `input` element. Defaults to the `id` if not set.
-   */
-  name?: string;
   /**
    * Listen for changes in the browser that change `value`
    */
@@ -61,7 +42,11 @@ export type RadioGroupProps = {
    * The `value` on the selected Radio
    */
   value?: RadioProps["value"];
-} & SeleniumProps;
+} & Pick<
+  FieldComponentProps,
+  "errorMessage" | "hint" | "id" | "isDisabled" | "name"
+> &
+  SeleniumProps;
 
 const RadioGroup = ({
   children,

package/src/SearchField.tsx

@@ -23,6 +23,7 @@ import {
 
 import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated";
 import { Field } from "./Field";
+import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
 
 export type SearchFieldProps = {
@@ -36,22 +37,10 @@ export type SearchFieldProps = {
    * If `true`, the component will receive focus automatically.
    */
   hasInitialFocus?: boolean;
-  /**
-   * The id of the `input` element.
-   */
-  id?: string;
-  /**
-   * If `true`, the component is disabled.
-   */
-  isDisabled?: boolean;
   /**
    * This label won't show up visually, but it's required for accessibility.
    */
   label: string;
-  /**
-   * The name of the `input` element. Defaults to the `id` if not set.
-   */
-  name?: string;
   /**
    * Callback fired when the `input` element loses focus.
    */
@@ -76,7 +65,8 @@ export type SearchFieldProps = {
    * The value of the `input` element, required for a controlled component.
    */
   value?: string;
-} & SeleniumProps;
+} & Pick<FieldComponentProps, "id" | "isDisabled" | "name"> &
+  SeleniumProps;
 
 const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
   (

package/src/Select.tsx

@@ -21,9 +21,11 @@ import {
   Select as MuiSelect,
 } from "@mui/material";
 import { SelectProps as MuiSelectProps } from "@mui/material";
+
 import { Field } from "./Field";
-import type { SeleniumProps } from "./SeleniumProps";
+import { FieldComponentProps } from "./FieldComponentProps";
 import { CheckIcon } from "./icons.generated";
+import type { SeleniumProps } from "./SeleniumProps";
 
 export type SelectOption = {
   text: string;
@@ -38,43 +40,19 @@ export type SelectProps<
   Value extends SelectValueType<HasMultipleChoices>,
   HasMultipleChoices extends boolean
 > = {
-  /**
-   * The error message for the Select
-   */
-  errorMessage?: string;
   /**
    * If `true`, the Select allows multiple selections
    */
   hasMultipleChoices?: HasMultipleChoices;
-  /**
-   * The hint text for the Select
-   */
-  hint?: string;
-  /**
-   * The id attribute of the Select
-   */
-  id?: string;
-  /**
-   * If `true`, the Select is disabled
-   */
-  isDisabled?: boolean;
   /**
    * @deprecated Use `hasMultipleChoices` instead.
    */
   /** **Deprecated:** use `hasMultipleChoices` */
   isMultiSelect?: HasMultipleChoices;
-  /**
-   * If `true`, the Select is optional
-   */
-  isOptional?: boolean;
   /**
    * The label text for the Select
    */
   label: string;
-  /**
-   * The name of the `input` element. Defaults to the `id` if not set.
-   */
-  name?: string;
   /**
    * Callback fired when the Select loses focus
    */
@@ -95,7 +73,11 @@ export type SelectProps<
    * The value or values selected in the Select
    */
   value?: Value;
-} & SeleniumProps;
+} & Pick<
+  FieldComponentProps,
+  "errorMessage" | "hint" | "id" | "isDisabled" | "isOptional" | "name"
+> &
+  SeleniumProps;
 
 /**
  * Options in Odyssey <Select> are passed as an array, which can contain any combination