@okta/okta-signin-widget 7.16.0 → 7.16.1

package/src/v3/components/Radio/Radio.tsx

@@ -10,15 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import {
-  Box,
-  FormControl,
-  FormControlLabel,
-  FormLabel,
-  Radio as RadioMui,
-  RadioGroup,
-  Typography,
-} from '@okta/odyssey-react-mui';
+import { Radio as OdyRadio, RadioGroup } from '@okta/odyssey-react-mui';
 import { IdxOption } from '@okta/okta-auth-js/types/lib/idx/types/idx-js';
 import { h } from 'preact';
 
@@ -29,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 Radio: UISchemaElementComponent<UISchemaElementComponentWithValidationProps> = ({
@@ -38,7 +29,6 @@ const Radio: UISchemaElementComponent<UISchemaElementComponentWithValidationProp
   errors,
   handleChange,
   handleBlur,
-  describedByIds,
 }) => {
   const value = useValue(uischema);
   const { loading } = useWidgetContext();
@@ -53,94 +43,42 @@ const Radio: UISchemaElementComponent<UISchemaElementComponentWithValidationProp
       customOptions,
     },
     focus,
-    showAsterisk,
   } = uischema;
   const label = getTranslation(translations, 'label');
-  const labelId = `${name}-label`;
   const optionalLabel = getTranslation(translations, 'optionalLabel');
   const focusRef = useAutoFocus<HTMLInputElement>(focus);
-  const hasErrors = typeof errors !== 'undefined';
+  const { errorMessage, errorMessageList } = buildFieldLevelErrorMessages(errors);
 
   return (
-    <FormControl
-      component="fieldset"
-      error={hasErrors}
+    <RadioGroup
+      errorMessage={errorMessage}
+      errorMessageList={errorMessageList}
+      hint={!required ? optionalLabel : undefined}
+      id={name}
+      label={label ?? ''}
+      name={name}
+      onChange={(e: ChangeEvent<HTMLInputElement>) => {
+        handleChange?.(e.currentTarget.value);
+      }}
+      testId={name}
+      value={value as string ?? ''}
     >
-      {label && (
-        <FormLabel
-          id={labelId}
-          // To prevent asterisk from shifting far right
-          sx={{ display: 'flex', justifyContent: showAsterisk ? 'flex-start' : 'space-between' }}
-        >
-          {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' }}
-            >
-              {optionalLabel}
-            </Typography>
-          )}
-        </FormLabel>
-      )}
-      <RadioGroup
-        name={name}
-        id={name}
-        data-se={name}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...(label && { 'aria-labelledby': labelId })}
-        aria-describedby={describedByIds}
-        value={value as string ?? ''}
-        onChange={(e: ChangeEvent<HTMLInputElement>) => {
-          handleChange?.(e.currentTarget.value);
-        }}
-      >
-        {
-          (customOptions ?? options)?.map((item: IdxOption, index: number) => (
-            <FormControlLabel
-              control={(
-                <RadioMui
-                  sx={(theme) => ({
-                    marginInlineEnd: theme.spacing(2),
-                  })}
-                />
-              )}
-              key={item.value}
-              value={item.value}
-              label={item.label}
-              disabled={loading}
-              onBlur={(e: ChangeEvent<HTMLInputElement>) => {
-                handleBlur?.(e?.currentTarget?.value);
-              }}
-              sx={{
-                gap: 0,
-              }}
-              // eslint-disable-next-line react/jsx-props-no-spreading
-              {...(index === 0 && { inputRef: focusRef })}
-            />
-          ))
-        }
-      </RadioGroup>
-      {hasErrors && (
-        <FieldLevelMessageContainer
-          messages={errors}
-          fieldName={name}
-        />
-      )}
-    </FormControl>
+      {
+        (customOptions ?? options ?? []).map((item: IdxOption, index: number) => (
+          <OdyRadio
+            isDisabled={loading}
+            key={item.value}
+            label={item.label}
+            onBlur={(e: ChangeEvent<HTMLInputElement>) => {
+              handleBlur?.(e?.currentTarget?.value);
+            }}
+            value={typeof item.value === 'string' ? item.value : ''}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...(index === 0 && { inputFocusRef: focusRef })}
+          />
+        ))
+      }
+    </RadioGroup>
   );
 };
 

package/src/v3/components/ReminderPrompt/ReminderPrompt.tsx

@@ -10,7 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Alert, Box, Link } from '@okta/odyssey-react-mui';
+import { Box } from '@mui/material';
+import { Callout, Link, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { HTMLReactParserOptions } from 'html-react-parser';
 import { h } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
@@ -41,6 +42,7 @@ const ReminderPrompt: UISchemaElementComponent<{
   } = uischema.options;
   const onSubmitHandler = useOnSubmit();
   const parsedContent = useHtmlContentParser(content, uischema.parserOptions);
+  const tokens = useOdysseyDesignTokens();
 
   const [show, setShow] = useState<boolean>(false);
   const timerRef = useRef<number | undefined>();
@@ -125,25 +127,20 @@ const ReminderPrompt: UISchemaElementComponent<{
       );
     }
     return (
-      <Box marginBlockEnd={2}>{parsedContent}</Box>
+      <Box marginBlockEnd={tokens.Spacing2}>{parsedContent}</Box>
     );
   };
 
   return show ? (
-    <Box marginBlockEnd={4}>
-      <Alert
+    <Box marginBlockEnd={tokens.Spacing4}>
+      <Callout
         severity="warning"
-        variant="infobox"
-        sx={{
-          // TODO: OKTA-534606 - switch to ODS component which has this fix
-          '& .MuiAlert-message': {
-            overflow: 'visible',
-          },
-        }}
+        // visually-hidden severity text is not translated
+        translate="no"
       >
         {renderAlertContent()}
         {renderActionLink()}
-      </Alert>
+      </Callout>
     </Box>
   ) : null;
 };

package/src/v3/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/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/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/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/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/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/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/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>
   );
 };