@okta/odyssey-react-mui 1.9.5 → 1.9.6

package/package.json

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

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

@@ -628,7 +628,14 @@ const DataTable = ({
         )}
       </>
     ),
-    [density, columnVisibility, columns, hasChangeableDensity]
+    [
+      columnVisibility,
+      columns,
+      density,
+      hasChangeableDensity,
+      handleColumnVisibility,
+      hasColumnVisibility,
+    ]
   );
 
   return (

package/src/theme/components.tsx

@@ -1504,6 +1504,9 @@ export const components = ({
       },
       styleOverrides: {
         root: {
+          display: "flex",
+          justifyContent: "flex-start",
+          alignItems: "center",
           fontSize: odysseyTokens.TypographySizeSubordinate,
           lineHeight: odysseyTokens.TypographyLineHeightBody,
           marginBlockStart: odysseyTokens.Spacing2,
@@ -1516,6 +1519,10 @@ export const components = ({
             marginBlockEnd: 0,
           },
           textAlign: "start",
+
+          ".field-hint-link-component": {
+            marginInlineStart: odysseyTokens.Spacing1,
+          },
         },
       },
     },