@okta/odyssey-react-mui 0.21.3 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "0.21.3",
+  "version": "0.22.0",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -25,7 +25,7 @@
     "@mui/lab": "^5.0.0-alpha.117",
     "@mui/material": "^5.11.6",
     "@mui/utils": "^5.11.2",
-    "@okta/odyssey-design-tokens": "0.21.3"
+    "@okta/odyssey-design-tokens": "0.22.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -33,5 +33,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "06e016c9b7228f30babae07b3b23be04ceaa2f77"
+  "gitHead": "b1a4a93f7d570162a52e4c28012fb65e31d5bb4b"
 }

package/src/Autocomplete.tsx

@@ -0,0 +1,132 @@
+/*!
+ * Copyright (c) 2023-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 {
+  Autocomplete as MuiAutocomplete,
+  AutocompleteProps as MuiAutocompleteProps,
+  InputBase,
+} from "@mui/material";
+import { memo, useCallback } from "react";
+
+import { Field } from "./Field";
+
+export type AutocompleteProps<
+  OptionType,
+  HasMultipleChoices extends boolean | undefined,
+  IsCustomValueAllowed extends boolean | undefined
+> = {
+  hasMultipleChoices?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["multiple"];
+  hint?: string;
+  isCustomValueAllowed?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["freeSolo"];
+  isDisabled?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["disabled"];
+  isLoading?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["loading"];
+  isReadOnly?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["readOnly"];
+  label: string;
+  onChange?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["onChange"];
+  options: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["options"];
+  value?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["value"];
+};
+
+const Autocomplete = <
+  OptionType,
+  HasMultipleChoices extends boolean | undefined,
+  IsCustomValueAllowed extends boolean | undefined
+>({
+  isCustomValueAllowed,
+  hasMultipleChoices,
+  isDisabled,
+  isLoading,
+  isReadOnly,
+  hint,
+  label,
+  onChange,
+  options,
+  value,
+}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
+  const renderInput = useCallback(
+    ({ InputLabelProps, InputProps, ...params }) => (
+      <Field
+        {...InputLabelProps}
+        hasVisibleLabel
+        hint={hint}
+        label={label}
+        renderFieldComponent={({ ariaDescribedBy, id }) => (
+          <InputBase
+            {...params}
+            {...InputProps}
+            aria-describedby={ariaDescribedBy}
+            id={id}
+          />
+        )}
+      />
+    ),
+    [hint, label]
+  );
+
+  return (
+    <MuiAutocomplete
+      disabled={isDisabled}
+      freeSolo={isCustomValueAllowed}
+      loading={isLoading}
+      multiple={hasMultipleChoices}
+      onChange={onChange}
+      options={options}
+      readOnly={isReadOnly}
+      renderInput={renderInput}
+      value={value}
+    />
+  );
+};
+
+const MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;
+
+export { MemoizedAutocomplete as Autocomplete };

package/src/Banner.tsx

@@ -12,7 +12,7 @@
 
 import { AlertColor, AlertProps } from "@mui/material";
 import { memo } from "react";
-import { Alert, Link, visuallyHidden } from "./";
+import { Alert, Link, ScreenReaderText } from "./";
 
 export interface BannerProps {
   /**
@@ -55,7 +55,7 @@ const Banner = ({
   text,
 }: BannerProps) => (
   <Alert onClose={onClose} role={role} severity={severity} variant="banner">
-    <span style={visuallyHidden}>{severity}:</span>
+    <ScreenReaderText>{severity}:</ScreenReaderText>
     {text}
     {linkUrl && (
       <Link href={linkUrl} variant="monochrome">

package/src/Button.tsx

@@ -0,0 +1,75 @@
+/*!
+ * 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 { Button as MuiButton } from "@mui/material";
+import type { ButtonProps as MuiButtonProps } from "@mui/material";
+import { Tooltip } from "./";
+import { memo } from "react";
+
+export type ButtonProps = {
+  endIcon?: React.ReactNode;
+  id?: string;
+  isDisabled?: boolean;
+  isFullWidth?: boolean;
+  onClick?: MuiButtonProps["onClick"];
+  size?: MuiButtonProps["size"];
+  startIcon?: React.ReactNode;
+  text?: string;
+  /**
+   * `tooltipText` determines the text of the tooltip that wraps the button if it's icon-only.
+   */
+  tooltipText?: string;
+  variant?: "primary" | "secondary" | "danger" | "floating";
+};
+
+const Button = ({
+  endIcon,
+  id,
+  isDisabled,
+  isFullWidth,
+  onClick,
+  size = "medium",
+  startIcon,
+  text,
+  tooltipText,
+  variant,
+}: ButtonProps) => {
+  const button = (
+    <MuiButton
+      disabled={isDisabled}
+      endIcon={endIcon}
+      fullWidth={isFullWidth}
+      id={id}
+      onClick={onClick}
+      size={size}
+      startIcon={startIcon}
+      variant={variant}
+    >
+      {text}
+    </MuiButton>
+  );
+
+  return (
+    <>
+      {tooltipText && (
+        <Tooltip describeChild placement="top" title={tooltipText}>
+          {button}
+        </Tooltip>
+      )}
+      {!tooltipText && button}
+    </>
+  );
+};
+
+const MemoizedButton = memo(Button);
+
+export { MemoizedButton as Button };

package/src/CheckboxGroup.tsx

@@ -18,7 +18,7 @@ import {
   FormGroup,
   FormHelperText,
   FormLabel,
-  visuallyHidden,
+  ScreenReaderText,
 } from ".";
 
 export type CheckboxGroupProps = {
@@ -61,7 +61,7 @@ const CheckboxGroup = ({
       <FormGroup aria-describedby={ariaDescribedBy}>{children}</FormGroup>
       {errorMessage && (
         <FormHelperText id={`${name}-error`} error>
-          <span style={visuallyHidden}>Error:</span> {errorMessage}
+          <ScreenReaderText>Error:</ScreenReaderText> {errorMessage}
         </FormHelperText>
       )}
     </FormControl>

package/src/CircularProgress.tsx

@@ -0,0 +1,24 @@
+/*!
+ * 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 { CircularProgress as MuiCircularProgress } from "@mui/material";
+
+export type CircularProgressProps = {
+  value?: number;
+};
+
+export const CircularProgress = ({ value }: CircularProgressProps) => (
+  <MuiCircularProgress
+    value={value}
+    variant={value ? "determinate" : "indeterminate"}
+  />
+);

package/src/Field.tsx

@@ -0,0 +1,112 @@
+/*!
+ * 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, ReactElement, useMemo } from "react";
+
+import {
+  FieldError,
+  FieldHint,
+  FieldLabel,
+  FormControl,
+  useUniqueId,
+} from "./";
+
+export type FieldProps = {
+  /**
+   * If `error` is not undefined, the `input` will indicate an error.
+   */
+  errorMessage?: string;
+  hasVisibleLabel: boolean;
+  /**
+   * The helper text content.
+   */
+  hint?: string;
+  /**
+   * The id of the `input` element.
+   */
+  id?: string;
+  /**
+   * If `true`, the component is disabled.
+   */
+  isDisabled?: boolean;
+  /**
+   * If `true`, the `input` element is required.
+   */
+  isRequired?: boolean;
+  /**
+   * The label for the `input` element.
+   */
+  label: string;
+  /**
+   * The label for the `input` element if the it's not optional
+   */
+  optionalLabel?: string;
+  /**
+   * The short hint displayed in the `input` before the user enters a value.
+   */
+  placeholder?: string;
+  renderFieldComponent: ({
+    ariaDescribedBy,
+    id,
+  }: {
+    ariaDescribedBy?: string;
+    id: string;
+  }) => ReactElement;
+};
+
+const Field = ({
+  errorMessage,
+  hasVisibleLabel,
+  hint,
+  id: idOverride,
+  isDisabled = false,
+  isRequired = true,
+  label,
+  optionalLabel,
+  renderFieldComponent,
+}: FieldProps) => {
+  const id = useUniqueId(idOverride);
+  const hintId = hint ? `${id}-hint` : undefined;
+  const errorId = errorMessage ? `${id}-error` : undefined;
+  const labelId = `${id}-label`;
+
+  const ariaDescribedBy = useMemo(
+    () => [hintId, errorId].join(" ").trim() || undefined,
+    [errorId, hintId]
+  );
+
+  return (
+    <FormControl disabled={isDisabled} error={Boolean(errorMessage)}>
+      <FieldLabel
+        hasVisibleLabel={hasVisibleLabel}
+        id={labelId}
+        inputId={id}
+        isRequired={isRequired}
+        optionalText={optionalLabel}
+        text={label}
+      />
+
+      {hint && <FieldHint id={hintId} text={hint} />}
+
+      {renderFieldComponent({
+        ariaDescribedBy,
+        id,
+      })}
+
+      {errorMessage && <FieldError id={errorId} text={errorMessage} />}
+    </FormControl>
+  );
+};
+
+const MemoizedField = memo(Field);
+
+export { MemoizedField as Field };

package/src/FieldError.tsx

@@ -0,0 +1,34 @@
+/*!
+ * Copyright (c) 2023-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 { FormHelperText } from ".";
+import { ScreenReaderText } from "./ScreenReaderText";
+
+export type FieldErrorProps = {
+  id?: string;
+  text: string;
+};
+
+const FieldError = ({ id, text }: FieldErrorProps) => {
+  return (
+    <FormHelperText error id={id}>
+      <ScreenReaderText>Error:</ScreenReaderText>
+      {text}
+    </FormHelperText>
+  );
+};
+
+const MemoizedFieldError = memo(FieldError);
+
+export { MemoizedFieldError as FieldError };

package/src/FieldHint.tsx

@@ -0,0 +1,28 @@
+/*!
+ * Copyright (c) 2023-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 { FormHelperText } from "./";
+
+export type FieldHintProps = {
+  id?: string;
+  text: string;
+};
+
+const FieldHint = ({ id, text }: FieldHintProps) => {
+  return <FormHelperText id={id}>{text}</FormHelperText>;
+};
+
+const MemoizedFieldHint = memo(FieldHint);
+
+export { MemoizedFieldHint as FieldHint };

package/src/FieldLabel.tsx

@@ -0,0 +1,57 @@
+/*!
+ * Copyright (c) 2023-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 { InputLabel } from "@mui/material";
+import { memo, useMemo } from "react";
+
+import { ScreenReaderText } from "./ScreenReaderText";
+import { Typography } from ".";
+
+export type FieldLabelProps = {
+  hasVisibleLabel: boolean;
+  id: string;
+  inputId: string;
+  isRequired: boolean;
+  optionalText?: string;
+  text: string;
+};
+
+const FieldLabel = ({
+  hasVisibleLabel,
+  id,
+  inputId,
+  isRequired,
+  optionalText,
+  text,
+}: FieldLabelProps) => {
+  const inputLabel = useMemo(
+    () => (
+      <InputLabel htmlFor={inputId} id={id}>
+        {text}
+        {!isRequired && (
+          <Typography variant="subtitle1">{optionalText}</Typography>
+        )}
+      </InputLabel>
+    ),
+    [id, inputId, isRequired, optionalText, text]
+  );
+
+  return hasVisibleLabel ? (
+    inputLabel
+  ) : (
+    <ScreenReaderText>{inputLabel}</ScreenReaderText>
+  );
+};
+
+const MemoizedFieldLabel = memo(FieldLabel);
+
+export { MemoizedFieldLabel as FieldLabel };

package/src/Infobox.tsx

@@ -12,7 +12,7 @@
 
 import { AlertColor } from "@mui/material";
 import { memo, ReactNode } from "react";
-import { Alert, AlertTitle, visuallyHidden } from ".";
+import { Alert, AlertTitle, ScreenReaderText } from ".";
 
 export interface InfoboxProps {
   /**
@@ -37,7 +37,7 @@ export interface InfoboxProps {
 
 const Infobox = ({ children, severity, role, title }: InfoboxProps) => (
   <Alert role={role} severity={severity} variant="infobox">
-    <span style={visuallyHidden}>{severity}: </span>
+    <ScreenReaderText>{severity}: </ScreenReaderText>
     {title && <AlertTitle>{title}</AlertTitle>}
     {children}
   </Alert>

package/src/MenuButton.tsx

@@ -77,10 +77,9 @@ const MenuButton = ({
         aria-haspopup="true"
         aria-expanded={open ? "true" : undefined}
         onClick={handleClick}
+        text={buttonLabel}
         variant={buttonVariant}
-      >
-        {buttonLabel}
-      </Button>
+      />
       <Menu
         id={`${uniqueId}-menu`}
         anchorEl={anchorEl}

package/src/MenuItem.tsx

@@ -45,6 +45,5 @@ const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
 );
 
 const MemoizedMenuItem = memo(MenuItem);
-MemoizedMenuItem.displayName = "MenuItem";
 
 export { MemoizedMenuItem as MenuItem };

package/src/OdysseyCacheProvider.test.tsx

@@ -29,7 +29,7 @@ describe("OdysseyCacheProvider", () => {
   it("themes a Button", () => {
     render(
       <OdysseyCacheProvider>
-        <Button>text</Button>
+        <Button text="text" />
       </OdysseyCacheProvider>
     );