@okta/odyssey-react-mui 0.21.2 → 0.21.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "0.21.2",
+  "version": "0.21.4",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -10,8 +10,8 @@
   "types": "dist/src/index.d.ts",
   "exports": {
     ".": {
-      "default": "./dist/index.js",
-      "types": "./dist/src/index.d.ts"
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/index.js"
     }
   },
   "repository": {
@@ -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.2"
+    "@okta/odyssey-design-tokens": "0.21.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -33,5 +33,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "294f5141125cf05fe9fc7cbda318bd85a1adafad"
+  "gitHead": "facb0d98d72297e662093673a0e0ee8d7e226be2"
 }

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/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/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/RadioGroup.tsx

@@ -17,8 +17,8 @@ import {
   FormControl,
   FormLabel,
   FormHelperText,
-  visuallyHidden,
   Radio,
+  ScreenReaderText,
   useUniqueId,
   RadioProps,
 } from ".";
@@ -104,7 +104,7 @@ const RadioGroup = ({
       </MuiRadioGroup>
       {errorMessage && (
         <FormHelperText id={`${uniqueName}-error`} error>
-          <span style={visuallyHidden}>Error:</span> {errorMessage}
+          <ScreenReaderText>Error:</ScreenReaderText> {errorMessage}
         </FormHelperText>
       )}
     </FormControl>

package/src/ScreenReaderText.tsx

@@ -0,0 +1,36 @@
+/*!
+ * 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, ReactNode } from "react";
+import { Box, visuallyHidden } from "./";
+
+export type ScreenReaderTextProps = {
+  /**
+   * The visually-hidden text.
+   */
+  children: ReactNode;
+};
+
+/**
+ * MUI sx expects you pass in a CSS object, not an object with CSS.
+ * They seem identical, but only if you create a new object like this will MUI be happy with the type of visuallyHidden.
+ * It's otherwise a regular object with CSS properties.
+ */
+const style = { ...visuallyHidden };
+
+const ScreenReaderText = ({ children }: ScreenReaderTextProps) => (
+  <Box sx={style}>{children}</Box>
+);
+
+const MemoizedScreenReaderText = memo(ScreenReaderText);
+
+export { MemoizedScreenReaderText as ScreenReaderText };

package/src/TextField.tsx

@@ -38,7 +38,7 @@ import {
   SearchIcon,
   Typography,
   useUniqueId,
-  visuallyHidden,
+  ScreenReaderText,
 } from "./";
 
 export type TextFieldProps = {
@@ -232,7 +232,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         />
         {errorMessage && (
           <FormHelperText error id={errorId}>
-            <span style={visuallyHidden}>Error:</span>
+            <ScreenReaderText>Error:</ScreenReaderText>
             {errorMessage}
           </FormHelperText>
         )}

package/src/index.ts

@@ -16,7 +16,6 @@ export {
   Box,
   Button,
   Chip,
-  CircularProgress,
   createTheme,
   CssBaseline,
   Dialog,
@@ -69,7 +68,6 @@ export type {
   BoxProps,
   ButtonProps,
   ChipProps,
-  CircularProgressProps,
   CssBaselineProps,
   DialogProps,
   DialogActionsProps,
@@ -127,6 +125,7 @@ export { deepmerge, visuallyHidden } from "@mui/utils";
 export * from "./Banner";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
+export * from "./CircularProgress";
 export * from "./createUniqueId";
 export * from "./Icon";
 export * from "./iconDictionary";
@@ -139,6 +138,7 @@ export * from "./OdysseyThemeProvider";
 export * from "./PasswordInput";
 export * from "./Radio";
 export * from "./RadioGroup";
+export * from "./ScreenReaderText";
 export * from "./Status";
 export * from "./TextField";
 export * from "./theme";

package/src/theme/components.tsx

@@ -32,10 +32,12 @@ import { tooltipClasses } from "@mui/material/Tooltip";
 import {
   AlertTriangleFilledIcon,
   ArrowDownIcon,
+  CheckIcon,
   CheckCircleFilledIcon,
   ChevronDownIcon,
   CloseCircleFilledIcon,
   InformationCircleFilledIcon,
+  SubtractIcon,
 } from "../iconDictionary";
 
 export const components: ThemeOptions["components"] = {
@@ -362,23 +364,87 @@ export const components: ThemeOptions["components"] = {
   MuiCheckbox: {
     defaultProps: {
       size: "small",
+      icon: <></>,
+      checkedIcon: <CheckIcon />,
+      indeterminateIcon: <SubtractIcon />,
     },
     styleOverrides: {
       root: ({ theme }) => ({
-        borderRadius: "4px",
-        "&:hover": {
+        width: `${theme.typography.ui.lineHeight}em`,
+        height: `${theme.typography.ui.lineHeight}em`,
+        borderRadius: theme.mixins.borderRadius,
+        borderWidth: theme.mixins.borderWidth,
+        borderStyle: theme.mixins.borderStyle,
+        borderColor: theme.palette.grey[500],
+        padding: 0,
+        boxShadow: `0 0 0 0 transparent`,
+        transition: theme.transitions.create(
+          ["border-color", "background-color", "box-shadow"],
+          {
+            duration: theme.transitions.duration.short,
+          }
+        ),
+
+        ".MuiSvgIcon-root": {
+          color: theme.palette.common.white,
+          width: "0.5em",
+          height: "0.5em",
+          transition: theme.transitions.create(["color"], {
+            duration: theme.transitions.duration.short,
+          }),
+        },
+
+        "&.Mui-checked": {
+          backgroundColor: theme.palette.primary.main,
+          borderColor: theme.palette.primary.main,
+
+          ".MuiFormControlLabel-root:hover > &": {
+            backgroundColor: theme.palette.primary.dark,
+            borderColor: theme.palette.primary.dark,
+          },
+        },
+
+        ".MuiFormControlLabel-root:hover > &": {
           backgroundColor: "transparent",
+          borderColor: theme.palette.grey[900],
+        },
+        ".Mui-error:hover > &": {
+          borderColor: theme.palette.error.dark,
+
+          "&.Mui-checked": {
+            backgroundColor: theme.palette.error.dark,
+            borderColor: theme.palette.error.dark,
+          },
         },
-        padding: 0,
         ".Mui-error > &": {
-          color: theme.palette.error.main,
-          "&:hover": {
-            color: theme.palette.error.dark,
+          borderColor: theme.palette.error.main,
+
+          "&.Mui-checked": {
+            backgroundColor: theme.palette.error.main,
+            borderColor: theme.palette.error.main,
+          },
+
+          "&.Mui-focusVisible": {
+            boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`,
           },
         },
-        ".Mui-error > &.Mui-checked": {
-          "&:hover": {
-            color: theme.palette.error.dark,
+        "&.Mui-focusVisible": {
+          borderColor: theme.palette.grey[900],
+          boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.primary.main}`,
+          outline: "2px solid transparent",
+          outlineOffset: "1px",
+        },
+        "&.Mui-disabled": {
+          backgroundColor: theme.palette.grey[50],
+          borderColor: theme.palette.grey[300],
+
+          ".Mui-error > &": {
+            backgroundColor: theme.palette.grey[50],
+            borderColor: theme.palette.grey[300],
+          },
+
+          ".MuiSvgIcon-root": {
+            color: theme.palette.common.black,
           },
         },
       }),
@@ -1086,12 +1152,21 @@ export const components: ThemeOptions["components"] = {
         borderStyle: theme.mixins.borderStyle,
         borderRadius: theme.mixins.borderRadius,
         borderColor: theme.palette.grey[500],
+        boxShadow: `0 0 0 0 transparent`,
+        backgroundColor: theme.palette.common.white,
+        transition: theme.transitions.create(
+          ["border-color", "background-color", "box-shadow"],
+          {
+            duration: theme.transitions.duration.short,
+          }
+        ),
 
         ...(ownerState.fullWidth && {
           width: "100%",
         }),
 
         ...(ownerState.readOnly === true && {
+          borderColor: "transparent",
           backgroundColor: theme.palette.grey[50],
         }),
 
@@ -1365,24 +1440,82 @@ export const components: ThemeOptions["components"] = {
   MuiRadio: {
     defaultProps: {
       size: "small",
+      icon: <></>,
+      checkedIcon: <></>,
     },
     styleOverrides: {
       root: ({ theme }) => ({
-        "&:hover": {
+        width: `${theme.typography.ui.lineHeight}em`,
+        height: `${theme.typography.ui.lineHeight}em`,
+        borderRadius: `${theme.typography.ui.lineHeight}em`,
+        borderWidth: theme.mixins.borderWidth,
+        borderStyle: theme.mixins.borderStyle,
+        borderColor: theme.palette.grey[500],
+        padding: 0,
+        boxShadow: `0 0 0 0 transparent`,
+        transition: theme.transitions.create(
+          ["border-color", "background-color", "box-shadow"],
+          {
+            duration: theme.transitions.duration.short,
+          }
+        ),
+
+        "&::before": {
+          content: "''",
+          position: "absolute",
+          width: "0.5em",
+          height: "0.5em",
+          borderRadius: "50%",
           backgroundColor: "transparent",
+          transition: theme.transitions.create(["background-color"], {
+            duration: theme.transitions.duration.short,
+          }),
+        },
+
+        ".MuiFormControlLabel-root:hover > &": {
+          backgroundColor: "transparent",
+          borderColor: theme.palette.grey[900],
+        },
+        ".Mui-error:hover > &": {
+          backgroundColor: "transparent",
+          borderColor: theme.palette.error.dark,
+          "&::before": {
+            backgroundColor: theme.palette.error.dark,
+          },
         },
-        padding: 0,
         ".Mui-error > &": {
-          color: theme.palette.error.main,
-          "&:hover": {
-            color: theme.palette.error.dark,
+          borderColor: theme.palette.error.main,
+          "&::before": {
+            backgroundColor: theme.palette.error.main,
+          },
+
+          "&.Mui-focusVisible": {
+            boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`,
           },
         },
         "&.Mui-focusVisible": {
-          outlineColor: theme.palette.primary.main,
-          outlineOffset: 0,
-          outlineStyle: "solid",
-          outlineWidth: "2px",
+          borderColor: theme.palette.grey[900],
+          boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.primary.main}`,
+          outline: "2px solid transparent",
+          outlineOffset: "1px",
+        },
+        "&.Mui-checked": {
+          position: "relative",
+
+          "&::before": {
+            backgroundColor: theme.palette.primary.main,
+          },
+        },
+        ".Mui-error > &.Mui-checked::before": {
+          backgroundColor: theme.palette.error.main,
+        },
+        "&.Mui-disabled": {
+          backgroundColor: theme.palette.grey[50],
+          borderColor: theme.palette.grey[300],
+
+          "&::before": {
+            backgroundColor: theme.palette.grey[300],
+          },
         },
       }),
     },

package/src/theme/palette.ts

@@ -80,7 +80,7 @@ export const palette: ThemeOptions["palette"] = {
   text: {
     primary: Tokens.ColorPaletteNeutral900,
     secondary: Tokens.ColorPaletteNeutral600,
-    disabled: Tokens.ColorPaletteNeutral500,
+    disabled: Tokens.ColorPaletteNeutral600,
   },
   divider: Tokens.ColorBorderDisplay,
   background: {