@okta/odyssey-react-mui 0.20.0 → 0.21.1

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "0.20.0",
+  "version": "0.21.1",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
   "sideEffects": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/src/index.d.ts",
   "exports": {
     ".": {
-      "default": "./dist/index.js"
+      "default": "./dist/index.js",
+      "types": "./dist/src/index.d.ts"
     }
   },
   "repository": {
@@ -24,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.20.0"
+    "@okta/odyssey-design-tokens": "0.21.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -32,5 +33,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "382b19347c2f403f081d4e6a5efcee732c81aacc"
+  "gitHead": "721bec01e965f923e751749922e1073f63066783"
 }

package/src/Checkbox.tsx

@@ -0,0 +1,62 @@
+/*!
+ * 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 { Checkbox as MuiCheckbox } from "@mui/material";
+import { ChangeEventHandler, memo } from "react";
+
+import { FormControlLabel } from ".";
+
+export type CheckboxProps = {
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
+  isChecked?: boolean;
+  isDefaultChecked?: boolean;
+  isDisabled?: boolean;
+  hasError?: boolean;
+  isIndeterminate?: boolean;
+  label?: string;
+  name?: string;
+  onChange?: ChangeEventHandler<EventTarget>;
+  value?: string;
+};
+
+const Checkbox = ({
+  ariaLabel,
+  ariaLabelledBy,
+  isChecked,
+  isDefaultChecked,
+  isDisabled,
+  isIndeterminate,
+  hasError,
+  label,
+  name,
+  onChange,
+  value,
+}: CheckboxProps) => (
+  <FormControlLabel
+    aria-label={ariaLabel}
+    aria-labelledby={ariaLabelledBy}
+    checked={isChecked}
+    className={hasError ? "Mui-error" : ""}
+    control={<MuiCheckbox indeterminate={isIndeterminate} />}
+    defaultChecked={isDefaultChecked}
+    disabled={isDisabled}
+    label={label}
+    name={name}
+    onChange={onChange}
+    value={value}
+  />
+);
+
+const MemoizedCheckbox = memo(Checkbox);
+
+export { MemoizedCheckbox as Checkbox };

package/src/CheckboxGroup.tsx

@@ -0,0 +1,73 @@
+/*!
+ * 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 {
+  Checkbox,
+  FormControl,
+  FormGroup,
+  FormHelperText,
+  FormLabel,
+  visuallyHidden,
+} from ".";
+
+export type CheckboxGroupProps = {
+  children:
+    | ReactElement<typeof Checkbox>
+    | Array<ReactElement<typeof Checkbox>>;
+  errorMessage?: string;
+  hint?: string;
+  isDisabled?: boolean;
+  label?: string;
+  name?: string;
+};
+
+const CheckboxGroup = ({
+  children,
+  isDisabled,
+  errorMessage,
+  hint,
+  label,
+  name,
+}: CheckboxGroupProps) => {
+  const ariaDescribedBy = useMemo(
+    () =>
+      errorMessage || hint
+        ? [hint && `${name}-hint`, errorMessage && `${name}-error`]
+            .filter(Boolean)
+            .join(" ")
+        : undefined,
+    [errorMessage, hint, name]
+  );
+
+  return (
+    <FormControl
+      component="fieldset"
+      disabled={isDisabled}
+      error={Boolean(errorMessage)}
+    >
+      {label && <FormLabel component="legend">{label}</FormLabel>}
+      {hint && <FormHelperText id={`${name}-hint`}>{hint}</FormHelperText>}
+      <FormGroup aria-describedby={ariaDescribedBy}>{children}</FormGroup>
+      {errorMessage && (
+        <FormHelperText id={`${name}-error`} error>
+          <span style={visuallyHidden}>Error:</span> {errorMessage}
+        </FormHelperText>
+      )}
+    </FormControl>
+  );
+};
+
+const MemoizedCheckboxGroup = memo(CheckboxGroup);
+
+export { MemoizedCheckboxGroup as CheckboxGroup };

package/src/OdysseyThemeProvider.tsx

@@ -10,26 +10,22 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import {
-  createTheme,
-  ThemeOptions,
-  ThemeProvider as MuiThemeProvider,
-} from "@mui/material/styles";
-import { deepmerge } from "@mui/utils";
+import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
 import { memo, ReactElement, useMemo } from "react";
 
+import { createTheme, deepmerge, ThemeOptions } from ".";
 import { odysseyTheme } from "./theme";
 
 const OdysseyThemeProvider = ({
   children,
-  customTheme,
+  themeOverride,
 }: {
   children: ReactElement;
-  customTheme?: ThemeOptions;
+  themeOverride?: ThemeOptions;
 }) => {
   const customOdysseyTheme = useMemo(
-    () => customTheme && createTheme(deepmerge(odysseyTheme, customTheme)),
-    [customTheme]
+    () => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)),
+    [themeOverride]
   );
 
   return (

package/src/Radio.tsx

@@ -10,17 +10,40 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { FormControlLabel } from "./";
 import { Radio as MuiRadio } from "@mui/material";
 import { memo } from "react";
 
+import { FormControlLabel } from ".";
+
 export type RadioProps = {
+  isChecked?: boolean;
+  isDefaultChecked?: boolean;
+  isDisabled?: boolean;
+  hasError?: boolean;
   label: string;
+  name?: string;
   value: string;
 };
 
-const Radio = ({ label, value }: RadioProps) => (
-  <FormControlLabel control={<MuiRadio />} label={label} value={value} />
+const Radio = ({
+  isChecked,
+  isDefaultChecked,
+  isDisabled,
+  hasError,
+  label,
+  name,
+  value,
+}: RadioProps) => (
+  <FormControlLabel
+    checked={isChecked}
+    className={hasError ? "Mui-error" : ""}
+    control={<MuiRadio />}
+    defaultChecked={isDefaultChecked}
+    disabled={isDisabled}
+    label={label}
+    name={name}
+    value={value}
+  />
 );
 
 const MemoizedRadio = memo(Radio);

package/src/RadioGroup.tsx

@@ -10,6 +10,9 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { RadioGroup as MuiRadioGroup } from "@mui/material";
+import { ChangeEventHandler, memo, ReactElement, useMemo } from "react";
+
 import {
   FormControl,
   FormLabel,
@@ -17,9 +20,8 @@ import {
   visuallyHidden,
   Radio,
   useUniqueId,
-} from "./";
-import { RadioGroup as MuiRadioGroup } from "@mui/material";
-import { memo, ReactElement, useMemo } from "react";
+  RadioProps,
+} from ".";
 
 export interface RadioGroupProps {
   /**
@@ -47,10 +49,17 @@ export interface RadioGroupProps {
    */
   label: string;
   /**
-   * The name of the radio group, which only needs to be changed
-   * if there are multiple radio groups on the same screen
+   * The name of the radio group, which only needs to be changed if there are multiple radio groups on the same screen
    */
   name?: string;
+  /**
+   * Listen for changes in the browser that change `value`.
+   */
+  onChange?: ChangeEventHandler<EventTarget>;
+  /**
+   * The `value` on the selected radio button.
+   */
+  value?: RadioProps["value"];
 }
 
 const RadioGroup = ({
@@ -61,6 +70,7 @@ const RadioGroup = ({
   isDisabled,
   label,
   name,
+  onChange,
 }: RadioGroupProps) => {
   const ariaDescribedBy = useMemo(
     () =>
@@ -88,6 +98,7 @@ const RadioGroup = ({
         aria-describedby={ariaDescribedBy}
         defaultValue={defaultValue}
         name={uniqueName}
+        onChange={onChange}
       >
         {children}
       </MuiRadioGroup>

package/src/TextField.tsx

@@ -10,6 +10,12 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import {
+  InputAdornment,
+  InputBase,
+  InputBaseProps,
+  InputLabel,
+} from "@mui/material";
 import {
   ChangeEventHandler,
   FocusEventHandler,
@@ -22,19 +28,17 @@ import {
   useMemo,
   useState,
 } from "react";
+
 import {
   EyeIcon,
   EyeOffIcon,
   FormControl,
   FormHelperText,
   IconButton,
-  InputAdornment,
-  InputBase,
-  InputLabel,
   SearchIcon,
   Typography,
-  visuallyHidden,
   useUniqueId,
+  visuallyHidden,
 } from "./";
 
 export type TextFieldProps = {
@@ -44,10 +48,6 @@ export type TextFieldProps = {
    * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
    */
   autoCompleteType?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
-  /**
-   * If `true`, the component is disabled.
-   */
-  isDisabled?: boolean;
   /**
    * End `InputAdornment` for this component.
    */
@@ -65,13 +65,33 @@ export type TextFieldProps = {
    */
   id?: string;
   /**
-   * The label for the `input` element.
+   * Props that go onto the HTML `input` element.
    */
-  label?: string;
+  inputProps?: InputBaseProps["inputProps"];
+  /**
+   * If `true`, the component is disabled.
+   */
+  isDisabled?: boolean;
   /**
    * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
    */
   isMultiline?: boolean;
+  /**
+   * It prevents the user from changing the value of the field
+   */
+  isReadOnly?: boolean;
+  /**
+   * If `true`, the `input` element is required.
+   */
+  isRequired?: boolean;
+  /**
+   * The label for the `input` element.
+   */
+  label?: string;
+  /**
+   * Callback fired when the `input` element loses focus.
+   */
+  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   /**
    * Callback fired when the value is changed.
    */
@@ -88,14 +108,6 @@ export type TextFieldProps = {
    * The short hint displayed in the `input` before the user enters a value.
    */
   placeholder?: string;
-  /**
-   * It prevents the user from changing the value of the field
-   */
-  isReadOnly?: boolean;
-  /**
-   * If `true`, the `input` element is required.
-   */
-  isRequired?: boolean;
   /**
    * Start `InputAdornment` for this component.
    */
@@ -110,110 +122,117 @@ export type TextFieldProps = {
   value?: unknown;
 };
 
-const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
-  const {
-    autoCompleteType,
-    isDisabled = false,
-    endAdornment,
-    errorMessage,
-    hint,
-    id: idOverride,
-    label,
-    isMultiline = false,
-    onChange,
-    onFocus,
-    optionalLabel,
-    placeholder,
-    isReadOnly,
-    isRequired = true,
-    startAdornment,
-    type = "text",
-    value,
-  } = props;
+const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+  (
+    {
+      autoCompleteType,
+      endAdornment,
+      errorMessage,
+      hint,
+      id: idOverride,
+      inputProps = {},
+      isDisabled = false,
+      isMultiline = false,
+      isReadOnly,
+      isRequired = true,
+      label,
+      onChange,
+      onFocus,
+      onBlur,
+      optionalLabel,
+      placeholder,
+      startAdornment,
+      type = "text",
+      value,
+    },
+    ref
+  ) => {
+    const [inputType, setInputType] = useState(type);
 
-  const [inputType, setInputType] = useState(type);
+    useEffect(() => {
+      setInputType(type);
+    }, [type]);
 
-  useEffect(() => {
-    setInputType(type);
-  }, [type]);
+    const togglePasswordVisibility = useCallback(() => {
+      setInputType((currentType) =>
+        currentType === "password" ? "text" : "password"
+      );
+    }, []);
 
-  const togglePasswordVisibility = useCallback(() => {
-    setInputType((currentType) =>
-      currentType === "password" ? "text" : "password"
-    );
-  }, []);
+    const id = useUniqueId(idOverride);
+    const hintId = hint ? `${id}-hint` : undefined;
+    const errorId = errorMessage ? `${id}-error` : undefined;
+    const labelId = label ? `${id}-label` : undefined;
 
-  const id = useUniqueId(idOverride);
-  const hintId = hint ? `${id}-hint` : undefined;
-  const errorId = errorMessage ? `${id}-error` : undefined;
-  const labelId = label ? `${id}-label` : undefined;
+    const localInputProps = useMemo(() => {
+      const ariaDescribedBy =
+        errorId && hintId ? `${hintId} ${errorId}` : errorId || hintId;
 
-  const inputProps = useMemo(
-    () =>
-      errorId || hintId
-        ? {
-            "aria-describedby":
-              errorId && hintId ? `${hintId} ${errorId}` : errorId || hintId,
-          }
-        : undefined,
-    [errorId, hintId]
-  );
+      return {
+        ...inputProps,
+        "aria-describedby":
+          inputProps["aria-describedby"]?.concat(` ${ariaDescribedBy}`) ??
+          ariaDescribedBy,
+      };
+    }, [errorId, hintId, inputProps]);
 
-  return (
-    <FormControl disabled={isDisabled} error={Boolean(errorMessage)}>
-      <InputLabel htmlFor={id} id={labelId}>
-        {label}
-        {!isRequired && (
-          <Typography variant="subtitle1">{optionalLabel}</Typography>
+    return (
+      <FormControl disabled={isDisabled} error={Boolean(errorMessage)}>
+        <InputLabel htmlFor={id} id={labelId}>
+          {label}
+          {!isRequired && (
+            <Typography variant="subtitle1">{optionalLabel}</Typography>
+          )}
+        </InputLabel>
+        {hint && <FormHelperText id={hintId}>{hint}</FormHelperText>}
+        <InputBase
+          autoComplete={autoCompleteType}
+          endAdornment={
+            inputType === "password" ? (
+              <InputAdornment position="end">
+                <IconButton
+                  aria-label="toggle password visibility"
+                  edge="end"
+                  onClick={togglePasswordVisibility}
+                >
+                  {inputType === "password" ? <EyeIcon /> : <EyeOffIcon />}
+                </IconButton>
+              </InputAdornment>
+            ) : (
+              endAdornment
+            )
+          }
+          id={id}
+          inputProps={localInputProps}
+          multiline={isMultiline}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          placeholder={placeholder}
+          readOnly={isReadOnly}
+          ref={ref}
+          startAdornment={
+            inputType === "search" ? (
+              <InputAdornment position="start">
+                <SearchIcon />
+              </InputAdornment>
+            ) : (
+              startAdornment
+            )
+          }
+          type={inputType}
+          value={value}
+        />
+        {errorMessage && (
+          <FormHelperText error id={errorId}>
+            <span style={visuallyHidden}>Error:</span>
+            {errorMessage}
+          </FormHelperText>
         )}
-      </InputLabel>
-      {hint && <FormHelperText id={hintId}>{hint}</FormHelperText>}
-      <InputBase
-        autoComplete={autoCompleteType}
-        endAdornment={
-          inputType === "password" ? (
-            <InputAdornment position="end">
-              <IconButton
-                aria-label="toggle password visibility"
-                edge="end"
-                onClick={togglePasswordVisibility}
-              >
-                {inputType === "password" ? <EyeIcon /> : <EyeOffIcon />}
-              </IconButton>
-            </InputAdornment>
-          ) : (
-            endAdornment
-          )
-        }
-        id={id}
-        inputProps={inputProps}
-        multiline={isMultiline}
-        onChange={onChange}
-        onFocus={onFocus}
-        placeholder={placeholder}
-        readOnly={isReadOnly}
-        ref={ref}
-        startAdornment={
-          inputType === "search" ? (
-            <InputAdornment position="start">
-              <SearchIcon />
-            </InputAdornment>
-          ) : (
-            startAdornment
-          )
-        }
-        type={inputType}
-        value={value}
-      />
-      {errorMessage && (
-        <FormHelperText error id={errorId}>
-          <span style={visuallyHidden}>Error:</span>
-          {errorMessage}
-        </FormHelperText>
-      )}
-    </FormControl>
-  );
-});
+      </FormControl>
+    );
+  }
+);
 
 const MemoizedTextField = memo(TextField);
 

package/src/index.ts

@@ -15,9 +15,9 @@ export {
   AlertTitle,
   Box,
   Button,
-  Checkbox,
   Chip,
   CircularProgress,
+  createTheme,
   CssBaseline,
   Dialog,
   DialogActions,
@@ -31,8 +31,11 @@ export {
   FormHelperText,
   FormLabel,
   IconButton,
+  /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextField`. */
   InputAdornment,
+  /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextField`. */
   InputBase,
+  /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextField`. */
   InputLabel,
   List,
   ListItem,
@@ -58,7 +61,6 @@ export {
   ThemeProvider as MuiThemeProvider,
   Tooltip,
   Typography,
-  useTheme,
 } from "@mui/material";
 
 export type {
@@ -66,7 +68,6 @@ export type {
   AlertTitleProps,
   BoxProps,
   ButtonProps,
-  CheckboxProps,
   ChipProps,
   CircularProgressProps,
   CssBaselineProps,
@@ -82,8 +83,11 @@ export type {
   FormHelperTextProps,
   FormLabelProps,
   IconButtonProps,
+  /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextFieldProps`. */
   InputAdornmentProps,
+  /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextFieldProps`. */
   InputBaseProps,
+  /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextFieldProps`. */
   InputLabelProps,
   ListProps,
   ListItemProps,
@@ -110,7 +114,6 @@ export type {
   ThemeOptions,
   TooltipProps,
   TypographyProps,
-  useThemeProps,
 } from "@mui/material";
 
 export { TabContext, TabList, TabPanel } from "@mui/lab";
@@ -119,9 +122,11 @@ export type { TabContextProps, TabListProps, TabPanelProps } from "@mui/lab";
 
 export { default as FavoriteIcon } from "@mui/icons-material/Favorite";
 
-export { visuallyHidden } from "@mui/utils";
+export { deepmerge, visuallyHidden } from "@mui/utils";
 
 export * from "./Banner";
+export * from "./Checkbox";
+export * from "./CheckboxGroup";
 export * from "./createUniqueId";
 export * from "./Icon";
 export * from "./iconDictionary";