@okta/odyssey-react-mui 1.6.0 → 1.6.2

package/src/TextField.tsx

@@ -10,7 +10,6 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { InputAdornment, InputBase } from "@mui/material";
 import {
   ChangeEventHandler,
   FocusEventHandler,
@@ -20,7 +19,9 @@ import {
   ReactElement,
   useCallback,
 } from "react";
+import { InputAdornment, InputBase } from "@mui/material";
 
+import { FieldComponentProps } from "./FieldComponentProps";
 import { Field } from "./Field";
 import { SeleniumProps } from "./SeleniumProps";
 
@@ -43,46 +44,18 @@ export type TextFieldProps = {
    * End `InputAdornment` for this component.
    */
   endAdornment?: string | ReactElement;
-  /**
-   * If `error` is not undefined, the `input` will indicate an error.
-   */
-  errorMessage?: string;
   /**
    * If `true`, the component will receive focus automatically.
    */
   hasInitialFocus?: 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`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
    */
   isMultiline?: 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.
    */
@@ -111,7 +84,8 @@ export type TextFieldProps = {
    * The value of the `input` element, required for a controlled component.
    */
   value?: string;
-} & SeleniumProps;
+} & FieldComponentProps &
+  SeleniumProps;
 
 const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   (

package/src/Tooltip.tsx

@@ -14,7 +14,7 @@ import { Tooltip as MuiTooltip } from "@mui/material";
 import type { TooltipProps as MuiTooltipProps } from "@mui/material";
 
 import { MuiPropsChild } from "./MuiPropsChild";
-import { ReactElement } from "react";
+import { ReactElement, memo } from "react";
 import { SeleniumProps } from "./SeleniumProps";
 
 export type TooltipProps = {
@@ -36,7 +36,7 @@ export type TooltipProps = {
   text: string;
 } & SeleniumProps;
 
-export const Tooltip = ({
+const Tooltip = ({
   ariaType,
   children,
   placement = "top",
@@ -52,3 +52,8 @@ export const Tooltip = ({
     <MuiPropsChild>{children}</MuiPropsChild>
   </MuiTooltip>
 );
+
+const MemoizedTooltip = memo(Tooltip);
+MemoizedTooltip.displayName = "Tooltip";
+
+export { MemoizedTooltip as Tooltip };

package/src/createShadowRootElement.ts

@@ -0,0 +1,21 @@
+/*!
+ * 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 const createShadowRootElement = (containerElement: HTMLElement) => {
+  const shadowRoot = containerElement.attachShadow({ mode: "open" });
+
+  const ShadowRootElement = document.createElement("div");
+
+  shadowRoot.append(ShadowRootElement);
+
+  return createShadowRootElement;
+};

package/src/index.ts

@@ -66,10 +66,11 @@ export * from "./Callout";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./CircularProgress";
-export * from "./createShadowDom";
+export * from "./createShadowRootElement";
 export * from "./createUniqueId";
 export * from "./Dialog";
 export * from "./Fieldset";
+export * from "./FieldComponentProps";
 export * from "./Form";
 export * from "./Link";
 export * from "./MenuButton";

package/src/theme/components.tsx

@@ -53,10 +53,10 @@ import { CSSProperties } from "react";
 
 export const components = ({
   odysseyTokens,
-  shadowRootElement,
+  shadowDomElement,
 }: {
   odysseyTokens: DesignTokens;
-  shadowRootElement?: HTMLDivElement;
+  shadowDomElement?: HTMLDivElement;
 }): ThemeOptions["components"] => {
   return {
     MuiAccordion: {
@@ -303,7 +303,7 @@ export const components = ({
     },
     MuiAlertTitle: {
       styleOverrides: {
-        root: {
+        root: ({ ownerState }) => ({
           marginBlockStart: 0,
           marginBlockEnd: odysseyTokens.Spacing2,
           lineHeight: odysseyTokens.TypographyLineHeightHeading6,
@@ -311,10 +311,26 @@ export const components = ({
           fontWeight: odysseyTokens.TypographyWeightHeading,
           fontFamily: odysseyTokens.TypographyFamilyHeading,
 
+          ...(ownerState.severity === "info" && {
+            color: odysseyTokens.PalettePrimaryDark,
+          }),
+
+          ...(ownerState.severity === "error" && {
+            color: odysseyTokens.PaletteDangerDarker,
+          }),
+
+          ...(ownerState.severity === "success" && {
+            color: odysseyTokens.PaletteSuccessDarker,
+          }),
+
+          ...(ownerState.severity === "warning" && {
+            color: odysseyTokens.PaletteWarningDarker,
+          }),
+
           [`&:last-child`]: {
             marginBlockEnd: 0,
           },
-        },
+        }),
       },
     },
     MuiAutocomplete: {
@@ -788,7 +804,7 @@ export const components = ({
           [`&.${chipClasses.disabled}`]: {
             opacity: 1,
             pointerEvents: "none",
-            backgroundColor: odysseyTokens.HueNeutral50,
+            backgroundColor: odysseyTokens.HueNeutral200,
             color: odysseyTokens.TypographyColorDisabled,
           },
 
@@ -908,6 +924,11 @@ export const components = ({
 
         label: {
           padding: 0,
+
+          [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
+            color: odysseyTokens.TypographyColorDisabled,
+            WebkitTextFillColor: odysseyTokens.TypographyColorDisabled,
+          } satisfies CSSProperties,
         },
 
         deleteIcon: {
@@ -1854,7 +1875,7 @@ export const components = ({
     },
     MuiModal: {
       defaultProps: {
-        container: shadowRootElement,
+        container: shadowDomElement,
       },
     },
     MuiNativeSelect: {
@@ -1894,7 +1915,7 @@ export const components = ({
     },
     MuiPopover: {
       defaultProps: {
-        container: shadowRootElement,
+        container: shadowDomElement,
       },
       styleOverrides: {
         paper: {
@@ -1907,7 +1928,7 @@ export const components = ({
     },
     MuiPopper: {
       defaultProps: {
-        container: shadowRootElement,
+        container: shadowDomElement,
       },
     },
     MuiRadio: {
@@ -2075,19 +2096,17 @@ export const components = ({
           maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} / 2)`,
           minWidth: "unset",
           minHeight: "unset",
-          padding: `${odysseyTokens.Spacing4} 0`,
+          padding: `${odysseyTokens.Spacing4} ${odysseyTokens.Spacing1}`,
+          fontSize: odysseyTokens.TypographySizeHeading6,
           fontFamily: odysseyTokens.TypographyFamilyHeading,
           lineHeight: odysseyTokens.TypographyLineHeightUi,
           overflow: "visible",
-
-          ...(ownerState.textColor === "inherit" && {
-            color: "inherit",
-            opacity: 1,
-          }),
+          color: odysseyTokens.HueNeutral600,
+          opacity: 1,
 
           ...(ownerState.selected == true && {
             color: odysseyTokens.TypographyColorAction,
-            fontWeight: odysseyTokens.TypographyWeightBodyBold,
+            fontWeight: odysseyTokens.TypographyWeightHeading,
           }),
 
           ...(ownerState.disabled && {

package/src/theme/createOdysseyMuiTheme.ts

@@ -29,15 +29,15 @@ export type DesignTokensOverride = Partial<typeof Tokens>;
 
 export const createOdysseyMuiTheme = ({
   odysseyTokens,
-  shadowRootElement,
+  shadowDomElement,
 }: {
   odysseyTokens: DesignTokens;
-  shadowRootElement?: HTMLDivElement;
+  shadowDomElement?: HTMLDivElement;
 }) =>
   createTheme({
     components: components({
       odysseyTokens,
-      shadowRootElement,
+      shadowDomElement,
     }),
     mixins: mixins({ odysseyTokens }),
     palette: palette({ odysseyTokens }),

package/dist/createShadowDom.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"createShadowDom.js","names":["createShadowDom","containerElement","shadowContainer","attachShadow","mode","emotionRootElement","document","createElement","shadowRootElement","appendChild"],"sources":["../src/createShadowDom.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport const createShadowDom = (containerElement: HTMLElement) => {\n  const shadowContainer = containerElement.attachShadow({ mode: \"open\" });\n  const emotionRootElement = document.createElement(\"style\");\n  const shadowRootElement = document.createElement(\"div\");\n\n  shadowContainer.appendChild(emotionRootElement);\n  shadowContainer.appendChild(shadowRootElement);\n\n  return {\n    emotionRootElement,\n    shadowRootElement,\n  };\n};\n\n// --DOCS--\n\n// const {\n//   emotionRootElement,\n//   shadowRootElement,\n// } = (\n//   createShadowDom(\n//     document.querySelector('#root') as HTMLElement\n//   )\n// )\n\n// ReactDOM\n// .createRoot(\n//   shadowRootElement\n// )\n// .render(\n//   <OdysseyProvider emotionRootElement={emotionRootElement} shadowRootElement={shadowRootElement}>\n//     <App />\n//   </OdysseyProvider>\n// )\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMA,eAAe,GAAIC,gBAA6B,IAAK;EAChE,MAAMC,eAAe,GAAGD,gBAAgB,CAACE,YAAY,CAAC;IAAEC,IAAI,EAAE;EAAO,CAAC,CAAC;EACvE,MAAMC,kBAAkB,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;EAC1D,MAAMC,iBAAiB,GAAGF,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAEvDL,eAAe,CAACO,WAAW,CAACJ,kBAAkB,CAAC;EAC/CH,eAAe,CAACO,WAAW,CAACD,iBAAiB,CAAC;EAE9C,OAAO;IACLH,kBAAkB;IAClBG;EACF,CAAC;AACH,CAAC"}

package/dist/src/createShadowDom.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"createShadowDom.d.ts","sourceRoot":"","sources":["../../src/createShadowDom.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,eAAe,qBAAsB,WAAW;;;CAY5D,CAAC"}

package/src/createShadowDom.ts

@@ -1,46 +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 const createShadowDom = (containerElement: HTMLElement) => {
-  const shadowContainer = containerElement.attachShadow({ mode: "open" });
-  const emotionRootElement = document.createElement("style");
-  const shadowRootElement = document.createElement("div");
-
-  shadowContainer.appendChild(emotionRootElement);
-  shadowContainer.appendChild(shadowRootElement);
-
-  return {
-    emotionRootElement,
-    shadowRootElement,
-  };
-};
-
-// --DOCS--
-
-// const {
-//   emotionRootElement,
-//   shadowRootElement,
-// } = (
-//   createShadowDom(
-//     document.querySelector('#root') as HTMLElement
-//   )
-// )
-
-// ReactDOM
-// .createRoot(
-//   shadowRootElement
-// )
-// .render(
-//   <OdysseyProvider emotionRootElement={emotionRootElement} shadowRootElement={shadowRootElement}>
-//     <App />
-//   </OdysseyProvider>
-// )