@okta/okta-signin-widget 7.16.0 → 7.16.1

package/src/v3/src/components/PhoneAuthenticator/PhoneAuthenticator.tsx

@@ -10,15 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { SelectChangeEvent } from '@mui/material';
-import {
-  Box,
-  InputAdornment,
-  InputBase,
-  InputLabel,
-  Select,
-  Typography,
-} from '@okta/odyssey-react-mui';
+import { Box, SelectChangeEvent } from '@mui/material';
+import { NativeSelect, TextField, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { IdxMessage } from '@okta/okta-auth-js';
 import { h } from 'preact';
 import {
@@ -36,8 +29,7 @@ import {
   UISchemaElementComponent,
   UISchemaElementComponentWithValidationProps,
 } from '../../types';
-import { getDefaultCountryCode, getTranslation } from '../../util';
-import FieldLevelMessageContainer from '../FieldLevelMessageContainer';
+import { buildFieldLevelErrorMessages, getDefaultCountryCode, getTranslation } from '../../util';
 import { withFormValidationState } from '../hocs';
 
 const PhoneAuthenticator: UISchemaElementComponent<UISchemaElementComponentWithValidationProps> = ({
@@ -45,7 +37,6 @@ const PhoneAuthenticator: UISchemaElementComponent<UISchemaElementComponentWithV
   setTouched,
   errors,
   handleBlur,
-  describedByIds,
 }) => {
   const {
     data,
@@ -57,8 +48,6 @@ const PhoneAuthenticator: UISchemaElementComponent<UISchemaElementComponentWithV
   const {
     translations = [],
     focus,
-    ariaDescribedBy,
-    showAsterisk,
     options: {
       inputMeta: {
         name: fieldName,
@@ -69,10 +58,10 @@ const PhoneAuthenticator: UISchemaElementComponent<UISchemaElementComponentWithV
       attributes,
     },
   } = uischema;
+  const { autocomplete, inputmode } = attributes || {};
   const mainLabel = getTranslation(translations, 'label');
   const extensionLabel = getTranslation(translations, 'extension');
   const countryLabel = getTranslation(translations, 'country');
-  const optionalLabel = getTranslation(translations, 'optionalLabel');
 
   const { features: { disableAutocomplete } = {} } = widgetProps;
   const countries = CountryUtil.getCountries() as Record<string, string>;
@@ -86,7 +75,8 @@ const PhoneAuthenticator: UISchemaElementComponent<UISchemaElementComponentWithV
   const showExtension = methodType === 'voice';
   const onChangeHandler = useOnChange(uischema);
   const focusRef = useAutoFocus<HTMLSelectElement>(focus);
-  const phoneHasErrors = typeof errors !== 'undefined';
+  const { errorMessage, errorMessageList } = buildFieldLevelErrorMessages(errors);
+  const tokens = useOdysseyDesignTokens();
 
   const formatPhone = (
     phoneNumber: string,
@@ -101,17 +91,19 @@ const PhoneAuthenticator: UISchemaElementComponent<UISchemaElementComponentWithV
 
   const validate = useCallback((dataBag: FormBag['data']) => {
     const fullPhoneNumber = dataBag[fieldName];
-    const errorMessage: IdxMessage = {
+    const blankFieldErrorMessage: IdxMessage = {
       class: 'ERROR',
       message: '',
       i18n: { key: 'model.validation.field.blank' },
     };
     const isValid = !!fullPhoneNumber && !!phone;
-    return isValid ? undefined : [errorMessage];
+    return isValid ? undefined : [blankFieldErrorMessage];
   }, [phone, fieldName]);
 
   useEffect(() => {
-    dataSchemaRef.current![fieldName].validate = validate;
+    if (dataSchemaRef.current) {
+      dataSchemaRef.current[fieldName].validate = validate;
+    }
   }, [dataSchemaRef, fieldName, messages.value, validate]);
 
   useEffect(() => {
@@ -129,28 +121,17 @@ const PhoneAuthenticator: UISchemaElementComponent<UISchemaElementComponentWithV
   const renderExtension = () => (
     showExtension && (
       <Box width={0.25}>
-        <InputLabel
-          htmlFor="phoneExtension"
-          // label should remain in rtl format if rtl language is set
-          dir={languageDirection}
-        >
-          {extensionLabel}
-        </InputLabel>
-        <InputBase
-          value={extension}
-          type="text"
-          name="extension"
+        <TextField
+          autoCompleteType={disableAutocomplete ? 'off' : 'tel-extension'}
           id="phoneExtension"
-          dir="ltr"
-          disabled={loading}
+          isDisabled={loading}
+          label={extensionLabel ?? ''}
+          name="extension"
           onChange={(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
             setExtension(e.currentTarget.value);
           }}
-          inputProps={{
-            'data-se': 'extension',
-            autocomplete: disableAutocomplete ? 'off' : 'tel-extension',
-            'aria-describedby': ariaDescribedBy,
-          }}
+          testId="extension"
+          value={extension}
         />
       </Box>
     )
@@ -158,53 +139,20 @@ const PhoneAuthenticator: UISchemaElementComponent<UISchemaElementComponentWithV
 
   const renderCountrySelect = () => (
     <Box marginBlockEnd={4}>
-      <InputLabel
-        id="countryLabel"
-        htmlFor="country"
-        // To prevent asterisk from shifting far right
-        sx={{ justifyContent: showAsterisk ? 'flex-start' : undefined }}
-      >
-        {countryLabel}
-        {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>
-        )}
-      </InputLabel>
-      <Select
+      <NativeSelect
+        autoCompleteType={disableAutocomplete ? 'off' : 'tel-country-code'}
         id="country"
-        labelId="countryLabel"
-        disabled={loading}
-        variant="standard"
-        native
+        inputRef={focusRef}
+        isDisabled={loading}
+        isOptional={required === false}
+        label={countryLabel}
         onChange={(e: SelectChangeEvent<string>) => {
           const selectTarget = (
             e?.target as SelectChangeEvent['target'] & { value: string; name: string; }
           );
           setPhoneCode(`+${CountryUtil.getCallingCodeForCountry(selectTarget.value)}`);
         }}
-        inputRef={focusRef}
-        inputProps={{
-          'data-se': 'country',
-          autocomplete: disableAutocomplete ? 'off' : 'tel-country-code',
-          'aria-describedby': ariaDescribedBy,
-        }}
+        testId="country"
       >
         {
           Object.entries(countries).map(([code, name]) => (
@@ -217,7 +165,7 @@ const PhoneAuthenticator: UISchemaElementComponent<UISchemaElementComponentWithV
             </option>
           ))
         }
-      </Select>
+      </NativeSelect>
     </Box>
   );
 
@@ -227,78 +175,46 @@ const PhoneAuthenticator: UISchemaElementComponent<UISchemaElementComponentWithV
       <Box
         display="flex"
         justifyContent="space-between"
-        dir="ltr"
+        flexWrap="wrap"
+        flexDirection={languageDirection === 'rtl' ? 'row-reverse' : 'row'}
       >
-        <Box width={showExtension ? 0.7 : 1}>
-          <InputLabel
-            htmlFor={fieldName}
-            // To prevent asterisk from shifting far right
-            sx={{ justifyContent: showAsterisk ? 'flex-start' : undefined }}
-            // label should remain in rtl format if rtl language is set
-            dir={languageDirection}
-          >
-            {mainLabel}
-            {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">{optionalLabel}</Typography>
-            )}
-          </InputLabel>
-          <InputBase
-            type="tel"
-            name={fieldName}
+        <Box
+          width={showExtension ? 0.7 : 1}
+          sx={{
+            marginRight: showExtension ? tokens.Spacing2 : tokens.Spacing0,
+          }}
+        >
+          <TextField
+            autoCompleteType={autocomplete}
+            errorMessage={errorMessage}
+            errorMessageList={errorMessageList}
             id={fieldName}
-            error={phoneHasErrors}
-            disabled={loading}
-            dir="ltr"
+            inputMode={inputmode}
+            isDisabled={loading}
+            isFullWidth
+            isOptional={required === false}
+            label={mainLabel ?? ''}
+            name={fieldName}
+            onBlur={(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+              const formattedPhone = formatPhone(e?.currentTarget?.value, phoneCode, extension);
+              handleBlur?.(formattedPhone);
+            }}
             onChange={(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
               // Set new phone value without phone code
               setPhone(e.currentTarget.value);
               setPhoneChanged(true);
             }}
-            onBlur={(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-              const formattedPhone = formatPhone(e?.currentTarget?.value, phoneCode, extension);
-              handleBlur?.(formattedPhone);
-            }}
             startAdornment={(
-              <InputAdornment
+              <Box
                 component="span"
-                position="start"
-                className="no-translate"
-                sx={(theme) => ({
-                  // physical properties OK because parent InputBase component
-                  // is always set to "ltr"
-                  marginRight: theme.spacing(2),
-                  marginLeft: 0,
-                })}
+                translate="no"
               >
                 {phoneCode}
-              </InputAdornment>
+              </Box>
             )}
-            fullWidth
-            inputProps={{
-              'data-se': fieldName,
-              'aria-describedby': describedByIds,
-              ...attributes,
-            }}
+            testId={fieldName}
+            type="tel"
           />
-          {phoneHasErrors && (
-            <FieldLevelMessageContainer
-              messages={errors}
-              fieldName={fieldName}
-            />
-          )}
         </Box>
         {renderExtension()}
       </Box>

package/src/v3/src/components/QRCode/QRCode.tsx

@@ -10,12 +10,13 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import * as Tokens from '@okta/odyssey-design-tokens';
-import { Box } from '@okta/odyssey-react-mui';
+import { Box } from '@mui/material';
+import { useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { h } from 'preact';
 
 import { QRCodeElement, UISchemaElementComponent } from '../../types';
 import { getTranslation } from '../../util';
+import Image from '../Image';
 
 const QRCode: UISchemaElementComponent<{
   uischema: QRCodeElement
@@ -24,33 +25,39 @@ const QRCode: UISchemaElementComponent<{
 }) => {
   const { translations = [], options: { data } } = uischema;
   const label = getTranslation(translations, 'label');
+  const tokens = useOdysseyDesignTokens();
+
   return (
     <Box
-      className="qrContainer"
-      sx={(theme) => ({
-        marginBlockStart: theme.spacing(4),
-        marginBlockEnd: theme.spacing(4),
-        marginInlineStart: theme.spacing(0),
-        marginInlineEnd: theme.spacing(0),
+      data-se="qrContainer"
+      sx={{
+        marginBlockStart: tokens.Spacing5,
+        marginBlockEnd: tokens.Spacing5,
+        marginInlineStart: tokens.Spacing1,
+        marginInlineEnd: tokens.Spacing1,
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
-      })}
+      }}
     >
       <Box
-        as="img"
-        className="qrImg"
         sx={{
-          width: '224px',
-          height: '224px',
-          borderWidth: Tokens.BorderWidthBase,
-          borderStyle: Tokens.BorderStyleBase,
-          borderColor: Tokens.ColorBorderDisplay,
-          borderRadius: Tokens.BorderRadiusBase,
+          display: 'flex',
+          overflow: 'hidden',
+          borderWidth: tokens.BorderWidthMain,
+          borderStyle: tokens.BorderStyleMain,
+          borderColor: tokens.BorderColorDisplay,
+          borderRadius: tokens.BorderRadiusMain,
         }}
-        src={data}
-        alt={label}
-      />
+      >
+        <Image
+          src={data}
+          alt={label ?? ''}
+          width="224px"
+          height="224px"
+          testId="qrImg"
+        />
+      </Box>
     </Box>
   );
 };

package/src/v3/src/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/src/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/src/components/ReminderPrompt/__snapshots__/ReminderPrompt.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`ReminderPrompt should show prompt with working link after default timeo
     class="MuiBox-root emotion-0"
   >
     <div
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-infoboxWarning MuiAlert-infobox emotion-1"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-calloutWarning MuiAlert-callout emotion-1"
       role="alert"
     >
       <div
@@ -29,17 +29,27 @@ exports[`ReminderPrompt should show prompt with working link after default timeo
       <div
         class="MuiAlert-message emotion-4"
       >
-        <div
+        <span
           class="MuiBox-root emotion-5"
+          translate="no"
         >
-          Didnt receive the email?
-        </div>
-        <a
-          class="MuiTypography-root MuiTypography-monochrome MuiLink-root MuiLink-underlineAlways emotion-6"
-          href="javascript:void(0);"
+          warning
+        </span>
+        <div
+          class="MuiBox-root emotion-6"
         >
-          Send again?
-        </a>
+          <div
+            class="MuiBox-root emotion-7"
+          >
+            Didnt receive the email?
+          </div>
+          <a
+            class="MuiTypography-root MuiTypography-monochrome MuiLink-root MuiLink-underlineAlways emotion-8"
+            href="javascript:void(0);"
+          >
+            Send again?
+          </a>
+        </div>
       </div>
     </div>
   </div>
@@ -52,7 +62,7 @@ exports[`ReminderPrompt should show prompt with working link after default timeo
     class="MuiBox-root emotion-0"
   >
     <div
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-infoboxWarning MuiAlert-infobox emotion-1"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-calloutWarning MuiAlert-callout emotion-1"
       role="alert"
     >
       <div
@@ -73,16 +83,26 @@ exports[`ReminderPrompt should show prompt with working link after default timeo
       <div
         class="MuiAlert-message emotion-4"
       >
-        <div
+        <span
           class="MuiBox-root emotion-5"
+          translate="no"
         >
-          Didn't receive the email? Click 
-          <a
-            class="MuiTypography-root MuiTypography-monochrome MuiLink-root MuiLink-underlineAlways send-again emotion-6"
-            href="#"
+          warning
+        </span>
+        <div
+          class="MuiBox-root emotion-6"
+        >
+          <div
+            class="MuiBox-root emotion-6"
           >
-            send again
-          </a>
+            Didn't receive the email? Click 
+            <a
+              class="MuiTypography-root MuiTypography-monochrome MuiLink-root MuiLink-underlineAlways send-again emotion-8"
+              href="#"
+            >
+              send again
+            </a>
+          </div>
         </div>
       </div>
     </div>