@okta/odyssey-react-mui 1.8.1 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -51,7 +51,7 @@
     "@mui/system": "^5.14.9",
     "@mui/utils": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "1.8.1",
+    "@okta/odyssey-design-tokens": "1.9.0",
     "date-fns": "^2.30.0",
     "i18next": "^23.5.1",
     "material-react-table": "^2.0.2",
@@ -63,5 +63,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "c1616886687301f9d71d0e7f1442f72b2f520ac1"
+  "gitHead": "dbcfcc17285a611b6d6ea641429e1a42ba62e105"
 }

package/src/Autocomplete.tsx

@@ -161,7 +161,7 @@ export type AutocompleteProps<
   getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;
 } & Pick<
   FieldComponentProps,
-  "errorMessage" | "hint" | "id" | "isOptional" | "name"
+  "errorMessage" | "hint" | "id" | "isOptional" | "name" | "isFullWidth"
 > &
   SeleniumProps;
 
@@ -177,6 +177,7 @@ const Autocomplete = <
   inputValue,
   isCustomValueAllowed,
   isDisabled,
+  isFullWidth = false,
   isLoading,
   isOptional = false,
   isReadOnly,
@@ -309,6 +310,7 @@ const Autocomplete = <
       freeSolo={isCustomValueAllowed}
       filterSelectedOptions={true}
       id={idOverride}
+      fullWidth={isFullWidth}
       loading={isLoading}
       multiple={hasMultipleChoices}
       onBlur={onBlur}

package/src/Checkbox.tsx

@@ -16,6 +16,7 @@ import {
   Checkbox as MuiCheckbox,
   CheckboxProps as MuiCheckboxProps,
   FormControlLabel,
+  FormControlLabelProps as MuiFormControlLabelProps,
   FormHelperText,
 } from "@mui/material";
 
@@ -68,6 +69,10 @@ export type CheckboxProps = {
    * The value attribute of the Checkbox
    */
   value?: string;
+  /**
+   * Callback fired when the blur event happens. Provides event value.
+   */
+  onBlur?: MuiFormControlLabelProps["onBlur"];
 } & Pick<FieldComponentProps, "id" | "isDisabled" | "name"> &
   CheckedFieldProps<MuiCheckboxProps> &
   SeleniumProps;
@@ -85,6 +90,7 @@ const Checkbox = ({
   hint,
   name: nameOverride,
   onChange: onChangeProp,
+  onBlur: onBlurProp,
   testId,
   validity = "inherit",
   value,
@@ -127,6 +133,13 @@ const Checkbox = ({
     [onChangeProp]
   );
 
+  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps["onBlur"]>>(
+    (event) => {
+      onBlurProp?.(event);
+    },
+    [onBlurProp]
+  );
+
   return (
     <FormControlLabel
       sx={{ alignItems: "flex-start" }}
@@ -157,6 +170,7 @@ const Checkbox = ({
       name={nameOverride ?? idOverride}
       value={value}
       required={isRequired}
+      onBlur={onBlur}
     />
   );
 };

package/src/Field.tsx

@@ -59,6 +59,10 @@ export type FieldProps = {
    * If `true`, the component is disabled.
    */
   isDisabled?: boolean;
+  /**
+   * If `true`, the component can stretch to fill the width of the container.
+   */
+  isFullWidth?: boolean;
   /**
    * If `true`, the `input` element is not required.
    */
@@ -96,6 +100,7 @@ const Field = ({
   hint,
   id: idOverride,
   isDisabled: isDisabledProp = false,
+  isFullWidth = false,
   isRadioGroup = false,
   isOptional = false,
   label,
@@ -126,6 +131,7 @@ const Field = ({
       disabled={isDisabled}
       error={Boolean(errorMessage)}
       role={isRadioGroup ? "radiogroup" : undefined}
+      fullWidth={isFullWidth}
     >
       {fieldType === "group" ? (
         <MuiFormLabel component="legend">

package/src/FieldComponentProps.ts

@@ -27,6 +27,10 @@ export type FieldComponentProps = {
    * If `true`, the component is disabled.
    */
   isDisabled?: boolean;
+  /**
+   * If `true`, the component can stretch to fill the width of the container.
+   */
+  isFullWidth?: boolean;
   /**
    * If `true`, the `input` element is not required.
    */

package/src/NativeSelect.tsx

@@ -81,7 +81,7 @@ export type NativeSelectProps<
   value?: Value;
 } & Pick<
   FieldComponentProps,
-  "errorMessage" | "hint" | "id" | "isDisabled" | "isOptional"
+  "errorMessage" | "hint" | "id" | "isDisabled" | "isOptional" | "isFullWidth"
 > &
   SeleniumProps;
 
@@ -97,6 +97,7 @@ const NativeSelect: ForwardRefWithType = forwardRef(
       hint,
       id: idOverride,
       isDisabled = false,
+      isFullWidth = false,
       isMultiSelect,
       isOptional = false,
       label,
@@ -179,6 +180,7 @@ const NativeSelect: ForwardRefWithType = forwardRef(
         hint={hint}
         id={idOverride}
         isDisabled={isDisabled}
+        isFullWidth={isFullWidth}
         isOptional={isOptional}
         label={label}
         renderFieldComponent={renderFieldComponent}

package/src/PasswordField.tsx

@@ -84,6 +84,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
       hint,
       id: idOverride,
       isDisabled = false,
+      isFullWidth = false,
       isOptional = false,
       hasShowPassword = true,
       isReadOnly,
@@ -199,6 +200,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
         hint={hint}
         id={idOverride}
         isDisabled={isDisabled}
+        isFullWidth={isFullWidth}
         isOptional={isOptional}
         label={label}
         renderFieldComponent={renderFieldComponent}

package/src/Radio.tsx

@@ -12,6 +12,7 @@
 
 import {
   FormControlLabel,
+  FormControlLabelProps as MuiFormControlLabelProps,
   Radio as MuiRadio,
   RadioProps as MuiRadioProps,
 } from "@mui/material";
@@ -41,6 +42,10 @@ export type RadioProps = {
    * Callback fired when the state is changed. Provides event and checked value.
    */
   onChange?: MuiRadioProps["onChange"];
+  /**
+   * Callback fired when the blur event happens. Provides event value.
+   */
+  onBlur?: MuiFormControlLabelProps["onBlur"];
 } & Pick<FieldComponentProps, "isDisabled" | "name"> &
   SeleniumProps;
 
@@ -53,6 +58,7 @@ const Radio = ({
   testId,
   value,
   onChange: onChangeProp,
+  onBlur: onBlurProp,
 }: RadioProps) => {
   const onChange = useCallback<NonNullable<MuiRadioProps["onChange"]>>(
     (event, checked) => {
@@ -61,6 +67,13 @@ const Radio = ({
     [onChangeProp]
   );
 
+  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps["onBlur"]>>(
+    (event) => {
+      onBlurProp?.(event);
+    },
+    [onBlurProp]
+  );
+
   return (
     <FormControlLabel
       checked={isChecked}
@@ -71,6 +84,7 @@ const Radio = ({
       label={label}
       name={name}
       value={value}
+      onBlur={onBlur}
     />
   );
 };

package/src/SearchField.tsx

@@ -78,7 +78,7 @@ export type SearchFieldProps = {
    * The value of the `input` element, to use when controlled.
    */
   value?: string;
-} & Pick<FieldComponentProps, "id" | "isDisabled" | "name"> &
+} & Pick<FieldComponentProps, "id" | "isDisabled" | "name" | "isFullWidth"> &
   SeleniumProps;
 
 const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
@@ -89,6 +89,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       hasInitialFocus,
       id: idOverride,
       isDisabled = false,
+      isFullWidth = false,
       label,
       name: nameOverride,
       onChange: onChangeProp,
@@ -186,6 +187,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
         hasVisibleLabel={false}
         id={idOverride}
         isDisabled={isDisabled}
+        isFullWidth={isFullWidth}
         isOptional={true}
         label={label}
         renderFieldComponent={renderFieldComponent}

package/src/Select.tsx

@@ -84,7 +84,13 @@ export type SelectProps<
   value?: Value;
 } & Pick<
   FieldComponentProps,
-  "errorMessage" | "hint" | "id" | "isDisabled" | "isOptional" | "name"
+  | "errorMessage"
+  | "hint"
+  | "id"
+  | "isDisabled"
+  | "isOptional"
+  | "name"
+  | "isFullWidth"
 > &
   SeleniumProps;
 
@@ -114,6 +120,7 @@ const Select = <
   hint,
   id: idOverride,
   isDisabled = false,
+  isFullWidth = false,
   isMultiSelect,
   isOptional = false,
   label,
@@ -282,6 +289,7 @@ const Select = <
       hint={hint}
       id={idOverride}
       isDisabled={isDisabled}
+      isFullWidth={isFullWidth}
       isOptional={isOptional}
       label={label}
       renderFieldComponent={renderFieldComponent}

package/src/TextField.tsx

@@ -104,6 +104,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       hint,
       id: idOverride,
       isDisabled = false,
+      isFullWidth = false,
       isMultiline = false,
       isOptional = false,
       isReadOnly,
@@ -205,6 +206,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         hint={hint}
         id={idOverride}
         isDisabled={isDisabled}
+        isFullWidth={isFullWidth}
         isOptional={isOptional}
         label={label}
         renderFieldComponent={renderFieldComponent}