@okta/odyssey-react-mui 1.9.5 → 1.9.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.9.5",
+  "version": "1.9.7",
   "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.9.5",
+    "@okta/odyssey-design-tokens": "1.9.7",
     "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": "5e04a06a8f989e16d12c07fd90f4e3023a6ca02d"
+  "gitHead": "b27f35a95290d8e55eada55587b2b26804d1520e"
 }

package/src/Autocomplete.tsx

@@ -161,7 +161,13 @@ export type AutocompleteProps<
   getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;
 } & Pick<
   FieldComponentProps,
-  "errorMessage" | "hint" | "id" | "isOptional" | "name" | "isFullWidth"
+  | "errorMessage"
+  | "hint"
+  | "HintLinkComponent"
+  | "id"
+  | "isFullWidth"
+  | "isOptional"
+  | "name"
 > &
   SeleniumProps;
 
@@ -182,6 +188,7 @@ const Autocomplete = <
   isOptional = false,
   isReadOnly,
   hint,
+  HintLinkComponent,
   label,
   name: nameOverride,
   onBlur,
@@ -240,6 +247,7 @@ const Autocomplete = <
         hasVisibleLabel
         id={InputLabelProps.htmlFor}
         hint={hint}
+        HintLinkComponent={HintLinkComponent}
         label={label}
         isOptional={isOptional}
         renderFieldComponent={({
@@ -264,7 +272,7 @@ const Autocomplete = <
         )}
       />
     ),
-    [errorMessage, hint, isOptional, label, nameOverride]
+    [errorMessage, hint, HintLinkComponent, isOptional, label, nameOverride]
   );
   const onChange = useCallback<
     NonNullable<

package/src/Breadcrumbs.tsx

@@ -27,7 +27,7 @@ import {
   useState,
 } from "react";
 import { GroupIcon, HomeIcon, UserIcon } from "./icons.generated";
-import { Typography } from "./Typography";
+import { Subordinate } from "./Typography";
 import { useTranslation } from "react-i18next";
 
 export type BreadcrumbType = "listItem" | "menuItem" | "currentPage";
@@ -71,7 +71,7 @@ export const Breadcrumb = ({ children, href, iconName }: BreadcrumbProps) => {
   }
 
   if (breadcrumbType === "currentPage") {
-    return <Typography>{breadcrumbContent}</Typography>;
+    return <Subordinate color="textPrimary">{breadcrumbContent}</Subordinate>;
   }
 
   // breadcrumbType === "listItem" is the default
@@ -152,7 +152,7 @@ const BreadcrumbList = ({
 
       {breadcrumbSections.insideMenu && (
         <>
-          <ButtonBase onClick={onMenuButtonClick}>…</ButtonBase>
+          <ButtonBase onClick={onMenuButtonClick}>...</ButtonBase>
           <Menu
             open={Boolean(anchorEl)}
             onClose={onCloseMenu}

package/src/CheckboxGroup.tsx

@@ -33,13 +33,17 @@ export type CheckboxGroupProps = {
    * The label text for the CheckboxGroup
    */
   label: string;
-} & Pick<FieldComponentProps, "errorMessage" | "hint" | "isDisabled"> &
+} & Pick<
+  FieldComponentProps,
+  "errorMessage" | "hint" | "HintLinkComponent" | "isDisabled"
+> &
   SeleniumProps;
 
 const CheckboxGroup = ({
   children,
   errorMessage,
   hint,
+  HintLinkComponent,
   isDisabled,
   isRequired = false,
   label,
@@ -65,6 +69,7 @@ const CheckboxGroup = ({
       fieldType="group"
       hasVisibleLabel={true}
       hint={hint}
+      HintLinkComponent={HintLinkComponent}
       isDisabled={isDisabled}
       isOptional={!isRequired}
       label={label}

package/src/Field.tsx

@@ -16,6 +16,8 @@ import {
   FormControl as MuiFormControl,
   FormLabel as MuiFormLabel,
 } from "@mui/material";
+
+import { FieldComponentProps } from "./FieldComponentProps";
 import { FieldError } from "./FieldError";
 import { FieldHint } from "./FieldHint";
 import { FieldLabel } from "./FieldLabel";
@@ -27,10 +29,6 @@ import { useUniqueId } from "./useUniqueId";
 export const fieldTypeValues = ["single", "group"] as const;
 
 export type FieldProps = {
-  /**
-   * If `error` is not undefined, the `input` will indicate an error.
-   */
-  errorMessage?: string;
   /**
    * The field type determines how ARIA components are setup. It's important to use this to denote if you expect only one component (like a text field) or multiple (like a radio group).
    */
@@ -39,14 +37,6 @@ export type FieldProps = {
    * If `true`, the Field label will be shown
    */
   hasVisibleLabel: boolean;
-  /**
-   * The helper text content.
-   */
-  hint?: string;
-  /**
-   * The id of the `input` element.
-   */
-  id?: string;
   /**
    * Important for narrowing down the `fieldset` role to "radiogroup".
    */
@@ -55,18 +45,6 @@ export type FieldProps = {
    * Important for determining if children inherit error state
    */
   isCheckboxGroup?: boolean;
-  /**
-   * 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.
-   */
-  isOptional?: boolean;
   /**
    * The label for the `input` element.
    */
@@ -98,6 +76,7 @@ const Field = ({
   fieldType,
   hasVisibleLabel,
   hint,
+  HintLinkComponent,
   id: idOverride,
   isDisabled: isDisabledProp = false,
   isFullWidth = false,
@@ -105,7 +84,17 @@ const Field = ({
   isOptional = false,
   label,
   renderFieldComponent,
-}: FieldProps) => {
+}: FieldProps &
+  Pick<
+    FieldComponentProps,
+    | "errorMessage"
+    | "hint"
+    | "HintLinkComponent"
+    | "id"
+    | "isDisabled"
+    | "isFullWidth"
+    | "isOptional"
+  >) => {
   const { t } = useTranslation();
 
   const id = useUniqueId(idOverride);
@@ -152,7 +141,9 @@ const Field = ({
         />
       )}
 
-      {hint && <FieldHint id={hintId} text={hint} />}
+      {hint && (
+        <FieldHint id={hintId} LinkComponent={HintLinkComponent} text={hint} />
+      )}
 
       {renderFieldComponent({
         ariaDescribedBy,

package/src/FieldComponentProps.ts

@@ -10,6 +10,10 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { ReactElement } from "react";
+
+import { HintLink } from "./HintLink";
+
 export type FieldComponentProps = {
   /**
    * If `error` is not undefined, the `input` will indicate an error.
@@ -19,6 +23,10 @@ export type FieldComponentProps = {
    * The helper text content.
    */
   hint?: string;
+  /**
+   * A `Link` component to provide greater context that is rendered at the end of the `hint` text
+   */
+  HintLinkComponent?: ReactElement<typeof HintLink>;
   /**
    * The id of the `input` element.
    */

package/src/FieldHint.tsx

@@ -14,17 +14,24 @@ import { memo } from "react";
 
 import { FormHelperText } from "@mui/material";
 
+import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
 
 export type FieldHintProps = {
+  LinkComponent?: FieldComponentProps["HintLinkComponent"];
   id?: string;
   text: string;
 } & SeleniumProps;
 
-const FieldHint = ({ id, testId, text }: FieldHintProps) => {
+const FieldHint = ({ id, LinkComponent, testId, text }: FieldHintProps) => {
   return (
     <FormHelperText data-se={testId} id={id}>
       {text}
+      {LinkComponent && (
+        <>
+          <span>&nbsp;{LinkComponent}</span>
+        </>
+      )}
     </FormHelperText>
   );
 };

package/src/HintLink.tsx

@@ -0,0 +1,28 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo } from "react";
+
+import { Link, LinkProps } from "./Link";
+
+const HintLink = (
+  props: Pick<
+    LinkProps,
+    "children" | "href" | "onClick" | "rel" | "target" | "testId"
+  >
+) => <Link {...props} variant="default" />;
+
+const MemoizedHintLink = memo(HintLink);
+
+MemoizedHintLink.displayName = "HintLink";
+
+export { MemoizedHintLink as HintLink };

package/src/NativeSelect.tsx

@@ -81,7 +81,13 @@ export type NativeSelectProps<
   value?: Value;
 } & Pick<
   FieldComponentProps,
-  "errorMessage" | "hint" | "id" | "isDisabled" | "isOptional" | "isFullWidth"
+  | "errorMessage"
+  | "hint"
+  | "HintLinkComponent"
+  | "id"
+  | "isDisabled"
+  | "isFullWidth"
+  | "isOptional"
 > &
   SeleniumProps;
 
@@ -95,6 +101,7 @@ const NativeSelect: ForwardRefWithType = forwardRef(
       errorMessage,
       hasMultipleChoices: hasMultipleChoicesProp,
       hint,
+      HintLinkComponent,
       id: idOverride,
       isDisabled = false,
       isFullWidth = false,
@@ -178,6 +185,7 @@ const NativeSelect: ForwardRefWithType = forwardRef(
         fieldType="single"
         hasVisibleLabel
         hint={hint}
+        HintLinkComponent={HintLinkComponent}
         id={idOverride}
         isDisabled={isDisabled}
         isFullWidth={isFullWidth}

package/src/RadioGroup.tsx

@@ -45,7 +45,7 @@ export type RadioGroupProps = {
   value?: RadioProps["value"];
 } & Pick<
   FieldComponentProps,
-  "errorMessage" | "hint" | "id" | "isDisabled" | "name"
+  "errorMessage" | "hint" | "HintLinkComponent" | "id" | "isDisabled" | "name"
 > &
   SeleniumProps;
 
@@ -54,6 +54,7 @@ const RadioGroup = ({
   defaultValue,
   errorMessage,
   hint,
+  HintLinkComponent,
   id: idOverride,
   isDisabled,
   label,
@@ -101,6 +102,7 @@ const RadioGroup = ({
       fieldType="group"
       hasVisibleLabel={false}
       hint={hint}
+      HintLinkComponent={HintLinkComponent}
       id={idOverride}
       isDisabled={isDisabled}
       label={label}

package/src/Select.tsx

@@ -86,11 +86,12 @@ export type SelectProps<
   FieldComponentProps,
   | "errorMessage"
   | "hint"
+  | "HintLinkComponent"
   | "id"
   | "isDisabled"
+  | "isFullWidth"
   | "isOptional"
   | "name"
-  | "isFullWidth"
 > &
   SeleniumProps;
 
@@ -118,6 +119,7 @@ const Select = <
   errorMessage,
   hasMultipleChoices: hasMultipleChoicesProp,
   hint,
+  HintLinkComponent,
   id: idOverride,
   isDisabled = false,
   isFullWidth = false,
@@ -287,6 +289,7 @@ const Select = <
       fieldType="single"
       hasVisibleLabel
       hint={hint}
+      HintLinkComponent={HintLinkComponent}
       id={idOverride}
       isDisabled={isDisabled}
       isFullWidth={isFullWidth}

package/src/TextField.tsx

@@ -102,6 +102,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       endAdornment,
       errorMessage,
       hint,
+      HintLinkComponent,
       id: idOverride,
       isDisabled = false,
       isFullWidth = false,
@@ -204,6 +205,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         fieldType="single"
         hasVisibleLabel
         hint={hint}
+        HintLinkComponent={HintLinkComponent}
         id={idOverride}
         isDisabled={isDisabled}
         isFullWidth={isFullWidth}

package/src/index.ts

@@ -71,6 +71,7 @@ export * from "./Dialog";
 export * from "./Fieldset";
 export * from "./FieldComponentProps";
 export * from "./Form";
+export * from "./HintLink";
 export * from "./Link";
 export * from "./MenuButton";
 export * from "./MenuItem";

package/src/labs/DataTable.tsx

@@ -189,6 +189,12 @@ export type DataTableProps = {
    * firing on input change.
    */
   hasSearchSubmitButton?: boolean;
+  /**
+   * The debounce time, in milliseconds, for the search input firing
+   * `onChangeSearch` when changed. If `hasSearchSubmitButton` is true,
+   * this doesn't do anything.
+   */
+  searchDelayTime?: number;
   /**
    * Callback that fires when a row (or rows) is selected or unselected.
    */
@@ -259,6 +265,7 @@ const DataTable = ({
   reorderDataFn,
   totalRows,
   hasSearchSubmitButton,
+  searchDelayTime,
   paginationType = "paged",
   onRowSelectionChange,
   rowActionButtons,
@@ -628,7 +635,14 @@ const DataTable = ({
         )}
       </>
     ),
-    [density, columnVisibility, columns, hasChangeableDensity]
+    [
+      columnVisibility,
+      columns,
+      density,
+      hasChangeableDensity,
+      handleColumnVisibility,
+      hasColumnVisibility,
+    ]
   );
 
   return (
@@ -637,6 +651,7 @@ const DataTable = ({
         onChangeSearch={hasSearch ? handleSearch : undefined}
         onChangeFilters={handleFilters}
         hasSearchSubmitButton={hasSearchSubmitButton}
+        searchDelayTime={searchDelayTime}
         additionalActions={tableSettings}
         filters={
           hasFilters

package/src/theme/components.tsx

@@ -20,6 +20,7 @@ import { chipClasses } from "@mui/material/Chip";
 import { dividerClasses } from "@mui/material/Divider";
 import { formControlLabelClasses } from "@mui/material/FormControlLabel";
 import { formLabelClasses } from "@mui/material/FormLabel";
+import { formGroupClasses } from "@mui/material/FormGroup";
 import { inputAdornmentClasses } from "@mui/material/InputAdornment";
 import { inputBaseClasses } from "@mui/material/InputBase";
 import { listItemIconClasses } from "@mui/material/ListItemIcon";
@@ -453,34 +454,46 @@ export const components = ({
     MuiBreadcrumbs: {
       styleOverrides: {
         li: {
-          fontSize: odysseyTokens.TypographySizeBody,
-          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          fontSize: odysseyTokens.TypographySizeSubordinate,
+
+          "& svg": {
+            width: odysseyTokens.Spacing3,
+          },
+
+          "& > p": {
+            paddingInline: odysseyTokens.Spacing1,
+          },
 
           "& > a, & > button": {
             borderRadius: odysseyTokens.BorderRadiusTight,
             color: odysseyTokens.TypographyColorSubordinate,
             display: "flex",
             gap: odysseyTokens.Spacing1,
-            padding: odysseyTokens.Spacing1,
+            paddingInline: odysseyTokens.Spacing1,
+            paddingBlock: 2,
             transitionProperty: "color, background-color",
             transitionDuration: "100ms",
             transitionTimingFunction: "linear",
 
             "&:hover": {
-              backgroundColor: odysseyTokens.HueNeutral200,
+              backgroundColor: odysseyTokens.HueNeutral100,
               color: odysseyTokens.TypographyColorBody,
             },
 
             "&:focus-visible": {
-              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
-              outline: "2px solid transparent",
-              outlineOffset: "1px",
+              outlineWidth: 2,
+              outlineStyle: "solid",
+              outlineColor: odysseyTokens.PalettePrimaryMain,
+              outlineOffset: -2,
             },
           },
         },
         separator: {
           color: odysseyTokens.BorderColorDisplay,
-          marginInline: odysseyTokens.Spacing1,
+          fontSize: odysseyTokens.TypographySizeSubordinate,
+          fontWeight: odysseyTokens.TypographyWeightBodyBold,
+          marginInlineStart: 6,
+          marginInlineEnd: 4,
         },
       },
     },
@@ -770,7 +783,7 @@ export const components = ({
             },
 
             [`.${svgIconClasses.root}`]: {
-              color: odysseyTokens.HueNeutral900,
+              color: odysseyTokens.HueNeutral300,
             },
           },
         }),
@@ -948,8 +961,8 @@ export const components = ({
     },
     MuiCircularProgress: {
       defaultProps: {
-        size: odysseyTokens.TypographyScale2,
-        thickness: 8,
+        size: odysseyTokens.Spacing5,
+        thickness: 10,
         color: "primary",
         disableShrink: false,
         variant: "indeterminate",
@@ -957,7 +970,7 @@ export const components = ({
       styleOverrides: {
         root: ({ ownerState }) => ({
           ...(ownerState.color !== "inherit" && {
-            color: odysseyTokens.PalettePrimaryDark,
+            color: odysseyTokens.PalettePrimaryMain,
           }),
         }),
         circle: ({ ownerState }) => ({
@@ -1449,6 +1462,9 @@ export const components = ({
           ...(ownerState.fullWidth && {
             maxWidth: "100%",
           }),
+          [`& .${formGroupClasses.root}`]: {
+            marginBlockStart: odysseyTokens.Spacing1,
+          },
         }),
       },
     },
@@ -1474,6 +1490,9 @@ export const components = ({
           "&.Mui-disabled": {
             pointerEvents: "none",
           },
+          [`& .${checkboxClasses.root}`]: {
+            marginBlockStart: 0,
+          },
           [`&:hover .${radioClasses.root}, &:hover .${checkboxClasses.root}`]: {
             color: odysseyTokens.TypographyColorBody,
           },
@@ -1492,6 +1511,7 @@ export const components = ({
         }),
         label: {
           gap: odysseyTokens.Spacing1,
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
         },
         asterisk: () => ({
           display: "none",
@@ -1504,6 +1524,9 @@ export const components = ({
       },
       styleOverrides: {
         root: {
+          display: "flex",
+          justifyContent: "flex-start",
+          alignItems: "center",
           fontSize: odysseyTokens.TypographySizeSubordinate,
           lineHeight: odysseyTokens.TypographyLineHeightBody,
           marginBlockStart: odysseyTokens.Spacing2,
@@ -1516,6 +1539,10 @@ export const components = ({
             marginBlockEnd: 0,
           },
           textAlign: "start",
+
+          ".field-hint-link-component": {
+            marginInlineStart: odysseyTokens.Spacing1,
+          },
         },
       },
     },
@@ -1987,8 +2014,8 @@ export const components = ({
           "&::before": {
             content: "''",
             position: "absolute",
-            width: "0.5em",
-            height: "0.5em",
+            width: odysseyTokens.Spacing2,
+            height: odysseyTokens.Spacing2,
             borderRadius: "50%",
             backgroundColor: "transparent",
             transition: theme.transitions.create(["background-color"], {
@@ -2032,10 +2059,10 @@ export const components = ({
           },
           "&.Mui-disabled": {
             backgroundColor: odysseyTokens.HueNeutral50,
-            borderColor: odysseyTokens.HueNeutral300,
+            borderColor: odysseyTokens.BorderColorDisabled,
 
             "&.Mui-checked::before": {
-              backgroundColor: odysseyTokens.HueNeutral300,
+              backgroundColor: odysseyTokens.BorderColorDisabled,
             },
           },
         }),