@okta/odyssey-react-mui 0.23.0 → 0.24.0

package/src/OdysseyTranslationProvider.types.ts

@@ -0,0 +1,42 @@
+/*!
+ * 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 supportedLanguages = [
+  "cs", // Czech
+  "da", // Danish
+  "de", // German
+  "el", // Greek
+  "en", // English
+  "es", // Spanish
+  "fi", // Finnish
+  "fr", // French
+  "hu", // Hungarian
+  "id", // Indonesian
+  "it", // Italian
+  "ja", // Japanese
+  "ko", // Korean
+  "ms", // Malaysian
+  "nb", // Norwegian
+  "nl-NL", // Dutch
+  "pl", // Polish
+  "pt-BR", // Portuguese (Brazil)
+  "ro", // Romanian
+  "ru", // Russian
+  "sv", // Swedish
+  "th", // Thai
+  "tr", // Turkish
+  "uk", // Ukrainian
+  "zh-CN", // Chinese (PRC)
+  "zh-TW", // Chinese
+] as const;
+
+export type SupportedLanguages = (typeof supportedLanguages)[number];

package/src/PasswordField.tsx

@@ -176,5 +176,6 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
 );
 
 const MemoizedPasswordField = memo(PasswordField);
+MemoizedPasswordField.displayName = "PasswordField";
 
 export { MemoizedPasswordField as PasswordField };

package/src/Select.tsx

@@ -0,0 +1,226 @@
+/*!
+ * 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 { ReactNode, forwardRef, memo, useCallback, useState } from "react";
+import {
+  Box,
+  Chip,
+  ListSubheader,
+  MenuItem,
+  Select as MuiSelect,
+  SelectChangeEvent,
+} from "@mui/material";
+import { SelectProps as MuiSelectProps } from "@mui/material";
+import { Checkbox } from "./Checkbox";
+import { Field } from "./Field";
+
+export type SelectOption = {
+  text: string;
+  value?: string;
+  type?: "heading" | "option";
+};
+
+export type SelectProps = {
+  errorMessage?: string;
+  hint?: string;
+  id?: string;
+  isDisabled?: boolean;
+  isMultiSelect?: boolean;
+  isOptional?: boolean;
+  label: string;
+  onBlur?: MuiSelectProps["onBlur"];
+  onChange?: MuiSelectProps["onChange"];
+  onFocus?: MuiSelectProps["onFocus"];
+  options: (string | SelectOption)[];
+  value?: string | string[];
+};
+
+/**
+ * Options in Odyssey <Select> are passed as an array, which can contain any combination
+ * of the following:
+ *   - string —                            A simple string. The string will be both the text and the value of the resulting option.
+ *                                         <option value="string">string</option>
+ *
+ *   - { text: string } —                  Same as above, but the string is contained within an object.
+ *                                         <option value="text">text</option>
+ *
+ *   - { text: string, value: string } —   The option text will be text, and the option value will be value.
+ *                                         <option value="value">text</option>
+ *
+ *   - { 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,
+      onBlur,
+      onChange: onChangeProp,
+      onFocus,
+      value,
+      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;
+
+        // 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);
+        }
+
+        // Trigger the onChange event, if one has been passed
+        if (onChangeProp) {
+          onChangeProp(event, child);
+        }
+      },
+      [isMultiSelect, onChangeProp, setSelectedValue]
+    );
+
+    // 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",
+        };
+      }
+
+      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
+            );
+
+            if (!selectedOption) {
+              return null;
+            }
+
+            return <Chip key={item} label={selectedOption.text} />;
+          })
+          .filter(Boolean);
+
+        if (renderedChips.length === 0) {
+          return null;
+        }
+
+        // We need the <Box> to surround the <Chip>s for
+        // proper styling
+        return <Box>{renderedChips}</Box>;
+      },
+      [normalizedOptions]
+    );
+
+    // 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 (
+        <MenuItem key={option.value} value={option.value}>
+          {isMultiSelect && (
+            <Checkbox isChecked={selectedValue.includes(option.value)} />
+          )}
+          {option.text}
+        </MenuItem>
+      );
+    });
+
+    const renderFieldComponent = useCallback(
+      () => (
+        <MuiSelect
+          id={idOverride}
+          name={idOverride}
+          multiple={isMultiSelect}
+          onBlur={onBlur}
+          onChange={onChange}
+          onFocus={onFocus}
+          ref={ref}
+          children={children}
+          renderValue={isMultiSelect ? renderValue : undefined}
+          value={selectedValue}
+        />
+      ),
+      [
+        idOverride,
+        isMultiSelect,
+        onBlur,
+        onChange,
+        onFocus,
+        ref,
+        children,
+        renderValue,
+        selectedValue,
+      ]
+    );
+
+    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";
+
+export { MemoizedSelect as Select };

package/src/Tabs.tsx

@@ -0,0 +1,70 @@
+/*!
+ * 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, { ReactElement, ReactNode, useCallback, useState } from "react";
+import { Tab as MuiTab } from "@mui/material";
+import {
+  TabList as MuiTabList,
+  TabPanel as MuiTabPanel,
+  TabContext as MuiTabContext,
+} from "@mui/lab";
+
+export type TabItemProps = {
+  children: ReactNode;
+  startIcon?: ReactElement;
+  label: string;
+  isDisabled?: boolean;
+  value?: string;
+};
+
+export type TabsProps = {
+  tabs: TabItemProps[];
+  initialValue?: string;
+  ariaLabel?: string;
+};
+
+const Tabs = ({ ariaLabel, tabs, initialValue = "0" }: TabsProps) => {
+  const [tabState, setTabState] = useState(initialValue);
+
+  const onChange = useCallback(
+    (_event: React.SyntheticEvent, newState: string) => {
+      setTabState(newState);
+    },
+    []
+  );
+
+  return (
+    <MuiTabContext value={tabState}>
+      <MuiTabList onChange={onChange} aria-label={ariaLabel}>
+        {tabs.map((tab, index) => (
+          <MuiTab
+            disabled={tab.isDisabled}
+            icon={tab.startIcon}
+            label={tab.label}
+            value={tab.value ? tab.value : index.toString()}
+            key={tab.value ? tab.value : index.toString()}
+          />
+        ))}
+      </MuiTabList>
+      {tabs.map((tab, index) => (
+        <MuiTabPanel
+          value={tab.value ? tab.value : index.toString()}
+          key={tab.value ? tab.value : index.toString()}
+        >
+          {tab.children}
+        </MuiTabPanel>
+      ))}
+    </MuiTabContext>
+  );
+};
+
+export { Tabs };

package/src/TextField.tsx

@@ -83,10 +83,6 @@ export type TextFieldProps = {
    * Callback fired when the `input` element get focus.
    */
   onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  /**
-   * The label for the `input` element if it's optional
-   */
-  optionalLabel?: string;
   /**
    * The short hint displayed in the `input` before the user enters a value.
    */
@@ -122,7 +118,6 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       onBlur,
       onChange,
       onFocus,
-      optionalLabel = "Optional",
       placeholder,
       startAdornment,
       type = "text",
@@ -187,7 +182,6 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         isDisabled={isDisabled}
         isOptional={isOptional}
         label={label}
-        optionalLabel={optionalLabel}
         renderFieldComponent={renderFieldComponent}
       />
     );
@@ -195,5 +189,6 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
 );
 
 const MemoizedTextField = memo(TextField);
+MemoizedTextField.displayName = "TextField";
 
 export { MemoizedTextField as TextField };

package/src/Toast.tsx

@@ -11,7 +11,7 @@
  */
 
 import { AlertColor } from "@mui/material";
-import { useEffect, memo, forwardRef, useState, useCallback } from "react";
+import { useEffect, memo, useState, useCallback } from "react";
 import {
   Alert,
   AlertTitle,
@@ -21,6 +21,7 @@ import {
   visuallyHidden,
 } from ".";
 import { Button } from "./Button";
+import { useTranslation } from "react-i18next";
 
 export type ToastProps = {
   /**
@@ -69,70 +70,71 @@ export type ToastProps = {
 
 const ClickAwayListenerProps = { onClickAway: () => false };
 
-const Toast = forwardRef(
-  ({
-    autoHideDuration = 6000,
-    isDismissable,
-    linkText,
-    linkUrl,
-    isVisible: isVisibleProp,
-    onHide: onHideProp,
-    role,
-    severity,
-    text,
-  }: ToastProps) => {
-    const [isVisible, setIsVisible] = useState(isVisibleProp);
+const Toast = ({
+  autoHideDuration = 6000,
+  isDismissable,
+  linkText,
+  linkUrl,
+  isVisible: isVisibleProp,
+  onHide: onHideProp,
+  role,
+  severity,
+  text,
+}: ToastProps) => {
+  const { t } = useTranslation();
 
-    useEffect(() => {
-      setIsVisible(isVisibleProp);
-    }, [isVisibleProp]);
+  const [isVisible, setIsVisible] = useState(isVisibleProp);
 
-    const onHide = useCallback(() => {
-      setIsVisible(false);
-      onHideProp?.();
-    }, [onHideProp]);
+  useEffect(() => {
+    setIsVisible(isVisibleProp);
+  }, [isVisibleProp]);
 
-    return (
-      <Snackbar
-        open={isVisible}
-        autoHideDuration={
-          isDismissable || autoHideDuration <= 0 ? undefined : autoHideDuration
+  const onHide = useCallback(() => {
+    setIsVisible(false);
+    onHideProp?.();
+  }, [onHideProp]);
+
+  return (
+    <Snackbar
+      open={isVisible}
+      autoHideDuration={
+        isDismissable || autoHideDuration <= 0 ? undefined : autoHideDuration
+      }
+      onClose={onHide}
+      className="Toast"
+      ClickAwayListenerProps={ClickAwayListenerProps}
+    >
+      <Alert
+        action={
+          isDismissable === true && (
+            <Button
+              aria-label={t("toast.close.text")}
+              onClick={onHide}
+              size="small"
+              startIcon={<CloseIcon />}
+              variant="floating"
+            />
+          )
         }
-        onClose={onHide}
-        className="Toast"
-        ClickAwayListenerProps={ClickAwayListenerProps}
+        role={role}
+        severity={severity}
+        variant="toast"
       >
-        <Alert
-          action={
-            isDismissable === true && (
-              <Button
-                aria-label="close"
-                onClick={onHide}
-                size="small"
-                startIcon={<CloseIcon />}
-                variant="floating"
-              />
-            )
-          }
-          role={role}
-          severity={severity}
-          variant="toast"
-        >
-          <AlertTitle>
-            <span style={visuallyHidden}>{severity}:</span>
-            {text}
-          </AlertTitle>
-          {linkUrl && (
-            <Link href={linkUrl} variant="monochrome">
-              {linkText}
-            </Link>
-          )}
-        </Alert>
-      </Snackbar>
-    );
-  }
-);
+        <AlertTitle>
+          <span style={visuallyHidden}>{severity}:</span>
+          {text}
+        </AlertTitle>
+        {linkUrl && (
+          <Link href={linkUrl} variant="monochrome">
+            {linkText}
+          </Link>
+        )}
+      </Alert>
+    </Snackbar>
+  );
+};
 
 const MemoizedToast = memo(Toast);
+MemoizedToast.displayName = "Toast";
 
 export { MemoizedToast as Toast };

package/src/index.ts

@@ -40,11 +40,9 @@ export {
   MenuList,
   Paper,
   ScopedCssBaseline,
-  Select,
   Snackbar,
   Stack,
   SvgIcon,
-  Tab,
   Table,
   TableBody,
   TableCell,
@@ -85,11 +83,9 @@ export type {
   PaperProps,
   ScopedCssBaselineProps,
   SelectChangeEvent,
-  SelectProps,
   SnackbarProps,
   StackProps,
   SvgIconProps,
-  TabProps,
   TableBodyProps,
   TableCellProps,
   TableContainerProps,
@@ -101,10 +97,6 @@ export type {
   TypographyProps,
 } from "@mui/material";
 
-export { TabContext, TabList, TabPanel } from "@mui/lab";
-
-export type { TabContextProps, TabListProps, TabPanelProps } from "@mui/lab";
-
 export { default as FavoriteIcon } from "@mui/icons-material/Favorite";
 
 export { deepmerge, visuallyHidden } from "@mui/utils";
@@ -117,25 +109,31 @@ export * from "./CheckboxGroup";
 export * from "./CircularProgress";
 export * from "./createUniqueId";
 export * from "./Dialog";
+export * from "./Fieldset";
+export * from "./Form";
 export * from "./Icon";
 export * from "./iconDictionary";
 export * from "./Infobox";
 export * from "./Link";
 export * from "./MenuButton";
 export * from "./MenuItem";
+export * from "./NativeSelect";
 export * from "./OdysseyCacheProvider";
+export * from "./OdysseyProvider";
 export * from "./OdysseyThemeProvider";
+export * from "./OdysseyTranslationProvider";
 export * from "./PasswordField";
 export * from "./Radio";
 export * from "./RadioGroup";
 export * from "./ScreenReaderText";
 export * from "./SearchField";
+export * from "./Select";
 export * from "./Status";
+export * from "./Tabs";
 export * from "./Tag";
 export * from "./TagList";
 export * from "./TextField";
 export * from "./theme";
-export * from "./ThemeProvider";
 export * from "./Tooltip";
 export * from "./Toast";
 export * from "./ToastStack";

package/src/properties/odyssey-react-mui.properties

@@ -0,0 +1,8 @@
+fielderror.screenreader.text = Error
+fieldlabel.optional.text = Optional
+fieldlabel.required.text = Required
+severity.success = success
+severity.warning = warning
+severity.info = info
+severity.error = error
+toast.close.text = close

package/src/properties/ts/odyssey-react-mui.ts

@@ -0,0 +1 @@
+export const translation = {"fielderror.screenreader.text":"Error","fieldlabel.optional.text":"Optional","fieldlabel.required.text":"Required","severity.success":"success","severity.warning":"warning","severity.info":"info","severity.error":"error","toast.close.text":"close"};

package/src/properties/ts/odyssey-react-mui_cs.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_da.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_de.ts

@@ -0,0 +1 @@
+export const translation = {};