@okta/odyssey-react-mui 1.28.1 → 1.32.0

package/src/index.ts

@@ -54,64 +54,65 @@ export type {
   ThemeOptions,
 } from "@mui/material";
 
-export { odysseyTranslate } from "./i18n";
-export type { FocusHandle } from "./inputUtils";
-export { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
+export { odysseyTranslate } from "./i18n.js";
+export type { FocusHandle } from "./inputUtils.js";
+export { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
 
-export * from "./Accordion";
-export * from "./Autocomplete";
-export { badgeContentMaxValues } from "./Badge";
-export * from "./Banner";
-export * from "./Box";
-export * from "./Breadcrumbs";
-export * from "./Buttons";
-export * from "./Callout";
-export * from "./Card";
-export * from "./Checkbox";
-export * from "./CheckboxGroup";
-export * from "./CircularProgress";
-export * from "./createUniqueId";
-export * from "./CssBaseline";
-export * from "./DataTable";
-export * from "./Dialog";
-export * from "./Drawer";
-export * from "./EmptyState";
-export * from "./FieldComponentProps";
-export * from "./Fieldset";
+export * from "./Accordion.js";
+export * from "./Autocomplete.js";
+export { badgeContentMaxValues } from "./Badge.js";
+export * from "./Banner.js";
+export * from "./Box.js";
+export * from "./Breadcrumbs.js";
+export * from "./Buttons/index.js";
+export * from "./Callout.js";
+export * from "./Card.js";
+export * from "./Checkbox.js";
+export * from "./CheckboxGroup.js";
+export * from "./CircularProgress.js";
+export * from "./createUniqueId.js";
+export * from "./CssBaseline.js";
+export * from "./DataTable/index.js";
+export { DatePicker, type DatePickerProps } from "./DatePickers/index.js";
+export * from "./Dialog.js";
+export * from "./Drawer.js";
+export * from "./EmptyState.js";
+export * from "./FieldComponentProps.js";
+export * from "./Fieldset.js";
 export {
   FileUploader,
   fileUploadTypes,
   fileUploadVariants,
-} from "./FileUploader";
-export * from "./Form";
-export * from "./HintLink";
-export * from "./IconWithTooltip";
-export * from "./Link";
-export * from "./NativeSelect";
-export * from "./NullElement";
-export * from "./OdysseyCacheProvider";
-export * from "./OdysseyProvider";
-export * from "./OdysseyThemeProvider";
-export * from "./OdysseyTranslationProvider";
-export * from "./Pagination";
-export * from "./PasswordField";
-export * from "./Radio";
-export * from "./RadioGroup";
-export * from "./ScreenReaderText";
-export * from "./SearchField";
-export * from "./Select";
-export * from "./Stack";
-export * from "./Status";
-export * from "./Surface";
-export * from "./Switch";
-export * from "./Tabs";
-export * from "./Tag";
-export * from "./TagList";
-export * from "./TextField";
-export * from "./theme";
-export * from "./Toast";
-export * from "./ToastStack";
-export * from "./Tooltip";
-export * from "./Typography";
-export * from "./useUniqueId";
-export * from "./web-component";
+} from "./FileUploader/index.js";
+export * from "./Form.js";
+export * from "./HintLink.js";
+export * from "./IconWithTooltip.js";
+export * from "./Link.js";
+export * from "./NativeSelect.js";
+export * from "./NullElement.js";
+export * from "./OdysseyCacheProvider.js";
+export * from "./OdysseyProvider.js";
+export * from "./OdysseyThemeProvider.js";
+export * from "./OdysseyTranslationProvider.js";
+export * from "./Pagination/index.js";
+export * from "./PasswordField.js";
+export * from "./Radio.js";
+export * from "./RadioGroup.js";
+export * from "./ScreenReaderText.js";
+export * from "./SearchField.js";
+export * from "./Select.js";
+export * from "./shadow-dom/index.js";
+export * from "./Stack.js";
+export * from "./Status.js";
+export * from "./Surface.js";
+export * from "./Switch.js";
+export * from "./Tabs.js";
+export * from "./Tag.js";
+export * from "./TagList.js";
+export * from "./TextField.js";
+export * from "./theme/index.js";
+export * from "./Toast.js";
+export * from "./ToastStack.js";
+export * from "./Tooltip.js";
+export * from "./Typography.js";
+export * from "./useUniqueId.js";

package/src/labs/AppTile.tsx

@@ -25,13 +25,13 @@ import {
 } from "@mui/material";
 import styled from "@emotion/styled";
 
-import { Button } from "../Buttons";
+import { Button } from "../Buttons/index.js";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
-} from ".././OdysseyDesignTokensContext";
-import { Heading5, Paragraph, Subordinate } from ".././Typography";
-import { Box } from ".././Box";
+} from ".././OdysseyDesignTokensContext.js";
+import { Heading5, Paragraph, Subordinate } from ".././Typography.js";
+import { Box } from ".././Box.js";
 
 export const APP_TILE_COMPACT_IMAGE_HEIGHT = "2.85714286rem"; // 40px
 export const APP_TILE_IMAGE_HEIGHT = "4.57142857rem"; // 64px
@@ -92,7 +92,7 @@ type LoadingTileProps = {
   variant: AppTileProps["variant"];
 };
 
-const ImageContainer = styled("div", {
+const ImageContainerStyles = styled("div", {
   shouldForwardProp: (prop) =>
     prop !== "odysseyDesignTokens" && prop !== "variant",
 })<{
@@ -121,7 +121,7 @@ const ImageContainer = styled("div", {
   },
 }));
 
-const ActionContainer = styled("div", {
+const ActionContainerStyles = styled("div", {
   shouldForwardProp: (prop) =>
     prop !== "odysseyDesignTokens" && prop !== "variant",
 })<{ odysseyDesignTokens: DesignTokens; variant: AppTileProps["variant"] }>(
@@ -141,7 +141,7 @@ const ActionContainer = styled("div", {
   }),
 );
 
-const ContentContainer = styled("div", {
+const ContentContainerStyles = styled("div", {
   shouldForwardProp: (prop) =>
     prop !== "odysseyDesignTokens" &&
     prop !== "hasTopSection" &&
@@ -168,7 +168,7 @@ const ContentContainer = styled("div", {
   },
 }));
 
-const ChildrenContainer = styled("div", {
+const ChildrenContainerStyles = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
   ["&:not(:first-child)"]: {
@@ -176,7 +176,7 @@ const ChildrenContainer = styled("div", {
   },
 }));
 
-const StyledMuiCard = styled(MuiCard, {
+const StyledMuiCardStyles = styled(MuiCard, {
   shouldForwardProp: (prop) =>
     prop !== "odysseyDesignTokens" &&
     prop !== "isPlaceholder" &&
@@ -219,7 +219,7 @@ const StyledMuiCard = styled(MuiCard, {
   },
 }));
 
-const StyledMuiCardActionArea = styled(MuiCardActionArea, {
+const StyledMuiCardActionAreaStyles = styled(MuiCardActionArea, {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
   margin: `-${odysseyDesignTokens.Spacing4}`,
@@ -237,29 +237,29 @@ const LoadingTile = ({
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
   return (
-    <StyledMuiCard
+    <StyledMuiCardStyles
       odysseyDesignTokens={odysseyDesignTokens}
       isPlaceholder
       isCompact={variant === "compact"}
     >
-      <ContentContainer
+      <ContentContainerStyles
         odysseyDesignTokens={odysseyDesignTokens}
         hasTopSection={hasTopSection}
         variant={variant}
       >
         {hasTopSection && (
-          <ActionContainer
+          <ActionContainerStyles
             odysseyDesignTokens={odysseyDesignTokens}
             variant={variant}
           >
             <Subordinate>
               {variant !== "compact" && <MuiSkeleton width={50} />}
             </Subordinate>
-          </ActionContainer>
+          </ActionContainerStyles>
         )}
         <Box sx={{ width: "100%" }}>
           {image && (
-            <ImageContainer
+            <ImageContainerStyles
               odysseyDesignTokens={odysseyDesignTokens}
               variant={variant}
             >
@@ -276,7 +276,7 @@ const LoadingTile = ({
                 }
                 variant="rectangular"
               />
-            </ImageContainer>
+            </ImageContainerStyles>
           )}
 
           {title && (
@@ -290,17 +290,17 @@ const LoadingTile = ({
             </Paragraph>
           )}
           {children && (
-            <ChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>
+            <ChildrenContainerStyles odysseyDesignTokens={odysseyDesignTokens}>
               <MuiSkeleton
                 variant="rounded"
                 width="100%"
                 height={odysseyDesignTokens.Spacing6}
               />
-            </ChildrenContainer>
+            </ChildrenContainerStyles>
           )}
         </Box>
-      </ContentContainer>
-    </StyledMuiCard>
+      </ContentContainerStyles>
+    </StyledMuiCardStyles>
   );
 };
 
@@ -324,39 +324,42 @@ const AppTile = ({
 
   const tileContent = useMemo(
     () => (
-      <ContentContainer
+      <ContentContainerStyles
         odysseyDesignTokens={odysseyDesignTokens}
-        hasTopSection={typeof onActionClick === "function" || !!auxiliaryText}
+        hasTopSection={
+          typeof onActionClick === "function" || Boolean(auxiliaryText)
+        }
         variant={variant}
       >
         {image && (
-          <ImageContainer
+          <ImageContainerStyles
             odysseyDesignTokens={odysseyDesignTokens}
             variant={variant}
           >
             {image}
-          </ImageContainer>
+          </ImageContainerStyles>
         )}
 
         {title && <Heading5 component="div">{title}</Heading5>}
         {description && variant !== "compact" && (
           <Paragraph color="textSecondary">{description}</Paragraph>
         )}
+
         {children && (
-          <ChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>
+          <ChildrenContainerStyles odysseyDesignTokens={odysseyDesignTokens}>
             {children}
-          </ChildrenContainer>
+          </ChildrenContainerStyles>
         )}
-      </ContentContainer>
+      </ContentContainerStyles>
     ),
     [
-      image,
       auxiliaryText,
-      onActionClick,
+      children,
+      description,
+      image,
       odysseyDesignTokens,
+      onActionClick,
       title,
-      description,
-      children,
       variant,
     ],
   );
@@ -367,22 +370,25 @@ const AppTile = ({
       title={Boolean(title)}
       description={Boolean(description)}
       children={Boolean(children)}
-      hasTopSection={typeof onActionClick === "function" || !!auxiliaryText}
+      hasTopSection={
+        typeof onActionClick === "function" || Boolean(auxiliaryText)
+      }
       variant={variant}
     />
   ) : (
-    <StyledMuiCard
+    <StyledMuiCardStyles
       odysseyDesignTokens={odysseyDesignTokens}
       isCompact={variant === "compact"}
     >
       {(onActionClick || auxiliaryText) && (
-        <ActionContainer
+        <ActionContainerStyles
           odysseyDesignTokens={odysseyDesignTokens}
           variant={variant}
         >
           {auxiliaryText && !isLoading && (
             <Subordinate>{auxiliaryText}</Subordinate>
           )}
+
           {onActionClick && !isLoading && (
             <Button
               endIcon={actionIcon}
@@ -396,16 +402,16 @@ const AppTile = ({
               onClick={onActionClick}
             />
           )}
-        </ActionContainer>
+        </ActionContainerStyles>
       )}
 
-      <StyledMuiCardActionArea
+      <StyledMuiCardActionAreaStyles
         odysseyDesignTokens={odysseyDesignTokens}
         onClick={onClick}
       >
         {tileContent}
-      </StyledMuiCardActionArea>
-    </StyledMuiCard>
+      </StyledMuiCardActionAreaStyles>
+    </StyledMuiCardStyles>
   );
 };
 

package/src/labs/DataFilters.tsx

@@ -31,32 +31,32 @@ import {
 import { MRT_ColumnDef, MRT_RowData } from "material-react-table";
 import styled from "@emotion/styled";
 
-import { Autocomplete } from "../Autocomplete";
-import { Box } from "../Box";
-import { Button } from "../Buttons";
-import { CheckboxGroup } from "../CheckboxGroup";
-import { Checkbox } from "../Checkbox";
+import { Autocomplete } from "../Autocomplete.js";
+import { Box } from "../Box.js";
+import { Button } from "../Buttons/index.js";
+import { CheckboxGroup } from "../CheckboxGroup.js";
+import { Checkbox } from "../Checkbox.js";
 import {
   CheckIcon,
   ChevronRightIcon,
   CloseCircleFilledIcon,
   FilterIcon,
-} from "../icons.generated";
+} from "../icons.generated/index.js";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
-} from "../OdysseyDesignTokensContext";
-import { RadioGroup } from "../RadioGroup";
-import { Radio } from "../Radio";
-import { SearchField } from "../SearchField";
-import { Tag } from "../Tag";
-import { TagList } from "../TagList";
-import { TextField } from "../TextField";
-import { Subordinate } from "../Typography";
+} from "../OdysseyDesignTokensContext.js";
+import { RadioGroup } from "../RadioGroup.js";
+import { Radio } from "../Radio.js";
+import { SearchField } from "../SearchField.js";
+import { Tag } from "../Tag.js";
+import { TagList } from "../TagList.js";
+import { TextField } from "../TextField.js";
+import { Subordinate } from "../Typography.js";
 
 const AutocompleteOuterContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
   display: "flex",
   alignItems: "flex-end",
   gap: odysseyDesignTokens.Spacing2,
@@ -433,9 +433,9 @@ const DataFilters = ({
       <>
         <Box>
           <Button
-            aria-controls={isFiltersMenuOpen ? "filters-menu" : undefined}
-            aria-expanded={isFiltersMenuOpen ? "true" : undefined}
-            aria-haspopup="true"
+            ariaControls={isFiltersMenuOpen ? "filters-menu" : undefined}
+            ariaExpanded={isFiltersMenuOpen ? "true" : undefined}
+            ariaHasPopup="true"
             ariaLabel={t("filters.filters.arialabel")}
             isDisabled={isDisabled}
             endIcon={<FilterIcon />}
@@ -469,6 +469,7 @@ const DataFilters = ({
             return (
               <MuiMenuItem
                 key={filter.id}
+                aria-controls={isFilterPopoverOpen ? "filter-form" : undefined}
                 onClick={(event) => {
                   setIsFilterPopoverOpen(true);
                   setFilterPopoverAnchorElement(event.currentTarget);
@@ -563,6 +564,7 @@ const DataFilters = ({
               {filterMenu}
               {/* Filter popover */}
               <MuiPopover
+                id="filter-form"
                 anchorEl={filterPopoverAnchorElement}
                 // Positions the popover flush with the edge of the parent menu
                 // and at the right shadow elevation. These magic values are simply
@@ -630,6 +632,7 @@ const DataFilters = ({
                                 variant="primary"
                                 endIcon={<CheckIcon />}
                                 type="submit"
+                                ariaLabel={t("filters.submit.label")}
                               />
                             </AutocompleteOuterContainer>
                           )}
@@ -697,6 +700,7 @@ const DataFilters = ({
                               variant="primary"
                               endIcon={<CheckIcon />}
                               type="submit"
+                              ariaLabel={t("filters.submit.label")}
                             />
                           </Box>
                         )}