@okta/odyssey-react-mui 1.13.0 → 1.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.13.0",
+  "version": "1.13.1",
   "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.1",
     "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": "be8728a2fcf8943a503d9d5e7e39a7348a970d79"
 }

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/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,
       ]