@okta/odyssey-react-mui 1.22.0 → 1.23.0

package/src/Select.tsx

@@ -49,6 +49,44 @@ import {
   useOdysseyDesignTokens,
   DesignTokens,
 } from "./OdysseyDesignTokensContext";
+import { TestSelector } from "./test-selectors";
+
+export const SelectTestSelector = {
+  accessibleText: {
+    errorMessage: "errorMessage",
+    hint: "description",
+    label: "label",
+  },
+  children: {
+    list: {
+      accessibleText: {
+        label: "label",
+      },
+      children: {
+        listItem: {
+          accessibleText: {
+            label: "label",
+          },
+          elementSelector: {
+            method: "ByRole",
+            options: {
+              label: "name",
+            },
+            role: "option",
+          },
+        },
+      },
+      isControlledElement: true,
+    },
+  },
+  elementSelector: {
+    method: "ByRole",
+    options: {
+      label: "name",
+    },
+    role: "combobox",
+  },
+} as const satisfies TestSelector;
 
 export type SelectOption = {
   text: string;

package/src/{labs/Switch.tsx → Switch.tsx}

@@ -23,19 +23,19 @@ import { SwitchProps as MuiSwitchProps, FormLabel } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 
-import { Box } from "../Box";
-import { FieldComponentProps } from "../FieldComponentProps";
-import { FieldHint } from "../FieldHint";
-import { CheckedFieldProps } from "../FormCheckedProps";
-import type { HtmlProps } from "../HtmlProps";
-import { CheckIcon } from "../icons.generated";
-import { ComponentControlledState, getControlState } from "../inputUtils";
+import { Box } from "./Box";
+import { FieldComponentProps } from "./FieldComponentProps";
+import { FieldHint } from "./FieldHint";
+import { CheckedFieldProps } from "./FormCheckedProps";
+import type { HtmlProps } from "./HtmlProps";
+import { CheckIcon } from "./icons.generated";
+import { ComponentControlledState, getControlState } from "./inputUtils";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
-} from "../OdysseyDesignTokensContext";
-import { stripRem, toRem } from "../remUtils";
-import { useUniqueId } from "../useUniqueId";
+} from "./OdysseyDesignTokensContext";
+import { stripRem, toRem } from "./remUtils";
+import { useUniqueId } from "./useUniqueId";
 
 const { CONTROLLED } = ComponentControlledState;
 

package/src/Tabs.tsx

@@ -30,30 +30,28 @@ import { Badge, BadgeProps } from "./Badge";
 import { Box } from "./Box";
 import { HtmlProps } from "./HtmlProps";
 import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
-import { type FeatureTestSelector } from "./test-selectors";
+import { type TestSelector } from "./test-selectors";
 
-export const TabsTestSelectors = {
-  feature: {
+export const TabsTestSelector = {
+  children: {
     tabItem: {
-      selector: {
+      elementSelector: {
         method: "ByRole",
         options: {
-          name: "${label}",
+          label: "name",
         },
-        templateVariableNames: ["label"],
         role: "tab",
       },
     },
   },
-  selector: {
+  elementSelector: {
     method: "ByRole",
     options: {
-      name: "${ariaLabel}",
+      label: "name",
     },
     role: "tablist",
-    templateVariableNames: ["ariaLabel"],
   },
-} as const satisfies FeatureTestSelector;
+} as const satisfies TestSelector;
 
 export type TabItemProps = {
   /**

package/src/Tag.tsx

@@ -12,9 +12,26 @@
 
 import { Chip as MuiChip, ChipProps as MuiChipProps } from "@mui/material";
 import { memo, ReactElement, useCallback, useContext } from "react";
+import styled from "@emotion/styled";
 import { TagListContext } from "./TagListContext";
 import { MuiPropsContext, MuiPropsContextType } from "./MuiPropsContext";
 import { HtmlProps } from "./HtmlProps";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "./OdysseyDesignTokensContext";
+import { CloseCircleFilledIcon } from "./icons.generated";
+
+export const tagColorVariants = [
+  "default",
+  "info",
+  "accentOne",
+  "accentTwo",
+  "accentThree",
+  "accentFour",
+] as const;
+
+type TagColorVariant = (typeof tagColorVariants)[number];
 
 export type TagProps = {
   icon?: ReactElement;
@@ -31,9 +48,117 @@ export type TagProps = {
    * Callback fired when the remove button of the Tag is clicked
    */
   onRemove?: MuiChipProps["onDelete"];
+  /**
+   * Color variant of the Tag, affecting its appearance
+   */
+  colorVariant?: TagColorVariant;
 } & Pick<HtmlProps, "testId" | "translate">;
 
+const getChipColors = (
+  colorVariant: TagColorVariant,
+  odysseyDesignTokens: DesignTokens,
+) => {
+  const colors = {
+    default: {
+      background: odysseyDesignTokens.HueNeutral100,
+      hover: odysseyDesignTokens.HueNeutral200,
+      active: odysseyDesignTokens.HueNeutral300,
+      text: odysseyDesignTokens.HueNeutral700,
+      border: odysseyDesignTokens.HueNeutral200,
+      deleteIcon: odysseyDesignTokens.HueNeutral500,
+      deleteIconHover: odysseyDesignTokens.HueNeutral600,
+    },
+    info: {
+      background: odysseyDesignTokens.HueBlue100,
+      hover: odysseyDesignTokens.HueBlue200,
+      active: odysseyDesignTokens.HueBlue300,
+      text: odysseyDesignTokens.HueBlue700,
+      border: odysseyDesignTokens.HueBlue200,
+      deleteIcon: odysseyDesignTokens.HueBlue500,
+      deleteIconHover: odysseyDesignTokens.HueBlue600,
+    },
+    accentOne: {
+      background: odysseyDesignTokens.HueAccentOne100,
+      hover: odysseyDesignTokens.HueAccentOne200,
+      active: odysseyDesignTokens.HueAccentOne300,
+      text: odysseyDesignTokens.HueAccentOne700,
+      border: odysseyDesignTokens.HueAccentOne200,
+      deleteIcon: odysseyDesignTokens.HueAccentOne500,
+      deleteIconHover: odysseyDesignTokens.HueAccentOne600,
+    },
+    accentTwo: {
+      background: odysseyDesignTokens.HueAccentTwo100,
+      hover: odysseyDesignTokens.HueAccentTwo200,
+      active: odysseyDesignTokens.HueAccentTwo300,
+      text: odysseyDesignTokens.HueAccentTwo700,
+      border: odysseyDesignTokens.HueAccentTwo200,
+      deleteIcon: odysseyDesignTokens.HueAccentTwo500,
+      deleteIconHover: odysseyDesignTokens.HueAccentTwo600,
+    },
+    accentThree: {
+      background: odysseyDesignTokens.HueAccentThree100,
+      hover: odysseyDesignTokens.HueAccentThree200,
+      active: odysseyDesignTokens.HueAccentThree300,
+      text: odysseyDesignTokens.HueAccentThree700,
+      border: odysseyDesignTokens.HueAccentThree200,
+      deleteIcon: odysseyDesignTokens.HueAccentThree500,
+      deleteIconHover: odysseyDesignTokens.HueAccentThree600,
+    },
+    accentFour: {
+      background: odysseyDesignTokens.HueAccentFour100,
+      hover: odysseyDesignTokens.HueAccentFour200,
+      active: odysseyDesignTokens.HueAccentFour300,
+      text: odysseyDesignTokens.HueAccentFour700,
+      border: odysseyDesignTokens.HueAccentFour200,
+      deleteIcon: odysseyDesignTokens.HueAccentFour500,
+      deleteIconHover: odysseyDesignTokens.HueAccentFour600,
+    },
+  };
+
+  return colors[colorVariant] || colors.default;
+};
+
+const StyledTag = styled(MuiChip, {
+  shouldForwardProp: (prop) =>
+    !["colorVariant", "odysseyDesignTokens"].includes(prop as string),
+})<{
+  colorVariant: TagColorVariant;
+  odysseyDesignTokens: DesignTokens;
+  as?: React.ElementType; // Allow the 'as' prop to be forwarded
+}>(({ colorVariant, odysseyDesignTokens }) => {
+  const colors = getChipColors(colorVariant, odysseyDesignTokens);
+
+  return {
+    backgroundColor: colors.background,
+    color: colors.text,
+    borderColor: colors.border,
+
+    "&.MuiChip-clickable:hover": {
+      backgroundColor: colors.hover,
+    },
+
+    "&.MuiChip-clickable:active": {
+      backgroundColor: colors.active,
+    },
+
+    "&.Mui-disabled": {
+      "& .MuiChip-deleteIcon": {
+        color: odysseyDesignTokens.HueNeutral300,
+      },
+    },
+
+    "& .MuiChip-deleteIcon": {
+      color: colors.deleteIcon,
+
+      "&:hover": {
+        color: colors.deleteIconHover,
+      },
+    },
+  };
+});
+
 const Tag = ({
+  colorVariant = "default",
   icon,
   isDisabled,
   label,
@@ -42,21 +167,25 @@ const Tag = ({
   testId,
   translate,
 }: TagProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
   const { chipElementType } = useContext(TagListContext);
 
   const renderTag = useCallback(
     (muiProps: MuiPropsContextType) => (
-      <MuiChip
+      <StyledTag
         {...muiProps}
+        as={chipElementType}
         aria-disabled={isDisabled}
-        clickable={onClick ? true : false}
-        component={chipElementType}
+        clickable={Boolean(onClick)}
         data-se={testId}
+        colorVariant={colorVariant}
+        odysseyDesignTokens={odysseyDesignTokens}
         disabled={isDisabled}
         icon={icon}
         label={label}
         onClick={onClick}
         onDelete={onRemove}
+        deleteIcon={<CloseCircleFilledIcon />}
         translate={translate}
       />
     ),
@@ -69,6 +198,8 @@ const Tag = ({
       onRemove,
       testId,
       translate,
+      colorVariant,
+      odysseyDesignTokens,
     ],
   );
 

package/src/TextField.tsx

@@ -30,56 +30,33 @@ import {
 import { Field } from "./Field";
 import { HtmlProps } from "./HtmlProps";
 import { FocusHandle, useInputValues, getControlState } from "./inputUtils";
-import { type FeatureTestSelector } from "./test-selectors";
+import { type TestSelector } from "./test-selectors";
 
-export const TextFieldTestSelectors = {
-  feature: {
-    description: {
-      selector: {
-        method: "ByText",
-        templateVariableNames: ["hint"],
-        text: "${hint}",
-      },
-    },
-    errorMessage: {
-      selector: {
-        method: "ByText",
-        templateVariableNames: ["errorMessage"],
-        text: "${errorMessage}",
-      },
-    },
-    input: {
-      selector: {
-        method: "ByRole",
-        options: {
-          name: "${label}",
-        },
-        role: "textbox",
-        templateVariableNames: ["label"],
-      },
-    },
-    label: {
-      selector: {
-        method: "ByRole",
-        options: {
-          name: "${label}",
-        },
-        role: "LabelText",
-        templateVariableNames: ["label"],
-      },
-    },
+export const TextFieldTestSelector = {
+  accessibleText: {
+    errorMessage: "errorMessage",
+    hint: "description",
+    label: "label",
+  },
+  children: {
     link: {
-      selector: {
+      elementSelector: {
         method: "ByRole",
         options: {
-          name: "${label}",
+          label: "name",
         },
-        templateVariableNames: ["label"],
         role: "link",
       },
     },
   },
-} as const satisfies FeatureTestSelector;
+  elementSelector: {
+    method: "ByRole",
+    options: {
+      label: "name",
+    },
+    role: "textbox",
+  },
+} as const satisfies TestSelector;
 
 export const textFieldTypeValues = [
   "email",

package/src/Toast.tsx

@@ -130,7 +130,7 @@ const Toast = ({
         >
           <AlertTitle translate={translate}>
             <ScreenReaderText translate={translate}>
-              {t(`severity.${severity}:`)}
+              {t(`severity.${severity}`)}:
             </ScreenReaderText>
             {text}
           </AlertTitle>

package/src/createShadowDomElements.ts

@@ -21,6 +21,9 @@ export const createShadowDomElements = (containerElement: HTMLElement) => {
   // React app root component.
   const shadowRootElement = document.createElement("div");
   shadowRootElement.setAttribute("id", "shadow-root");
+  // This div could cause issues with layout of children.
+  // For flexibility, make it inherit its parent's height
+  shadowRootElement.style.setProperty("height", "inherit");
 
   shadowRoot.appendChild(emotionRootElement);
   shadowRoot.appendChild(shadowRootElement);

package/src/i18n.ts

@@ -44,7 +44,7 @@ import { translation as zhCN } from "./properties/ts/odyssey-react-mui_zh_CN";
 import { translation as znTW } from "./properties/ts/odyssey-react-mui_zh_TW";
 
 export const defaultLNG = "en";
-export const defaultNS = "translations";
+export const defaultNS = "odyssey";
 
 // Note: This is type "string" to allow translation overrides from other languages
 export type I18nResources = Record<string, Partial<typeof en>>;
@@ -78,7 +78,7 @@ export const resources: I18nResources = {
   vi,
   zh_CN: zhCN,
   zh_TW: znTW,
-};
+} as const;
 
 i18n.use(initReactI18next).init({
   defaultNS,
@@ -94,7 +94,7 @@ i18n.use(initReactI18next).init({
     useSuspense: false,
     bindI18nStore: "added",
   },
-});
+} as const);
 
 Object.entries(resources).forEach(([locale, property]) => {
   i18n.addResourceBundle(locale, defaultNS, property);

package/src/index.ts

@@ -77,6 +77,11 @@ export * from "./Drawer";
 export * from "./EmptyState";
 export * from "./Fieldset";
 export * from "./FieldComponentProps";
+export {
+  FileUploader,
+  fileUploadTypes,
+  fileUploadVariants,
+} from "./FileUploader";
 export * from "./Form";
 export * from "./HintLink";
 export * from "./IconWithTooltip";
@@ -104,7 +109,7 @@ export * from "./TextField";
 export * from "./theme";
 export * from "./Toast";
 export * from "./ToastStack";
-export * from "./labs/Switch";
+export * from "./Switch";
 export * from "./Tooltip";
 export * from "./Typography";
 export * from "./useUniqueId";

package/src/labs/DataView/DataView.test.tsx

@@ -0,0 +1,158 @@
+/*!
+ * Copyright (c) 2024-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 {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import { DataView } from "./index";
+import {
+  data,
+  columns,
+} from "@okta/odyssey-storybook/src/components/odyssey-labs/DataView/personData";
+import { filterData } from "@okta/odyssey-storybook/src/components/odyssey-labs/DataView/dataFunctions";
+
+const getData = ({ ...props }) => {
+  return filterData({ data, ...props });
+};
+
+describe("DataView", () => {
+  it("displays the expected number of rows by default", async () => {
+    render(
+      <DataView
+        availableLayouts={["table"]}
+        getData={getData}
+        tableLayoutOptions={{
+          columns: columns,
+        }}
+        hasSearch
+        hasPagination
+        // virtualization has to be false for the tests to work properly
+        enableVirtualization={false}
+        paginationType="loadMore"
+        resultsPerPage={20}
+      />,
+    );
+
+    const tableElement = await screen.findByRole("table", { name: "" });
+    const rowElements = within(tableElement).getAllByRole("row", {
+      hidden: false,
+    });
+    expect(rowElements.length).toBe(21);
+  });
+
+  it("displays the expected number of rows on load more", async () => {
+    render(
+      <DataView
+        availableLayouts={["table"]}
+        getData={getData}
+        tableLayoutOptions={{
+          columns: columns,
+        }}
+        hasSearch
+        hasPagination
+        // virtualization has to be false for the tests to work properly
+        enableVirtualization={false}
+        paginationType="loadMore"
+        resultsPerPage={20}
+      />,
+    );
+
+    const tableElement = await screen.findByRole("table", { name: "" });
+    const rowElements = within(tableElement).getAllByRole("row", {
+      hidden: false,
+    });
+    expect(rowElements.length).toBe(21);
+
+    waitFor(() => {
+      fireEvent.click(screen.getByText("Show more"));
+
+      const loadedRows = within(tableElement).getAllByRole("row", {
+        hidden: false,
+      });
+      expect(loadedRows.length).toBe(41);
+    });
+  });
+
+  it("resets the rows when searching", async () => {
+    render(
+      <DataView
+        availableLayouts={["table"]}
+        getData={getData}
+        tableLayoutOptions={{
+          columns: columns,
+        }}
+        hasSearch
+        hasPagination
+        // virtualization has to be false for the tests to work properly
+        enableVirtualization={false}
+        paginationType="loadMore"
+        resultsPerPage={20}
+      />,
+    );
+
+    const tableElement = await screen.findByRole("table", { name: "" });
+    const rowElements = within(tableElement).getAllByRole("row", {
+      hidden: false,
+    });
+    expect(rowElements.length).toBe(21);
+
+    fireEvent.click(screen.getByText("Show more"));
+
+    waitFor(() => {
+      const loadedRows = within(tableElement).getAllByRole("row", {
+        hidden: false,
+      });
+      expect(loadedRows.length).toBe(41);
+    });
+
+    const searchField = screen.getByPlaceholderText("Search");
+    fireEvent.change(searchField, { target: { value: "John" } });
+
+    waitFor(() => {
+      const rowsAfterFilter = within(tableElement).getAllByRole("row", {
+        hidden: false,
+      });
+      expect(rowsAfterFilter.length).toBeLessThanOrEqual(21);
+    });
+  });
+
+  it("fires onPaginationChange when pagination changes", async () => {
+    let currentPage = 1;
+    const onPaginationChange = (pagination: {
+      pageIndex: number;
+      pageSize: number;
+    }) => {
+      currentPage = pagination.pageIndex;
+    };
+
+    render(
+      <>
+        <DataView
+          getData={getData}
+          hasPagination
+          onPaginationChange={onPaginationChange}
+        />
+      </>,
+    );
+
+    const nextButton = screen.getByLabelText("Next page");
+    fireEvent.click(nextButton);
+
+    await waitFor(() => {
+      expect(currentPage).toBe(2);
+    });
+  });
+});