@okta/okta-signin-widget 7.16.0 → 7.16.1

package/src/v3/src/components/Select/Select.tsx

@@ -11,9 +11,7 @@
  */
 
 import { SelectChangeEvent } from '@mui/material';
-import {
-  Box, FormControl, InputLabel, Select as MuiSelect, Typography,
-} from '@okta/odyssey-react-mui';
+import { NativeSelect } from '@okta/odyssey-react-mui';
 import { IdxOption } from '@okta/okta-auth-js/types/lib/idx/types/idx-js';
 import { h } from 'preact';
 
@@ -23,8 +21,7 @@ import {
   UISchemaElementComponent,
   UISchemaElementComponentWithValidationProps,
 } from '../../types';
-import { getTranslation } from '../../util';
-import FieldLevelMessageContainer from '../FieldLevelMessageContainer';
+import { buildFieldLevelErrorMessages, getTranslation } from '../../util';
 import { withFormValidationState } from '../hocs';
 
 const Select: UISchemaElementComponent<UISchemaElementComponentWithValidationProps> = ({
@@ -32,14 +29,13 @@ const Select: UISchemaElementComponent<UISchemaElementComponentWithValidationPro
   errors,
   handleChange,
   handleBlur,
-  describedByIds,
 }) => {
   const value = useValue(uischema);
   const { loading } = useWidgetContext();
-  const { focus, translations = [], showAsterisk } = uischema;
+  const { focus, translations = [] } = uischema;
   const label = getTranslation(translations, 'label');
   const emptyOptionLabel = getTranslation(translations, 'empty-option-label');
-  const optionalLabel = getTranslation(translations, 'optionalLabel');
+  const { errorMessage, errorMessageList } = buildFieldLevelErrorMessages(errors);
 
   const {
     attributes,
@@ -50,8 +46,8 @@ const Select: UISchemaElementComponent<UISchemaElementComponentWithValidationPro
     },
     customOptions,
   } = uischema.options;
+  const { autocomplete } = attributes || {};
   const focusRef = useAutoFocus<HTMLSelectElement>(focus);
-  const hasErrors = typeof errors !== 'undefined';
 
   const getOptions = (): IdxOption[] | undefined => {
     if (Array.isArray(customOptions) || Array.isArray(options)) {
@@ -67,93 +63,50 @@ const Select: UISchemaElementComponent<UISchemaElementComponentWithValidationPro
   };
 
   return (
-    <FormControl
-      disabled={loading}
-      error={hasErrors}
+    <NativeSelect
+      autoCompleteType={autocomplete}
+      errorMessage={errorMessage}
+      errorMessageList={errorMessageList}
+      id={name}
+      inputRef={focusRef}
+      isDisabled={loading}
+      isOptional={required === false}
+      label={label}
+      onChange={(e: SelectChangeEvent<string>) => {
+        const selectTarget = (
+          e?.target as SelectChangeEvent['target'] & { value: string; name: string; }
+        );
+        handleChange?.(selectTarget.value);
+      }}
+      onBlur={(e: SelectChangeEvent<string>) => {
+        const selectTarget = (
+          e?.target as SelectChangeEvent['target'] & { value: string; name: string; }
+        );
+        handleBlur?.(selectTarget.value);
+      }}
+      testId={name}
+      value={value as string ?? ''}
     >
-      <InputLabel
-        htmlFor={name}
-        // To prevent asterisk from shifting far right
-        sx={{
-          justifyContent: showAsterisk ? 'flex-start' : undefined,
-          position: 'static',
-        }}
-      >
-        {label}
-        {showAsterisk && (
-          <Box
-            component="span"
-            sx={(theme) => ({
-              marginInlineStart: theme.spacing(1),
-              marginInlineEnd: theme.spacing(1),
-            })}
-            className="no-translate"
-            aria-hidden
-          >
-            *
-          </Box>
-        )}
-        {required === false && (
-          <Typography
-            variant="subtitle1"
-            sx={{ whiteSpace: 'nowrap' }}
+      {
+        [
+          <option
+            value=""
+            key="empty"
           >
-            {optionalLabel}
-          </Typography>
-        )}
-      </InputLabel>
-      <MuiSelect
-        native
-        variant="standard"
-        onChange={(e: SelectChangeEvent<string>) => {
-          const selectTarget = (
-            e?.target as SelectChangeEvent['target'] & { value: string; name: string; }
-          );
-          handleChange?.(selectTarget.value);
-        }}
-        onBlur={(e: SelectChangeEvent<string>) => {
-          const selectTarget = (
-            e?.target as SelectChangeEvent['target'] & { value: string; name: string; }
-          );
-          handleBlur?.(selectTarget.value);
-        }}
-        inputRef={focusRef}
-        value={value as string}
-        inputProps={{
-          'data-se': name,
-          'aria-describedby': describedByIds,
-          name,
-          id: name,
-          ...attributes,
-        }}
-      >
-        {
-          [
+            {emptyOptionLabel}
+          </option>,
+        ].concat(
+          getOptions()?.map((option: IdxOption) => (
             <option
-              value=""
-              key="empty"
+              key={option.value}
+              value={option.value as string}
             >
-              {emptyOptionLabel}
-            </option>,
-          ].concat(
-            getOptions()?.map((option: IdxOption) => (
-              <option
-                key={option.value}
-                value={option.value as string}
-              >
-                {option.label}
-              </option>
-            )) || [],
-          )
-        }
-      </MuiSelect>
-      {hasErrors && (
-        <FieldLevelMessageContainer
-          messages={errors}
-          fieldName={name}
-        />
-      )}
-    </FormControl>
+              {option.label}
+            </option>
+          )) || [],
+        )
+      }
+    </NativeSelect>
   );
 };
 

package/src/v3/src/components/Spinner/Spinner.tsx

@@ -10,17 +10,18 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Box, CircularProgress } from '@okta/odyssey-react-mui';
+import { Box } from '@mui/material';
+import { CircularProgress } from '@okta/odyssey-react-mui';
 import { FunctionComponent, h } from 'preact';
 
 import { SpinnerElement } from '../../types';
 import { loc } from '../../util';
 
-type SpinnerProps = { dataSe?: string; color?: string; };
+type SpinnerProps = { dataSe?: string; };
 const Spinner: FunctionComponent<SpinnerProps | SpinnerElement> = (
   props,
 ) => {
-  const { dataSe = undefined, color = undefined } = 'type' in props
+  const { dataSe = undefined } = 'type' in props
     ? {}
     : props as SpinnerProps;
   return (
@@ -31,13 +32,10 @@ const Spinner: FunctionComponent<SpinnerProps | SpinnerElement> = (
       alignItems="center"
     >
       <CircularProgress
-        id={dataSe}
-        data-se={dataSe}
+        testId={dataSe}
         // Using loc here because this component is not only used by transformers
         // but also directly in widget component
-        aria-label={loc('processing.alt.text', 'login')}
-        aria-valuetext={loc('processing.alt.text', 'login')}
-        sx={{ color }}
+        ariaLabel={loc('processing.alt.text', 'login')}
       />
     </Box>
   );

package/src/v3/src/components/StepperButton/StepperButton.tsx

@@ -50,16 +50,12 @@ const StepperButton: UISchemaElementComponent<{
       onClick={handleClick}
       variant={variant ?? 'primary'}
       type={type ?? 'button'}
-      fullWidth
-      ref={focusRef}
-      sx={{
-        whiteSpace: 'normal',
-      }}
-      startIcon={loading && <Spinner color="white" />}
-      aria-describedby={ariaDescribedBy}
-    >
-      {label}
-    </Button>
+      isFullWidth
+      buttonRef={focusRef}
+      startIcon={loading && <Spinner />}
+      ariaDescribedBy={ariaDescribedBy}
+      label={label}
+    />
   );
 };
 

package/src/v3/src/components/StepperLink/StepperLink.tsx

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Link as LinkMui } from '@okta/odyssey-react-mui';
+import { Link as LinkMui } from '@mui/material';
 import { h } from 'preact';
 
 import { useStepperContext, useWidgetContext } from '../../contexts';

package/src/v3/src/components/StepperRadio/StepperRadio.tsx

@@ -10,13 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import {
-  FormControl,
-  FormControlLabel,
-  FormLabel,
-  Radio,
-  RadioGroup,
-} from '@okta/odyssey-react-mui';
+import { Radio, RadioGroup } from '@okta/odyssey-react-mui';
 import { IdxOption } from '@okta/okta-auth-js/types/lib/idx/types/idx-js';
 import { h } from 'preact';
 import { useState } from 'preact/hooks';
@@ -38,7 +32,6 @@ const StepperRadio: UISchemaElementComponent<{
   const {
     label = '',
     focus,
-    ariaDescribedBy,
     options: {
       name,
       customOptions,
@@ -52,7 +45,6 @@ const StepperRadio: UISchemaElementComponent<{
     return defaultValue(widgetContext, stepIndex);
   });
   const focusRef = useAutoFocus<HTMLInputElement>(focus);
-  const labelId = `${name}-label`;
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const stepIdx = customOptions.findIndex((opt) => opt.value === e.currentTarget.value);
@@ -71,40 +63,27 @@ const StepperRadio: UISchemaElementComponent<{
   };
 
   return (
-    <FormControl component="fieldset">
-      {label && (<FormLabel id={labelId}>{label}</FormLabel>)}
-      <RadioGroup
-        name={name}
-        value={value as string}
-        onChange={handleChange}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...(label && { 'aria-labelledby': labelId })}
-        aria-describedby={ariaDescribedBy}
-      >
-        {
-          customOptions?.map((item: IdxOption, index) => (
-            <FormControlLabel
-              control={(
-                <Radio
-                  sx={(theme) => ({
-                    marginInlineEnd: theme.spacing(2),
-                  })}
-                />
-              )}
-              key={item.value}
-              value={item.value}
-              label={item.label}
-              disabled={loading}
-              sx={{
-                gap: 0,
-              }}
-              // eslint-disable-next-line react/jsx-props-no-spreading
-              {...(index === 0 && { inputRef: focusRef } )}
-            />
-          ))
-        }
-      </RadioGroup>
-    </FormControl>
+    <RadioGroup
+      id={name}
+      label={label}
+      name={name}
+      onChange={handleChange}
+      testId={name}
+      value={value as string ?? ''}
+    >
+      {
+        customOptions?.map((item: IdxOption, index: number) => (
+          <Radio
+            isDisabled={loading}
+            key={item.value}
+            label={item.label}
+            value={typeof item.value === 'string' ? item.value : ''}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...(index === 0 && { inputFocusRef: focusRef })}
+          />
+        ))
+      }
+    </RadioGroup>
   );
 };
 

package/src/v3/src/components/TextWithActionLink/TextWithActionLink.tsx

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Box } from '@okta/odyssey-react-mui';
+import { Box } from '@mui/material';
 import { h } from 'preact';
 
 import { useWidgetContext } from '../../contexts';

package/src/v3/src/components/Title/Title.tsx

@@ -10,7 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Box, Typography } from '@okta/odyssey-react-mui';
+import { Box } from '@mui/material';
+import { Typography } from '@okta/odyssey-react-mui';
 import { h } from 'preact';
 import { useEffect, useRef } from 'preact/hooks';
 
@@ -20,7 +21,7 @@ import { TitleElement, UISchemaElementComponent } from '../../types';
 const Title: UISchemaElementComponent<{
   uischema: TitleElement
 }> = (
-  { uischema: { id, options } },
+  { uischema: { options } },
 ) => {
   const titleRef = useRef<HTMLTitleElement>(null);
   const { widgetProps } = useWidgetContext();
@@ -39,15 +40,10 @@ const Title: UISchemaElementComponent<{
       justifyContent="flex-start"
     >
       <Typography
-        id={id}
         component="h2"
         variant="h4"
-        data-se="o-form-head"
-        ref={titleRef}
-        tabIndex={-1}
-        sx={{
-          outline: 'none',
-        }}
+        testId="o-form-head"
+        typographyRef={titleRef}
       >
         {options.content}
       </Typography>

package/src/v3/src/components/WebAuthNSubmitButton/WebAuthNSubmitButton.tsx

@@ -10,7 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Box, Button } from '@okta/odyssey-react-mui';
+import { Box } from '@mui/material';
+import { Button, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { IdxActionParams } from '@okta/okta-auth-js';
 import { h } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
@@ -34,6 +35,7 @@ const WebAuthNSubmit: UISchemaElementComponent<{
   const btnLabel = getTranslation(translations, 'label');
   const btnRetryLabel = getTranslation(translations, 'retry-label');
 
+  const tokens = useOdysseyDesignTokens();
   const { setMessage, loading } = useWidgetContext();
   const onSubmitHandler = useOnSubmit();
   const [waiting, setWaiting] = useState<boolean>(false);
@@ -84,20 +86,19 @@ const WebAuthNSubmit: UISchemaElementComponent<{
 
   return (
     <Box
-      marginBlockEnd={4}
+      marginBlockEnd={tokens.Spacing4}
       display={showLoading ? 'flex' : undefined}
       justifyContent={showLoading ? 'center' : undefined}
     >
       <Button
-        disabled={showLoading}
-        data-se="button"
+        isDisabled={showLoading}
+        testId="button"
         onClick={handleClick}
         variant="primary"
-        aria-describedby={ariaDescribedBy}
-        fullWidth
-      >
-        {label}
-      </Button>
+        ariaDescribedBy={ariaDescribedBy}
+        isFullWidth
+        label={label}
+      />
     </Box>
   );
 };

package/src/v3/src/components/Widget/GlobalStyles.tsx

@@ -13,42 +13,37 @@
 import {
   GlobalStyles as MuiGlobalStyles,
   GlobalStylesProps,
-  Theme,
 } from '@mui/material';
+import { DesignTokens, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { FunctionComponent, h } from 'preact';
 
 // TODO we could scope these to just widget container
-const svgStyles = (theme: Theme): GlobalStylesProps['styles'] => ({
+const svgStyles = (tokens: DesignTokens): GlobalStylesProps['styles'] => ({
   '.siwFillPrimary': {
-    fill: theme.palette.primary.main,
+    fill: tokens.PalettePrimaryMain,
   },
   '.siwFillPrimaryDark': {
-    fill: theme.palette.primary.dark,
+    fill: tokens.PalettePrimaryDark,
   },
   '.siwFillSecondary': {
-    fill: theme.palette.primary.light,
-  },
-  '.siwFillBg': {
-    fill: theme.palette.grey[50],
-  },
-  '.siwIconFillPrimary': {
-    fill: theme.palette.primary.main,
-  },
-  '.siwIconStrokePrimary': {
-    stroke: theme.palette.primary.main,
+    fill: tokens.PalettePrimaryLight,
   },
   '.siwIconFillPrimaryDark': {
-    fill: theme.palette.primary.dark,
+    fill: tokens.PalettePrimaryDark,
   },
   '.siwIconFillSecondary': {
-    fill: theme.palette.primary.light,
+    fill: tokens.PalettePrimaryLight,
   },
 });
 
-const GlobalStyles: FunctionComponent = () => (
-  <MuiGlobalStyles
-    styles={(theme) => svgStyles(theme)}
-  />
-);
+const GlobalStyles: FunctionComponent = () => {
+  const tokens = useOdysseyDesignTokens();
+
+  return (
+    <MuiGlobalStyles
+      styles={svgStyles(tokens)}
+    />
+  );
+};
 
 export default GlobalStyles;

package/src/v3/src/components/Widget/index.tsx

@@ -10,12 +10,11 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-// NOTE: Do not remove this import of style.css!
+// NOTE: Do not remove this import of style.scss!
 // We need to emit a CSS file, even if it's empty, to prevent a 404 on the Okta-hosted login page.
-import './style.css';
+import './style.scss';
 
-import { ScopedCssBaseline } from '@mui/material';
-import { MuiThemeProvider } from '@okta/odyssey-react-mui';
+import { OdysseyProvider, TranslationOverrides } from '@okta/odyssey-react-mui';
 import {
   AuthApiError,
   AuthenticatorKey,
@@ -63,6 +62,7 @@ import {
   extractPageTitle,
   getLanguageCode,
   getLanguageDirection,
+  getOdysseyTranslationOverrides,
   isAndroidOrIOS,
   isAuthClientSet,
   isConfigRegisterFlow,
@@ -73,12 +73,12 @@ import {
   triggerEmailVerifyCallback,
 } from '../../util';
 import { getEventContext } from '../../util/getEventContext';
-import { createTheme } from '../../util/theme';
+import { stylisPlugins } from '../../util/stylisPlugins';
+import { createThemeAndTokens } from '../../util/theme';
 import AuthContainer from '../AuthContainer/AuthContainer';
 import AuthContent from '../AuthContent/AuthContent';
 import AuthHeader from '../AuthHeader/AuthHeader';
 import ConsentHeader from '../ConsentHeader';
-import CustomPluginsOdysseyCacheProvider from '../CustomPluginsOdysseyCacheProvider';
 import Form from '../Form';
 import Spinner from '../Spinner';
 import GlobalStyles from './GlobalStyles';
@@ -132,12 +132,21 @@ export const Widget: FunctionComponent<WidgetProps> = (widgetProps) => {
   const languageCode = getLanguageCode(widgetProps);
   const languageDirection = getLanguageDirection(languageCode);
   const { stateHandle, unsetStateHandle } = useStateHandle(widgetProps);
-
-  // merge themes
-  const theme = useMemo(() => mergeThemes(
-    createTheme(brandColors, customTheme?.tokens ?? {}),
-    { direction: languageDirection },
-  ), [brandColors, customTheme, languageDirection]);
+  const [odyTranslationOverrides, setOdyTranslationOverrides] = useState<
+  TranslationOverrides<string> | undefined>();
+  // Odyssey language codes use '_' instead of '-' (e.g. zh-CN -> zh_CN)
+  const odyLanguageCode: string = languageCode.replace('-', '_');
+
+  const { theme, tokens } = useMemo(() => {
+    const { themeOverride, tokensOverride } = createThemeAndTokens(
+      brandColors,
+      customTheme?.tokens ?? {},
+    );
+    return {
+      theme: mergeThemes(themeOverride, { direction: languageDirection }),
+      tokens: tokensOverride,
+    };
+  }, [brandColors, customTheme, languageDirection]);
 
   // on unmount, remove the language
   useEffect(() => () => {
@@ -150,6 +159,9 @@ export const Widget: FunctionComponent<WidgetProps> = (widgetProps) => {
   const initLanguage = useCallback(async () => {
     if (!Bundles.isLoaded(languageCode)) {
       await loadLanguage(widgetProps);
+      setOdyTranslationOverrides({
+        [odyLanguageCode]: getOdysseyTranslationOverrides(),
+      });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -493,30 +505,33 @@ export const Widget: FunctionComponent<WidgetProps> = (widgetProps) => {
       languageDirection,
     }}
     >
-      <CustomPluginsOdysseyCacheProvider nonce={cspNonce}>
-        <MuiThemeProvider theme={theme}>
-          <GlobalStyles />
-          {/* the style is to allow the widget to inherit the parent's bg color */}
-          <ScopedCssBaseline sx={{ backgroundColor: 'inherit' }}>
-            <AuthContainer hide={hide}>
-              <AuthHeader
-                logo={logo}
-                logoText={logoText}
-                brandName={brandName}
-                authCoinProps={buildAuthCoinProps(idxTransaction)}
-              />
-              <AuthContent>
-                {isConsentStep(idxTransaction) && <ConsentHeader />}
-                {
-                  uischema.elements.length > 0
-                    ? <Form uischema={uischema as UISchemaLayout} />
-                    : <Spinner />
-                }
-              </AuthContent>
-            </AuthContainer>
-          </ScopedCssBaseline>
-        </MuiThemeProvider>
-      </CustomPluginsOdysseyCacheProvider>
+      <OdysseyProvider
+        themeOverride={theme}
+        designTokensOverride={tokens}
+        languageCode={odyLanguageCode}
+        translationOverrides={odyTranslationOverrides}
+        nonce={cspNonce}
+        stylisPlugins={stylisPlugins}
+      >
+        <GlobalStyles />
+        {/* the style is to allow the widget to inherit the parent's bg color */}
+        <AuthContainer hide={hide}>
+          <AuthHeader
+            logo={logo}
+            logoText={logoText}
+            brandName={brandName}
+            authCoinProps={buildAuthCoinProps(idxTransaction)}
+          />
+          <AuthContent>
+            {isConsentStep(idxTransaction) && <ConsentHeader />}
+            {
+              uischema.elements.length > 0
+                ? <Form uischema={uischema as UISchemaLayout} />
+                : <Spinner />
+            }
+          </AuthContent>
+        </AuthContainer>
+      </OdysseyProvider>
     </WidgetContextProvider>
   );
 };