@okta/odyssey-react-mui 1.1.1 → 1.4.0

package/src/Select.tsx

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { ReactNode, forwardRef, memo, useCallback, useState } from "react";
+import { ReactNode, memo, useCallback, useMemo, useState } from "react";
 import {
   Box,
   Chip,
@@ -100,173 +100,168 @@ export type SelectProps = {
  *   - { text: string, type: "heading" } — Used to display a group heading with the text
  */
 
-const Select = forwardRef<HTMLSelectElement, SelectProps>(
-  (
-    {
-      errorMessage,
-      hint,
-      id: idOverride,
-      isDisabled = false,
-      isMultiSelect = false,
-      isOptional = false,
-      label,
-      name: nameOverride,
-      onBlur,
-      onChange: onChangeProp,
-      onFocus,
-      value,
-      testId,
-      options,
-    },
-    ref
-  ) => {
-    // 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 ? [] : "";
-    }
-
-    const [selectedValue, setSelectedValue] = useState<string | string[]>(
-      value
-    );
-
-    const onChange = useCallback(
-      (event: SelectChangeEvent<string | string[]>, child: ReactNode) => {
-        const {
-          target: { value },
-        } = event;
+const Select = ({
+  errorMessage,
+  hint,
+  id: idOverride,
+  isDisabled = false,
+  isMultiSelect = false,
+  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 ? [] : "";
+  }
 
-        // Set the field value, with some additional logic to handle array values
-        // for multi-selects
-        if (isMultiSelect) {
-          setSelectedValue(
-            typeof value === "string" ? value.split(",") : value
-          );
-        } else {
-          setSelectedValue(value);
-        }
+  const [selectedValue, setSelectedValue] = useState<string | string[]>(value);
 
-        // Trigger the onChange event, if one has been passed
-        if (onChangeProp) {
-          onChangeProp(event, child);
-        }
-      },
-      [isMultiSelect, onChangeProp, setSelectedValue]
-    );
+  const onChange = useCallback(
+    (event: SelectChangeEvent<string | string[]>, child: ReactNode) => {
+      const {
+        target: { value },
+      } = event;
 
-    // Normalize the options array to accommodate the various
-    // data types that might be passed
-    const normalizedOptions = options.map((option) => {
-      if (typeof option === "object") {
-        return {
-          text: option.text,
-          value: option.value || option.text,
-          type: option.type === "heading" ? "heading" : "option",
-        };
+      // Set the field value, with some additional logic to handle array values
+      // for multi-selects
+      if (isMultiSelect) {
+        setSelectedValue(typeof value === "string" ? value.split(",") : value);
+      } else {
+        setSelectedValue(value);
       }
 
-      return { text: option, value: option, type: "option" };
-    });
-
-    const renderValue = useCallback(
-      (selected: string | string[]) => {
-        // 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") {
-          return undefined;
-        }
-
-        // Convert the selected options array into <Chip>s
-        const renderedChips = selected
-          .map((item: string) => {
-            const selectedOption = normalizedOptions.find(
-              (option) => option.value === item
-            );
+      // Trigger the onChange event, if one has been passed
+      if (onChangeProp) {
+        onChangeProp(event, child);
+      }
+    },
+    [isMultiSelect, onChangeProp, setSelectedValue]
+  );
 
-            if (!selectedOption) {
-              return null;
+  // Normalize the options array to accommodate the various
+  // data types that might be passed
+  const normalizedOptions = useMemo(
+    () =>
+      options.map((option) =>
+        typeof option === "object"
+          ? {
+              text: option.text,
+              value: option.value || option.text,
+              type: option.type === "heading" ? "heading" : "option",
             }
+          : { text: option, value: option, type: "option" }
+      ),
+    [options]
+  );
 
-            return <Chip key={item} label={selectedOption.text} />;
-          })
-          .filter(Boolean);
+  const renderValue = useCallback(
+    (selected: string | string[]) => {
+      // 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") {
+        return undefined;
+      }
 
-        if (renderedChips.length === 0) {
-          return null;
-        }
+      // Convert the selected options array into <Chip>s
+      const renderedChips = selected
+        .map((item: string) => {
+          const selectedOption = normalizedOptions.find(
+            (option) => option.value === item
+          );
 
-        // We need the <Box> to surround the <Chip>s for
-        // proper styling
-        return <Box>{renderedChips}</Box>;
-      },
-      [normalizedOptions]
-    );
+          if (!selectedOption) {
+            return null;
+          }
 
-    // Convert the options into the ReactNode children
-    // that will populate the <Select>
-    const children = normalizedOptions.map((option) => {
-      if (option.type === "heading") {
-        return <ListSubheader key={option.text}>{option.text}</ListSubheader>;
+          return <Chip key={item} label={selectedOption.text} />;
+        })
+        .filter(Boolean);
+
+      if (renderedChips.length === 0) {
+        return null;
       }
 
-      return (
-        <MenuItem key={option.value} value={option.value}>
-          {isMultiSelect && (
-            <MuiCheckbox checked={selectedValue.includes(option.value)} />
-          )}
-          {option.text}
-        </MenuItem>
-      );
-    });
+      // We need the <Box> to surround the <Chip>s for
+      // proper styling
+      return <Box>{renderedChips}</Box>;
+    },
+    [normalizedOptions]
+  );
 
-    const renderFieldComponent = useCallback(
-      () => (
-        <MuiSelect
-          children={children}
-          data-se={testId}
-          id={idOverride}
-          multiple={isMultiSelect}
-          name={nameOverride ?? idOverride}
-          onBlur={onBlur}
-          onChange={onChange}
-          onFocus={onFocus}
-          ref={ref}
-          renderValue={isMultiSelect ? renderValue : undefined}
-          value={selectedValue}
-          labelId={label}
-        />
-      ),
-      [
-        children,
-        idOverride,
-        isMultiSelect,
-        label,
-        nameOverride,
-        onBlur,
-        onChange,
-        onFocus,
-        ref,
-        renderValue,
-        selectedValue,
-        testId,
-      ]
-    );
+  // Convert the options into the ReactNode children
+  // that will populate the <Select>
+  const children = useMemo(
+    () =>
+      normalizedOptions.map((option) => {
+        if (option.type === "heading") {
+          return <ListSubheader key={option.text}>{option.text}</ListSubheader>;
+        }
 
-    return (
-      <Field
-        errorMessage={errorMessage}
-        fieldType="single"
-        hasVisibleLabel
-        hint={hint}
-        id={idOverride}
-        isDisabled={isDisabled}
-        isOptional={isOptional}
-        label={label}
-        renderFieldComponent={renderFieldComponent}
+        return (
+          <MenuItem key={option.value} value={option.value}>
+            {isMultiSelect && (
+              <MuiCheckbox checked={selectedValue.includes(option.value)} />
+            )}
+            {option.text}
+          </MenuItem>
+        );
+      }),
+    [isMultiSelect, normalizedOptions, selectedValue]
+  );
+
+  const renderFieldComponent = useCallback(
+    ({ ariaDescribedBy, id }) => (
+      <MuiSelect
+        aria-describedby={ariaDescribedBy}
+        children={children}
+        data-se={testId}
+        id={id}
+        labelId={label}
+        multiple={isMultiSelect}
+        name={nameOverride ?? id}
+        onBlur={onBlur}
+        onChange={onChange}
+        onFocus={onFocus}
+        renderValue={isMultiSelect ? renderValue : undefined}
+        value={selectedValue}
       />
-    );
-  }
-);
+    ),
+    [
+      children,
+      isMultiSelect,
+      label,
+      nameOverride,
+      onBlur,
+      onChange,
+      onFocus,
+      renderValue,
+      selectedValue,
+      testId,
+    ]
+  );
+
+  return (
+    <Field
+      errorMessage={errorMessage}
+      fieldType="single"
+      hasVisibleLabel
+      hint={hint}
+      id={idOverride}
+      isDisabled={isDisabled}
+      isOptional={isOptional}
+      label={label}
+      renderFieldComponent={renderFieldComponent}
+    />
+  );
+};
 
 const MemoizedSelect = memo(Select);
 MemoizedSelect.displayName = "Select";

package/src/Tabs.tsx

@@ -10,7 +10,14 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import React, {
+import {
+  TabContext as MuiTabContext,
+  TabList as MuiTabList,
+  TabListProps as MuiTabListProps,
+  TabPanel as MuiTabPanel,
+} from "@mui/lab";
+import { Tab as MuiTab } from "@mui/material";
+import {
   ReactElement,
   ReactNode,
   memo,
@@ -18,12 +25,6 @@ import React, {
   useEffect,
   useState,
 } from "react";
-import { Tab as MuiTab } from "@mui/material";
-import {
-  TabList as MuiTabList,
-  TabPanel as MuiTabPanel,
-  TabContext as MuiTabContext,
-} from "@mui/lab";
 import { SeleniumProps } from "./SeleniumProps";
 
 export type TabItemProps = {
@@ -67,16 +68,27 @@ export type TabsProps = {
    * Identifier for the selected tab.
    */
   value?: string;
+  /**
+   * Callback fired when the active tab is changed.
+   */
+  onChange?: MuiTabListProps["onChange"];
 };
 
-const Tabs = ({ ariaLabel, initialValue, tabs, value }: TabsProps) => {
+const Tabs = ({
+  ariaLabel,
+  initialValue,
+  tabs,
+  value,
+  onChange: onChangeProp,
+}: TabsProps) => {
   const [tabState, setTabState] = useState(initialValue ?? value ?? "0");
 
-  const onChange = useCallback(
-    (_event: React.SyntheticEvent, newState: string) => {
-      setTabState(newState);
+  const onChange = useCallback<NonNullable<MuiTabListProps["onChange"]>>(
+    (event, value: string) => {
+      setTabState(value);
+      onChangeProp?.(event, value);
     },
-    []
+    [onChangeProp]
   );
 
   useEffect(() => {

package/src/Typography.tsx

@@ -70,10 +70,6 @@ export type TypographyProps = {
    * The text content of the component.
    */
   children: ReactNode;
-  /**
-   * Additional classes to add to the component.
-   */
-  classes?: object;
   /**
    * The color of the text.
    */
@@ -93,7 +89,6 @@ const Typography = ({
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component: componentProp,
   testId,
@@ -118,7 +113,6 @@ const Typography = ({
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
       children={children}
-      classes={classes}
       color={color}
       component={component}
       data-se={testId}
@@ -135,7 +129,6 @@ const Heading1 = ({
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component,
   testId,
@@ -145,7 +138,6 @@ const Heading1 = ({
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     children={children}
-    classes={classes}
     color={color}
     component={component}
     data-se={testId}
@@ -161,7 +153,6 @@ const Heading2 = ({
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component,
   testId,
@@ -171,7 +162,6 @@ const Heading2 = ({
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     children={children}
-    classes={classes}
     color={color}
     component={component}
     data-se={testId}
@@ -187,7 +177,6 @@ const Heading3 = ({
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component,
   testId,
@@ -197,7 +186,6 @@ const Heading3 = ({
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     children={children}
-    classes={classes}
     color={color}
     component={component}
     data-se={testId}
@@ -213,7 +201,6 @@ const Heading4 = ({
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component,
   testId,
@@ -223,7 +210,6 @@ const Heading4 = ({
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     children={children}
-    classes={classes}
     color={color}
     component={component}
     data-se={testId}
@@ -239,7 +225,6 @@ const Heading5 = ({
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component,
   testId,
@@ -249,7 +234,6 @@ const Heading5 = ({
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     children={children}
-    classes={classes}
     color={color}
     component={component}
     data-se={testId}
@@ -265,7 +249,6 @@ const Heading6 = ({
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component,
   testId,
@@ -275,7 +258,6 @@ const Heading6 = ({
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     children={children}
-    classes={classes}
     color={color}
     component={component}
     data-se={testId}
@@ -291,7 +273,6 @@ const Paragraph = ({
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component,
   testId,
@@ -301,7 +282,6 @@ const Paragraph = ({
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     children={children}
-    classes={classes}
     color={color}
     component={component}
     data-se={testId}
@@ -317,7 +297,6 @@ const Subordinate = ({
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component,
   testId,
@@ -327,7 +306,6 @@ const Subordinate = ({
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     children={children}
-    classes={classes}
     color={color}
     component={component}
     data-se={testId}
@@ -343,7 +321,6 @@ const Support = ({
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component,
   testId,
@@ -353,7 +330,6 @@ const Support = ({
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     children={children}
-    classes={classes}
     color={color}
     component={component}
     data-se={testId}
@@ -369,7 +345,6 @@ const Legend = ({
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component,
   testId,
@@ -379,7 +354,6 @@ const Legend = ({
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     children={children}
-    classes={classes}
     color={color}
     component={component}
     data-se={testId}

package/src/createShadowDom.ts

@@ -0,0 +1,46 @@
+/*!
+ * 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>
+// )

package/src/{OdysseyI18n.ts → i18n.ts}

@@ -103,5 +103,5 @@ Object.entries(resources).forEach(([locale, property]) => {
   i18n.addResourceBundle(locale, defaultNS, property);
 });
 
-// eslint-disable-next-line import/no-default-export
-export default i18n;
+export const odysseyTranslate = i18n.t.bind(i18n);
+export { i18n };

package/src/index.ts

@@ -59,6 +59,7 @@ export { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
 export * from "./Autocomplete";
 export * from "./Banner";
 export * from "./Box";
+export * from "./Breadcrumbs";
 export * from "./Button";
 export * from "./Callout";
 export * from "./Checkbox";
@@ -74,6 +75,7 @@ export * from "./MenuItem";
 export * from "./NativeSelect";
 export * from "./NullElement";
 export * from "./OdysseyCacheProvider";
+export { odysseyTranslate } from "./i18n";
 export * from "./OdysseyProvider";
 export * from "./OdysseyThemeProvider";
 export * from "./OdysseyTranslationProvider";