npm - @okta/odyssey-react-mui - Versions diffs - 1.5.0 → 1.6.1 - Mend

@okta/odyssey-react-mui 1.5.0 → 1.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

package/CHANGELOG.md +19 -0
package/dist/OdysseyCacheProvider.js +7 -1
package/dist/OdysseyCacheProvider.js.map +1 -1
package/dist/OdysseyProvider.js +3 -4
package/dist/OdysseyProvider.js.map +1 -1
package/dist/OdysseyThemeProvider.js +3 -3
package/dist/OdysseyThemeProvider.js.map +1 -1
package/dist/PasswordField.js +1 -1
package/dist/PasswordField.js.map +1 -1
package/dist/Select.js +23 -25
package/dist/Select.js.map +1 -1
package/dist/Tooltip.js +5 -1
package/dist/Tooltip.js.map +1 -1
package/dist/{createShadowDom.js → createShadowRootElement.js} +6 -11
package/dist/createShadowRootElement.js.map +1 -0
package/dist/index.js +1 -0
package/dist/index.js.map +1 -1
package/dist/src/OdysseyCacheProvider.d.ts +2 -2
package/dist/src/OdysseyCacheProvider.d.ts.map +1 -1
package/dist/src/OdysseyProvider.d.ts +1 -1
package/dist/src/OdysseyProvider.d.ts.map +1 -1
package/dist/src/OdysseyThemeProvider.d.ts +2 -2
package/dist/src/OdysseyThemeProvider.d.ts.map +1 -1
package/dist/src/Select.d.ts +14 -8
package/dist/src/Select.d.ts.map +1 -1
package/dist/src/Tooltip.d.ts +2 -1
package/dist/src/Tooltip.d.ts.map +1 -1
package/dist/src/{createShadowDom.d.ts → createShadowRootElement.d.ts} +2 -5
package/dist/src/createShadowRootElement.d.ts.map +1 -0
package/dist/src/index.d.ts +1 -0
package/dist/src/index.d.ts.map +1 -1
package/dist/src/theme/components.d.ts +2 -2
package/dist/src/theme/components.d.ts.map +1 -1
package/dist/src/theme/createOdysseyMuiTheme.d.ts +2 -2
package/dist/theme/components.js +18 -15
package/dist/theme/components.js.map +1 -1
package/dist/theme/createOdysseyMuiTheme.js +2 -2
package/dist/theme/createOdysseyMuiTheme.js.map +1 -1
package/dist/tsconfig.production.tsbuildinfo +1 -1
package/package.json +3 -3
package/src/OdysseyCacheProvider.tsx +12 -2
package/src/OdysseyProvider.tsx +3 -4
package/src/OdysseyThemeProvider.tsx +4 -4
package/src/PasswordField.tsx +1 -1
package/src/Select.tsx +64 -45
package/src/Tooltip.tsx +7 -2
package/src/createShadowRootElement.ts +21 -0
package/src/index.ts +1 -0
package/src/theme/components.tsx +19 -16
package/src/theme/createOdysseyMuiTheme.ts +3 -3
package/dist/createShadowDom.js.map +0 -1
package/dist/src/createShadowDom.d.ts.map +0 -1
package/src/createShadowDom.ts +0 -46

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "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.5.0",
+    "@okta/odyssey-design-tokens": "1.6.1",
     "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": "cf8dbb65cb3ca95e69bfe65b9825366146682368"
+  "gitHead": "162c333bbd49eea327a699b1b0fe883f8c11425d"
 }

package/src/OdysseyCacheProvider.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -130,7 +130,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
       ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
         <InputBase
           aria-describedby={ariaDescribedBy}
-          autoComplete={autoCompleteType}
+          autoComplete={inputType === "password" ? autoCompleteType : "off"}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
           autoFocus={hasInitialFocus}
           data-se={testId}

package/src/Select.tsx CHANGED Viewed

@@ -10,16 +10,15 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { ReactNode, memo, useCallback, useMemo, useState } from "react";
+import { memo, useCallback, useMemo, useState } from "react";
 import {
   Box,
-  Chip,
   Checkbox as MuiCheckbox,
+  Chip,
+  ListItemSecondaryAction,
   ListSubheader,
   MenuItem,
   Select as MuiSelect,
-  SelectChangeEvent,
-  ListItemSecondaryAction,
 } from "@mui/material";
 import { SelectProps as MuiSelectProps } from "@mui/material";
 import { Field } from "./Field";
@@ -32,11 +31,21 @@ export type SelectOption = {
   value?: string;
 };
-export type SelectProps = {
+export type SelectValueType<HasMultipleChoices> =
+  HasMultipleChoices extends true ? string[] : string;
+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
    */
@@ -50,9 +59,10 @@ export type SelectProps = {
    */
   isDisabled?: boolean;
   /**
-   * If `true`, the Select allows multiple selections
+   * @deprecated Use `hasMultipleChoices` instead.
    */
-  isMultiSelect?: boolean;
+  /** **Deprecated:** use `hasMultipleChoices` */
+  isMultiSelect?: HasMultipleChoices;
   /**
    * If `true`, the Select is optional
    */
@@ -68,15 +78,15 @@ export type SelectProps = {
   /**
    * Callback fired when the Select loses focus
    */
-  onBlur?: MuiSelectProps["onBlur"];
+  onBlur?: MuiSelectProps<Value>["onBlur"];
   /**
    * Callback fired when the value of the Select changes
    */
-  onChange?: MuiSelectProps["onChange"];
+  onChange?: MuiSelectProps<Value>["onChange"];
   /**
    * Callback fired when the Select gains focus
    */
-  onFocus?: MuiSelectProps["onFocus"];
+  onFocus?: MuiSelectProps<Value>["onFocus"];
   /**
    * The options for the Select
    */
@@ -84,7 +94,7 @@ export type SelectProps = {
   /**
    * The value or values selected in the Select
    */
-  value?: string | string[];
+  value?: Value;
 } & SeleniumProps;
 /**
@@ -102,50 +112,59 @@ export type SelectProps = {
  *   - { text: string, type: "heading" } — Used to display a group heading with the text
  */
-const Select = ({
+const Select = <
+  Value extends SelectValueType<HasMultipleChoices>,
+  HasMultipleChoices extends boolean
+>({
   errorMessage,
+  hasMultipleChoices: hasMultipleChoicesProp,
   hint,
   id: idOverride,
   isDisabled = false,
-  isMultiSelect = false,
+  isMultiSelect,
   isOptional = false,
   label,
   name: nameOverride,
   onBlur,
   onChange: onChangeProp,
   onFocus,
-  value,
-  testId,
   options,
-}: SelectProps) => {
-  // If there's no value set, we set it to a blank string (if it's a single-select)
-  // or an empty array (if it's a multi-select)
-  if (typeof value === "undefined") {
-    value = isMultiSelect ? [] : "";
-  }
+  testId,
+  value,
+}: SelectProps<Value, HasMultipleChoices>) => {
+  const hasMultipleChoices = useMemo(
+    () =>
+      hasMultipleChoicesProp === undefined
+        ? isMultiSelect
+        : hasMultipleChoicesProp,
+    [hasMultipleChoicesProp, isMultiSelect]
+  );
-  const [selectedValue, setSelectedValue] = useState<string | string[]>(value);
+  const formattedValueForMultiSelect = isMultiSelect
+    ? ([] as string[] as Value)
+    : ("" as string as Value);
-  const onChange = useCallback(
-    (event: SelectChangeEvent<string | string[]>, child: ReactNode) => {
-      const {
-        target: { value },
-      } = event;
+  const [selectedValue, setSelectedValue] = useState(
+    value === undefined ? formattedValueForMultiSelect : value
+  );
+  const onChange = useCallback<NonNullable<MuiSelectProps<Value>["onChange"]>>(
+    (event, child) => {
+      const valueFromEvent = event.target.value;
-      // Set the field value, with some additional logic to handle array values
-      // for multi-selects
-      if (isMultiSelect) {
-        setSelectedValue(typeof value === "string" ? value.split(",") : value);
+      if (typeof valueFromEvent === "string") {
+        if (hasMultipleChoices) {
+          setSelectedValue(valueFromEvent.split(",") as Value);
+        } else {
+          setSelectedValue(valueFromEvent as Value);
+        }
       } else {
-        setSelectedValue(value);
+        setSelectedValue(valueFromEvent);
       }
-      // Trigger the onChange event, if one has been passed
-      if (onChangeProp) {
-        onChangeProp(event, child);
-      }
+      onChangeProp?.(event, child);
     },
-    [isMultiSelect, onChangeProp, setSelectedValue]
+    [hasMultipleChoices, onChangeProp, setSelectedValue]
   );
   // Normalize the options array to accommodate the various
@@ -165,7 +184,7 @@ const Select = ({
   );
   const renderValue = useCallback(
-    (selected: string | string[]) => {
+    (selected: Value) => {
       // If the selected value isn't an array, then we don't need to display
       // chips and should fall back to the default render behavior
       if (typeof selected === "string") {
@@ -209,7 +228,7 @@ const Select = ({
         return (
           <MenuItem key={option.value} value={option.value}>
-            {isMultiSelect && (
+            {hasMultipleChoices && (
               <MuiCheckbox checked={selectedValue.includes(option.value)} />
             )}
             {option.text}
@@ -221,30 +240,30 @@ const Select = ({
           </MenuItem>
         );
       }),
-    [isMultiSelect, normalizedOptions, selectedValue]
+    [hasMultipleChoices, normalizedOptions, selectedValue]
   );
   const renderFieldComponent = useCallback(
     ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
       <MuiSelect
+        aria-describedby={ariaDescribedBy}
+        aria-errormessage={errorMessageElementId}
         children={children}
         data-se={testId}
         id={id}
-        aria-errormessage={errorMessageElementId}
-        aria-describedby={ariaDescribedBy}
         labelId={labelElementId}
-        multiple={isMultiSelect}
+        multiple={hasMultipleChoices}
         name={nameOverride ?? id}
         onBlur={onBlur}
         onChange={onChange}
         onFocus={onFocus}
-        renderValue={isMultiSelect ? renderValue : undefined}
+        renderValue={hasMultipleChoices ? renderValue : undefined}
         value={selectedValue}
       />
     ),
     [
       children,
-      isMultiSelect,
+      hasMultipleChoices,
       nameOverride,
       onBlur,
       onChange,

package/src/Tooltip.tsx CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -66,6 +66,7 @@ export * from "./Callout";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./CircularProgress";
+export * from "./createShadowRootElement";
 export * from "./createUniqueId";
 export * from "./Dialog";
 export * from "./Fieldset";

package/src/theme/components.tsx CHANGED Viewed

@@ -53,10 +53,10 @@ import { CSSProperties } from "react";
 export const components = ({
   odysseyTokens,
-  shadowRootElement,
+  shadowDomElement,
 }: {
   odysseyTokens: DesignTokens;
-  shadowRootElement?: HTMLDivElement;
+  shadowDomElement?: HTMLDivElement;
 }): ThemeOptions["components"] => {
   return {
     MuiAccordion: {
@@ -788,7 +788,7 @@ export const components = ({
           [`&.${chipClasses.disabled}`]: {
             opacity: 1,
             pointerEvents: "none",
-            backgroundColor: odysseyTokens.HueNeutral50,
+            backgroundColor: odysseyTokens.HueNeutral200,
             color: odysseyTokens.TypographyColorDisabled,
           },
@@ -908,6 +908,11 @@ export const components = ({
         label: {
           padding: 0,
+          [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
+            color: odysseyTokens.TypographyColorDisabled,
+            WebkitTextFillColor: odysseyTokens.TypographyColorDisabled,
+          } satisfies CSSProperties,
         },
         deleteIcon: {
@@ -1675,7 +1680,7 @@ export const components = ({
       styleOverrides: {
         root: {
           color: odysseyTokens.TypographyColorAction,
-          textDecoration: "underline",
+          textDecoration: "none",
           cursor: "pointer",
           "&:visited": {
@@ -1703,11 +1708,11 @@ export const components = ({
           },
           ".Link-indicator": {
-            marginInlineStart: odysseyTokens.Spacing2,
+            marginInlineStart: odysseyTokens.Spacing1,
           },
           ".Link-icon": {
-            marginInlineEnd: odysseyTokens.Spacing2,
+            marginInlineEnd: odysseyTokens.Spacing1,
           },
           svg: {
             fontSize: "1em",
@@ -1854,7 +1859,7 @@ export const components = ({
     },
     MuiModal: {
       defaultProps: {
-        container: shadowRootElement,
+        container: shadowDomElement,
       },
     },
     MuiNativeSelect: {
@@ -1894,7 +1899,7 @@ export const components = ({
     },
     MuiPopover: {
       defaultProps: {
-        container: shadowRootElement,
+        container: shadowDomElement,
       },
       styleOverrides: {
         paper: {
@@ -1907,7 +1912,7 @@ export const components = ({
     },
     MuiPopper: {
       defaultProps: {
-        container: shadowRootElement,
+        container: shadowDomElement,
       },
     },
     MuiRadio: {
@@ -2075,19 +2080,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 CHANGED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

	@@ -1 +0,0 @@
1	- {"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 DELETED Viewed

@@ -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>
-// )