@okta/odyssey-react-mui 1.13.0 → 1.13.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.13.0",
+  "version": "1.13.2",
   "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.13.0",
+    "@okta/odyssey-design-tokens": "1.13.2",
     "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": "962a112a4ca1d9eef1d3fa8789fe47344e46b059"
+  "gitHead": "8a55b110963ec05ab28c11147593dd90aa7c17f4"
 }

package/src/@types/react-augment.d.ts

@@ -10,12 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { FC } from "react";
-export interface ForwardRefWithType extends FC<WithForwardRefProps<Option>> {
-  <T extends Option>(props: WithForwardRefProps<T>): ReturnType<
-    FC<WithForwardRefProps<T>>
-  >;
-}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from "react";
 
 declare module "react" {
   type DataAttributeKey = `data-${string}`;

package/src/Button.tsx

@@ -13,6 +13,7 @@
 import { Button as MuiButton } from "@mui/material";
 import type { ButtonProps as MuiButtonProps } from "@mui/material";
 import {
+  HTMLAttributes,
   memo,
   ReactElement,
   useCallback,
@@ -84,6 +85,7 @@ export type ButtonProps = {
    * The icon element to display at the start of the Button
    */
   startIcon?: ReactElement;
+  tabIndex?: HTMLAttributes<HTMLElement>["tabIndex"];
   /**
    * The tooltip text for the Button if it's icon-only
    */
@@ -128,6 +130,7 @@ const Button = ({
   onClick,
   size = "medium",
   startIcon,
+  tabIndex,
   testId,
   tooltipText,
   translate,
@@ -168,6 +171,7 @@ const Button = ({
           ref={localButtonRef}
           size={size}
           startIcon={startIcon}
+          tabIndex={tabIndex}
           translate={translate}
           type={type}
           variant={variant}
@@ -188,6 +192,7 @@ const Button = ({
       onClick,
       size,
       startIcon,
+      tabIndex,
       testId,
       translate,
       type,

package/src/NativeSelect.tsx

@@ -28,7 +28,6 @@ import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { HtmlProps } from "./HtmlProps";
 import { FocusHandle, getControlState, useInputValues } from "./inputUtils";
-import { ForwardRefWithType } from "./@types/react-augment";
 
 export type NativeSelectOption = {
   text: string;
@@ -105,7 +104,7 @@ export type NativeSelectProps<
 > &
   HtmlProps;
 
-const NativeSelect: ForwardRefWithType = forwardRef(
+const NativeSelect = forwardRef(
   <
     Value extends NativeSelectValueType<HasMultipleChoices>,
     HasMultipleChoices extends boolean

package/src/SearchField.tsx

@@ -15,6 +15,7 @@ import {
   ChangeEventHandler,
   FocusEventHandler,
   forwardRef,
+  HTMLAttributes,
   InputHTMLAttributes,
   memo,
   useCallback,
@@ -74,6 +75,8 @@ export type SearchFieldProps = {
    * The short hint displayed in the `input` before the user enters a value.
    */
   placeholder?: string;
+
+  tabIndex?: HTMLAttributes<HTMLElement>["tabIndex"];
   /**
    * The value of the `input` element, to use when controlled.
    */
@@ -101,6 +104,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       onBlur,
       onClear: onClearProp,
       placeholder,
+      tabIndex,
       testId,
       translate,
       value,
@@ -135,6 +139,9 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       ({ ariaDescribedBy, id }) => (
         <InputBase
           {...inputValues}
+          inputProps={{
+            tabIndex,
+          }}
           aria-describedby={ariaDescribedBy}
           autoComplete={autoCompleteType}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
@@ -183,6 +190,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
         onFocus,
         placeholder,
         ref,
+        tabIndex,
         testId,
         translate,
       ]

package/src/index.ts

@@ -52,7 +52,6 @@ export type {
   ThemeOptions,
 } from "@mui/material";
 
-export type { ForwardRefWithType } from "./@types/react-augment";
 export type { FocusHandle } from "./inputUtils";
 
 export { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";