@okta/odyssey-react-mui 0.21.3 → 0.21.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "0.21.3",
+  "version": "0.21.4",
   "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.21.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -33,5 +33,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "06e016c9b7228f30babae07b3b23be04ceaa2f77"
+  "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";