@okta/odyssey-react-mui 1.2.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -51,7 +51,7 @@
     "@mui/system": "^5.14.9",
     "@mui/utils": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "1.2.0",
+    "@okta/odyssey-design-tokens": "1.4.0",
     "date-fns": "^2.30.0",
     "i18next": "^23.5.1",
     "material-react-table": "^1.14.0",
@@ -63,5 +63,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "6dc7afd2fce73ec25b0566b0c59aeedf0738b925"
+  "gitHead": "612e08d4ea3bd4c8acb732df7036bce16f4eda0b"
 }

package/scripts/properties-to-ts.js

@@ -11,7 +11,7 @@
  */
 
 // Part of this has been copied over from @okta/ui-build-tools' own internal node script
-// https://github.com/okta/ui-build-tools/blob/master/packages/clis/i18n/properties-to-json.js
+// https://github.com/okta/ui-build-tools/blob/main/packages/clis/i18n/properties-to-json.js
 
 const { resolve, join, basename, extname } = require("node:path");
 const {

package/src/Autocomplete.tsx

@@ -223,6 +223,9 @@ const Autocomplete = <
   );
 };
 
+// Need the `typeof Autocomplete` because generics don't get passed through
 const MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;
+// @ts-expect-error displayName is expected to not be on `typeof Autocomplete`
+MemoizedAutocomplete.displayName = "Autocomplete";
 
 export { MemoizedAutocomplete as Autocomplete };

package/src/Breadcrumbs.tsx

@@ -0,0 +1,199 @@
+/*!
+ * 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 {
+  ButtonBase,
+  Menu,
+  MenuItem,
+  Breadcrumbs as MuiBreadcrumbs,
+} from "@mui/material";
+import {
+  MouseEventHandler,
+  ReactElement,
+  createContext,
+  memo,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+import { GroupIcon, HomeIcon, UserIcon } from "./icons.generated";
+import { Typography } from "./Typography";
+import { useTranslation } from "react-i18next";
+
+export type BreadcrumbType = "listItem" | "menuItem" | "currentPage";
+
+export type BreadcrumbProps = {
+  children?: string;
+  href: string;
+  iconName?: "user" | "group";
+};
+
+export type BreadcrumbsProps = {
+  children: ReactElement<typeof Breadcrumb>[];
+  homeHref?: string;
+  maxVisibleItems?: number;
+};
+
+export type BreadcrumbContextType = {
+  breadcrumbType: BreadcrumbType;
+};
+
+export const BreadcrumbContext = createContext<BreadcrumbContextType>({
+  breadcrumbType: "listItem",
+});
+
+export const Breadcrumb = ({ children, href, iconName }: BreadcrumbProps) => {
+  const { breadcrumbType } = useContext(BreadcrumbContext);
+
+  const breadcrumbContent = (
+    <>
+      {iconName === "group" ? (
+        <GroupIcon />
+      ) : iconName === "user" ? (
+        <UserIcon />
+      ) : null}
+      {children}
+    </>
+  );
+
+  if (breadcrumbType === "menuItem") {
+    return <MenuItem href={href}>{breadcrumbContent}</MenuItem>;
+  }
+
+  if (breadcrumbType === "currentPage") {
+    return <Typography>{breadcrumbContent}</Typography>;
+  }
+
+  // breadcrumbType === "listItem" is the default
+  // Provided here without a conditional to get TS to be quiet
+  // about potential undefined returns
+  return <ButtonBase href={href}>{breadcrumbContent}</ButtonBase>;
+};
+
+const breadcrumbProviderValue: Record<
+  BreadcrumbType,
+  { breadcrumbType: BreadcrumbType }
+> = {
+  currentPage: {
+    breadcrumbType: "currentPage",
+  },
+  listItem: {
+    breadcrumbType: "listItem",
+  },
+  menuItem: {
+    breadcrumbType: "menuItem",
+  },
+};
+
+const BreadcrumbList = ({
+  children,
+  homeHref,
+  maxVisibleItems: maxVisibleItemsOverride,
+}: BreadcrumbsProps) => {
+  const maxVisibleItems = maxVisibleItemsOverride ?? children.length;
+
+  const { t } = useTranslation();
+
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  const breadcrumbSections = useMemo(() => {
+    if (children.length <= maxVisibleItems) {
+      return {
+        beforeMenu: [],
+        insideMenu: [],
+        remainingBreadcrumbs: children,
+      };
+    } else {
+      const menuStart = Math.floor(maxVisibleItems / 2);
+      const menuLength = children.length - maxVisibleItems;
+
+      return {
+        beforeMenu: children.slice(0, menuStart),
+        insideMenu: children.slice(menuStart, menuStart + menuLength),
+        remainingBreadcrumbs: children.slice(menuStart + menuLength),
+      };
+    }
+  }, [children, maxVisibleItems]);
+
+  const onMenuButtonClick = useCallback<MouseEventHandler<HTMLButtonElement>>(
+    (event) => setAnchorEl(event.currentTarget),
+    []
+  );
+  const onCloseMenu = useCallback(() => {
+    setAnchorEl(null);
+  }, []);
+
+  return (
+    <MuiBreadcrumbs
+      maxItems={children.length + 1}
+      aria-label={t("breadcrumbs.label.text")}
+    >
+      {homeHref && (
+        <ButtonBase href={homeHref} aria-label={t("breadcrumbs.home.text")}>
+          <HomeIcon />
+        </ButtonBase>
+      )}
+
+      {breadcrumbSections.beforeMenu.map((breadcrumb) => (
+        <BreadcrumbContext.Provider value={breadcrumbProviderValue.listItem}>
+          {breadcrumb}
+        </BreadcrumbContext.Provider>
+      ))}
+
+      {breadcrumbSections.insideMenu && (
+        <>
+          <ButtonBase onClick={onMenuButtonClick}>…</ButtonBase>
+          <Menu
+            open={Boolean(anchorEl)}
+            onClose={onCloseMenu}
+            anchorEl={anchorEl}
+            anchorOrigin={{ horizontal: "left", vertical: "bottom" }}
+            MenuListProps={{
+              sx: {
+                minWidth: 180,
+              },
+            }}
+          >
+            <BreadcrumbContext.Provider
+              value={breadcrumbProviderValue.menuItem}
+            >
+              {breadcrumbSections.insideMenu}
+            </BreadcrumbContext.Provider>
+          </Menu>
+        </>
+      )}
+
+      {breadcrumbSections.remainingBreadcrumbs.map((breadcrumb, i) => {
+        if (i === breadcrumbSections.remainingBreadcrumbs.length - 1) {
+          return (
+            <BreadcrumbContext.Provider
+              value={breadcrumbProviderValue.currentPage}
+            >
+              {breadcrumb}
+            </BreadcrumbContext.Provider>
+          );
+        }
+        return (
+          <BreadcrumbContext.Provider value={breadcrumbProviderValue.listItem}>
+            {breadcrumb}
+          </BreadcrumbContext.Provider>
+        );
+      })}
+    </MuiBreadcrumbs>
+  );
+};
+
+const MemoizedBreadcrumbList = memo(BreadcrumbList);
+MemoizedBreadcrumbList.displayName = "BreadcrumbList";
+
+export { MemoizedBreadcrumbList as BreadcrumbList };

package/src/Link.tsx

@@ -14,7 +14,7 @@ import { memo, ReactElement } from "react";
 import { ExternalLinkIcon } from "./icons.generated";
 import type { SeleniumProps } from "./SeleniumProps";
 
-import { Link as MuiLink } from "@mui/material";
+import { Link as MuiLink, LinkProps as MuiLinkProps } from "@mui/material";
 
 export const linkVariantValues = ["default", "monochrome"] as const;
 
@@ -31,6 +31,10 @@ export type LinkProps = {
    * An optional Icon component at the start of the Link
    */
   icon?: ReactElement;
+  /**
+   * The click event handler for the Link
+   */
+  onClick?: MuiLinkProps["onClick"];
   /**
    * The HTML `rel` attribute for the Link
    */
@@ -58,6 +62,7 @@ const Link = ({
   target,
   testId,
   variant,
+  onClick,
 }: LinkProps) => (
   <MuiLink
     data-se={testId}
@@ -65,6 +70,7 @@ const Link = ({
     rel={rel}
     target={target}
     variant={variant}
+    onClick={onClick}
   >
     {icon && <span className="Link-icon">{icon}</span>}
 

package/src/MenuButton.tsx

@@ -50,9 +50,8 @@ export type MenuButtonProps = {
    * The <MenuItem> components within the Menu.
    */
   children: Array<
-    ReactElement<
-      typeof MenuItem | typeof Divider | typeof ListSubheader | NullElement
-    >
+    | ReactElement<typeof MenuItem | typeof Divider | typeof ListSubheader>
+    | NullElement
   >;
   /**
    * The end Icon on the trigggering Button

package/src/Tabs.tsx

@@ -10,7 +10,14 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import React, {
+import {
+  TabContext as MuiTabContext,
+  TabList as MuiTabList,
+  TabListProps as MuiTabListProps,
+  TabPanel as MuiTabPanel,
+} from "@mui/lab";
+import { Tab as MuiTab } from "@mui/material";
+import {
   ReactElement,
   ReactNode,
   memo,
@@ -18,12 +25,6 @@ import React, {
   useEffect,
   useState,
 } from "react";
-import { Tab as MuiTab } from "@mui/material";
-import {
-  TabList as MuiTabList,
-  TabPanel as MuiTabPanel,
-  TabContext as MuiTabContext,
-} from "@mui/lab";
 import { SeleniumProps } from "./SeleniumProps";
 
 export type TabItemProps = {
@@ -67,16 +68,27 @@ export type TabsProps = {
    * Identifier for the selected tab.
    */
   value?: string;
+  /**
+   * Callback fired when the active tab is changed.
+   */
+  onChange?: MuiTabListProps["onChange"];
 };
 
-const Tabs = ({ ariaLabel, initialValue, tabs, value }: TabsProps) => {
+const Tabs = ({
+  ariaLabel,
+  initialValue,
+  tabs,
+  value,
+  onChange: onChangeProp,
+}: TabsProps) => {
   const [tabState, setTabState] = useState(initialValue ?? value ?? "0");
 
-  const onChange = useCallback(
-    (_event: React.SyntheticEvent, newState: string) => {
-      setTabState(newState);
+  const onChange = useCallback<NonNullable<MuiTabListProps["onChange"]>>(
+    (event, value: string) => {
+      setTabState(value);
+      onChangeProp?.(event, value);
     },
-    []
+    [onChangeProp]
   );
 
   useEffect(() => {

package/src/index.ts

@@ -59,6 +59,7 @@ export { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
 export * from "./Autocomplete";
 export * from "./Banner";
 export * from "./Box";
+export * from "./Breadcrumbs";
 export * from "./Button";
 export * from "./Callout";
 export * from "./Checkbox";

package/src/labs/GroupPicker.tsx

@@ -0,0 +1,241 @@
+/*!
+ * 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 type { AutocompleteGetTagProps } from "@mui/material/useAutocomplete";
+
+import {
+  Autocomplete as MuiAutocomplete,
+  Avatar as MuiAvatar,
+  Box,
+  InputBase,
+} from "@mui/material";
+import { avatarClasses } from "@mui/material/Avatar";
+import { memo, useCallback } from "react";
+
+import { AutocompleteProps } from "../Autocomplete";
+import { Field } from "../Field";
+import { Subordinate } from "../Typography";
+import { Tag } from "../Tag";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext";
+import { UserIcon, GridIcon, GroupIcon } from "../icons.generated";
+
+export type GroupPickerOptionType = {
+  appsCount?: number;
+  description: string;
+  groupPushMappingsCount?: number;
+  id: string;
+  logo?: string;
+  name: string;
+  usersCount?: number;
+};
+
+export type GroupPickerProps<
+  GroupPickerOptionType,
+  HasMultipleChoices extends boolean | undefined,
+  IsCustomValueAllowed extends boolean | undefined
+> = AutocompleteProps<
+  GroupPickerOptionType,
+  HasMultipleChoices,
+  IsCustomValueAllowed
+>;
+
+const avatarImageSizeSmall = 16;
+const avatarImageSizeMedium = 24;
+
+const GroupPicker = <
+  OptionType extends GroupPickerOptionType,
+  HasMultipleChoices extends boolean | undefined,
+  IsCustomValueAllowed extends boolean | undefined
+>({
+  hasMultipleChoices,
+  isCustomValueAllowed,
+  isDisabled,
+  isLoading,
+  isOptional = false,
+  isReadOnly,
+  hint,
+  label,
+  onChange,
+  onInputChange,
+  options,
+  value,
+  testId,
+}: GroupPickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const isOptionEqualToValue = useCallback((sourceValue, targetValue) => {
+    return sourceValue.id === targetValue.id;
+  }, []);
+
+  const getOptionLabel = useCallback((option) => {
+    return option.name;
+  }, []);
+
+  const renderOption = useCallback(
+    (props, option) => {
+      return (
+        <li {...props} key={option.id}>
+          <Box
+            sx={{
+              alignItems: "top",
+              display: "flex",
+              flexDirection: "row",
+            }}
+          >
+            <Box sx={{ paddingRight: odysseyDesignTokens.Spacing2 }}>
+              <MuiAvatar
+                alt={option.name}
+                src={option.logo}
+                sx={{
+                  [`.${avatarClasses.fallback}`]: {
+                    visibility: "hidden",
+                  },
+                  background: "transparent",
+                  height: avatarImageSizeMedium,
+                  width: avatarImageSizeMedium,
+                }}
+              />
+            </Box>
+            <Box>
+              {option.name}
+              <Subordinate>{option.description}</Subordinate>
+              <Box
+                sx={{
+                  display: "flex",
+                  flexDirection: "row",
+                  paddingTop: odysseyDesignTokens.Spacing1,
+                }}
+              >
+                {typeof option.usersCount === "number" && (
+                  <Box
+                    sx={{
+                      display: "flex",
+                      flexDirection: "row",
+                      paddingRight: odysseyDesignTokens.Spacing4,
+                    }}
+                  >
+                    <UserIcon />
+                    {option.usersCount}
+                  </Box>
+                )}
+                {typeof option.appsCount === "number" && (
+                  <Box
+                    sx={{
+                      display: "flex",
+                      flexDirection: "row",
+                      paddingRight: odysseyDesignTokens.Spacing4,
+                    }}
+                  >
+                    <GridIcon />
+                    {option.appsCount}
+                  </Box>
+                )}
+                {typeof option.groupPushMappingsCount === "number" && (
+                  <Box sx={{ display: "flex", flexDirection: "row" }}>
+                    <GroupIcon />
+                    {option.groupPushMappingsCount}
+                  </Box>
+                )}
+              </Box>
+            </Box>
+          </Box>
+        </li>
+      );
+    },
+    [odysseyDesignTokens]
+  );
+
+  const renderTags = useCallback(
+    (values: OptionType[], getTagProps: AutocompleteGetTagProps) =>
+      values.map((option, index) => {
+        const { key, onDelete } = getTagProps({ index });
+        return (
+          <Box
+            key={key}
+            sx={{
+              margin: odysseyDesignTokens.Spacing1,
+            }}
+          >
+            <Tag
+              icon={
+                <MuiAvatar
+                  alt={option.name}
+                  src={option.logo}
+                  sx={{
+                    [`.${avatarClasses.fallback}`]: {
+                      visibility: "hidden",
+                    },
+                    background: "transparent",
+                    height: avatarImageSizeSmall,
+                    width: avatarImageSizeSmall,
+                  }}
+                />
+              }
+              label={option.name}
+              onRemove={onDelete}
+            />
+          </Box>
+        );
+      }),
+    [odysseyDesignTokens]
+  );
+
+  const renderInput = useCallback(
+    ({ InputLabelProps, InputProps, ...params }) => (
+      <Field
+        fieldType="single"
+        hasVisibleLabel
+        id={InputLabelProps.htmlFor}
+        hint={hint}
+        label={label}
+        isOptional={isOptional}
+        renderFieldComponent={({ ariaDescribedBy, id }) => (
+          <InputBase
+            {...params}
+            {...InputProps}
+            aria-describedby={ariaDescribedBy}
+            id={id}
+            required={!isOptional}
+          />
+        )}
+      />
+    ),
+    [hint, isOptional, label]
+  );
+
+  return (
+    <MuiAutocomplete
+      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div
+      aria-disabled={isDisabled}
+      data-se={testId}
+      disabled={isDisabled}
+      filterSelectedOptions={true}
+      freeSolo={isCustomValueAllowed}
+      getOptionLabel={getOptionLabel}
+      isOptionEqualToValue={isOptionEqualToValue}
+      loading={isLoading}
+      multiple={hasMultipleChoices}
+      onChange={onChange}
+      onInputChange={onInputChange}
+      options={options}
+      readOnly={isReadOnly}
+      renderInput={renderInput}
+      renderOption={renderOption}
+      renderTags={renderTags}
+      value={value}
+    />
+  );
+};
+
+const MemoizedGroupPicker = memo(GroupPicker) as typeof GroupPicker;
+
+export { MemoizedGroupPicker as GroupPicker };

package/src/labs/README.md

@@ -37,7 +37,7 @@ bundled, and polyfilled for advanced use cases and browser support targets.
 
 ## License
 
-[Apache Version 2.0](https://github.com/okta/odyssey/blob/master/LICENSE)
+[Apache Version 2.0](https://github.com/okta/odyssey/blob/main/LICENSE)
 
 ## Support Disclaimer
 

package/src/labs/index.ts

@@ -22,3 +22,4 @@ export * from "./datePickerTheme";
 export * from "./materialReactTableTypes";
 export * from "./PaginatedTable";
 export * from "./StaticTable";
+export * from "./GroupPicker";

package/src/properties/odyssey-react-mui.properties

@@ -1,3 +1,5 @@
+breadcrumbs.home.text = Home
+breadcrumbs.label.text = Breadcrumbs
 fielderror.screenreader.text = Error
 fieldlabel.optional.text = Optional
 fieldlabel.required.text = Required

package/src/properties/ts/odyssey-react-mui.ts

@@ -1 +1 @@
-export const translation = {"fielderror.screenreader.text":"Error","fieldlabel.optional.text":"Optional","fieldlabel.required.text":"Required","passwordfield.icon.label.show":"Show password","passwordfield.icon.label.hide":"Hide password","severity.error":"error","severity.info":"info","severity.success":"success","severity.warning":"warning","table.error":"Error loading data.","table.fetchedrows.text":"Fetched {{totalRows}} row","table.fetchedrows.text_plural":"Fetched {{totalRows}} total rows","table.rows.text":"{{totalRows}} row","table.rows.text_plural":"{{totalRows}} rows","toast.close.text":"close"};
+export const translation = {"breadcrumbs.home.text":"Home","breadcrumbs.label.text":"Breadcrumbs","fielderror.screenreader.text":"Error","fieldlabel.optional.text":"Optional","fieldlabel.required.text":"Required","passwordfield.icon.label.show":"Show password","passwordfield.icon.label.hide":"Hide password","severity.error":"error","severity.info":"info","severity.success":"success","severity.warning":"warning","table.error":"Error loading data.","table.fetchedrows.text":"Fetched {{totalRows}} row","table.fetchedrows.text_plural":"Fetched {{totalRows}} total rows","table.rows.text":"{{totalRows}} row","table.rows.text_plural":"{{totalRows}} rows","toast.close.text":"close"};

package/src/theme/components.tsx

@@ -333,6 +333,40 @@ export const components = ({
         }),
       },
     },
+    MuiBreadcrumbs: {
+      styleOverrides: {
+        li: {
+          fontSize: odysseyTokens.TypographySizeBody,
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
+
+          "& > a, & > button": {
+            borderRadius: odysseyTokens.BorderRadiusTight,
+            color: odysseyTokens.TypographyColorSubordinate,
+            display: "flex",
+            gap: odysseyTokens.Spacing1,
+            padding: odysseyTokens.Spacing1,
+            transitionProperty: "color, background-color",
+            transitionDuration: "100ms",
+            transitionTimingFunction: "linear",
+
+            "&:hover": {
+              backgroundColor: odysseyTokens.HueNeutral200,
+              color: odysseyTokens.TypographyColorBody,
+            },
+
+            "&:focus-visible": {
+              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
+              outline: "2px solid transparent",
+              outlineOffset: "1px",
+            },
+          },
+        },
+        separator: {
+          color: odysseyTokens.BorderColorDisplay,
+          marginInline: odysseyTokens.Spacing1,
+        },
+      },
+    },
     MuiButton: {
       defaultProps: {
         variant: "primary",
@@ -688,10 +722,7 @@ export const components = ({
               height: ".64em",
               marginInlineEnd: odysseyTokens.Spacing2,
               borderRadius: "100%",
-              backgroundColor: "transparent",
-              borderColor: odysseyTokens.TypographyColorBody,
-              borderWidth: odysseyTokens.BorderWidthHeavy,
-              borderStyle: odysseyTokens.BorderStyleMain,
+              backgroundColor: odysseyTokens.HueNeutral600,
             },
 
             [`&.${chipClasses.colorError}`]: {