@okta/odyssey-react-mui 1.32.0 → 1.32.4

package/src/Tabs.tsx

@@ -1,259 +0,0 @@
-/*!
- * 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 {
-  ReactElement,
-  ReactNode,
-  memo,
-  useCallback,
-  useEffect,
-  useState,
-} from "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 { Badge, BadgeProps } from "./Badge.js";
-import { Box } from "./Box.js";
-import { HtmlProps } from "./HtmlProps.js";
-import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
-import { type TestSelector } from "./test-selectors/index.js";
-
-export const TabsTestSelector = {
-  children: {
-    tabItem: {
-      elementSelector: {
-        method: "ByRole",
-        options: {
-          label: "name",
-        },
-        role: "tab",
-      },
-    },
-  },
-  elementSelector: {
-    method: "ByRole",
-    options: {
-      label: "name",
-    },
-    role: "tablist",
-  },
-} as const satisfies TestSelector;
-
-export type TabItemProps = {
-  /**
-   * The content of the Tab itself
-   */
-  children: ReactNode;
-  /**
-   * If `true`, the TabItem is disabled
-   */
-  isDisabled?: boolean;
-  /**
-   * The label text for the TabItem
-   */
-  label: string;
-  /**
-   * An optional icon to display at the start of the TabItem
-   */
-  startIcon?: ReactElement;
-  /**
-   * The value associated with the TabItem
-   */
-  value?: string;
-} & {
-  notificationCount?: BadgeProps["badgeContent"];
-  notificationCountMax?: BadgeProps["badgeContentMax"];
-} & Pick<HtmlProps, "testId" | "translate">;
-
-export type TabsProps = {
-  /**
-   * @deprecated please use the `value` prop instead
-   * When `value` is provided, `initialValue` isn't used.
-   */
-  initialValue?: string;
-  /**
-   * The TabItems to be included in the Tabs group
-   */
-  tabs: TabItemProps[];
-  /**
-   * Identifier for the selected tab.
-   */
-  value?: string;
-  /**
-   * Callback fired when the active tab is changed.
-   */
-  onChange?: MuiTabListProps["onChange"];
-};
-
-const TabLabel = ({
-  label,
-  notificationCount,
-  notificationCountMax,
-  tabState,
-  value,
-}: Pick<
-  TabItemProps,
-  "label" | "notificationCount" | "notificationCountMax" | "value"
-> & {
-  tabState: string;
-}) => {
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-
-  return (
-    <>
-      {label}
-      {notificationCount !== undefined && notificationCount > 0 && (
-        <Box
-          sx={{
-            marginInlineStart: notificationCount
-              ? odysseyDesignTokens.Spacing2
-              : 0,
-          }}
-        >
-          <Badge
-            badgeContent={notificationCount}
-            badgeContentMax={notificationCountMax}
-            type={value === tabState ? "attention" : "default"}
-          />
-        </Box>
-      )}
-    </>
-  );
-};
-
-const Tabs = ({
-  ariaLabel,
-  initialValue,
-  tabs,
-  value,
-  onChange: onChangeProp,
-}: TabsProps & Pick<HtmlProps, "ariaLabel">) => {
-  const [tabState, setTabState] = useState(initialValue ?? value ?? "0");
-  /*
-    The scrollButtons prop is initially set to `false`.
-    It's then reset to `auto` when the document is visible.
-    This prevents a rare bug where scroll buttons appear
-    when the component is rendered while hidden and the
-    screen is wide enough to not need scroll buttons.
-  */
-  const [scrollButtons, setScrollButtons] =
-    useState<MuiTabListProps["scrollButtons"]>(false);
-  const onChange = useCallback<NonNullable<MuiTabListProps["onChange"]>>(
-    (event, value: string) => {
-      setTabState(value);
-      onChangeProp?.(event, value);
-    },
-    [onChangeProp],
-  );
-
-  useEffect(() => {
-    if (value !== undefined) {
-      setTabState(value);
-    }
-  }, [value]);
-
-  // listen for visibility change to reset scroll buttons override
-  useEffect(() => {
-    // keep track of animation frame to cancel when needed
-    let animationFrame: number;
-
-    // called when unmounted or scroll buttons is reset
-    const cleanup = () => {
-      cancelAnimationFrame(animationFrame);
-      document.removeEventListener("visibilitychange", refreshScrollButtons);
-    };
-
-    // Reset the scroll buttons override when the document becomes visible.
-    // If called, then the document is hidden because the event listener
-    // is only registered if the document is hidden
-    function refreshScrollButtons() {
-      animationFrame = requestAnimationFrame(() => {
-        cleanup();
-        setScrollButtons("auto");
-      });
-    }
-
-    // don't override scroll buttons if it's already set to "auto"
-    if (scrollButtons !== "auto") {
-      document.addEventListener("visibilitychange", refreshScrollButtons);
-    }
-    return () => {
-      cleanup();
-    };
-  }, [scrollButtons]);
-
-  const renderTab = useCallback(
-    (tab: TabItemProps, index: number) => {
-      const {
-        testId,
-        isDisabled,
-        label,
-        startIcon,
-        value,
-        notificationCount,
-        notificationCountMax,
-      } = tab;
-
-      return (
-        <MuiTab
-          data-se={testId}
-          disabled={isDisabled}
-          icon={startIcon}
-          tabIndex={0}
-          label={
-            <TabLabel
-              label={label}
-              notificationCount={notificationCount}
-              notificationCountMax={notificationCountMax}
-              tabState={tabState}
-              value={value}
-            />
-          }
-          value={value ? value : index.toString()}
-          key={value ? value : index.toString()}
-        />
-      );
-    },
-    [tabState],
-  );
-
-  return (
-    <MuiTabContext value={tabState}>
-      <MuiTabList
-        onChange={onChange}
-        aria-label={ariaLabel}
-        variant="scrollable"
-        scrollButtons={scrollButtons}
-      >
-        {tabs.map((tab, index) => renderTab(tab, index))}
-      </MuiTabList>
-      {tabs.map((tab, index) => (
-        <MuiTabPanel
-          value={tab.value ? tab.value : index.toString()}
-          key={tab.value ? tab.value : index.toString()}
-        >
-          {tab.children}
-        </MuiTabPanel>
-      ))}
-    </MuiTabContext>
-  );
-};
-
-const MemoizedTabs = memo(Tabs);
-MemoizedTabs.displayName = "Tabs";
-
-export { MemoizedTabs as Tabs };

package/src/Tag.tsx

@@ -1,317 +0,0 @@
-/*!
- * 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 { Chip as MuiChip, ChipProps as MuiChipProps } from "@mui/material";
-import { memo, ReactElement, useCallback, useContext } from "react";
-import styled from "@emotion/styled";
-
-import { CloseCircleFilledIcon } from "./icons.generated/index.js";
-import { HtmlProps } from "./HtmlProps.js";
-import { MuiPropsContext, MuiPropsContextType } from "./MuiPropsContext.js";
-import {
-  DesignTokens,
-  useOdysseyDesignTokens,
-} from "./OdysseyDesignTokensContext.js";
-import { TagListContext } from "./TagListContext.js";
-import { ContrastMode, useContrastModeContext } from "./useContrastMode.js";
-
-export const tagSizeValues = ["medium", "small"] as const;
-
-export const tagColorVariants = [
-  "accentFour",
-  "accentOne",
-  "accentThree",
-  "accentTwo",
-  "default",
-  "info",
-] as const;
-
-type TagColorVariant = (typeof tagColorVariants)[number];
-type TagSize = (typeof tagSizeValues)[number];
-
-export type TagProps = {
-  icon?: ReactElement;
-  isDisabled?: boolean;
-  /**
-   * The label text for the Tag
-   */
-  label: string;
-  /**
-   * Callback fired when the Tag is clicked
-   */
-  onClick?: MuiChipProps["onClick"];
-  /**
-   * Callback fired when the remove button of the Tag is clicked
-   */
-  onRemove?: MuiChipProps["onDelete"];
-  /**
-   * Color variant of the Tag, affecting its appearance
-   */
-  colorVariant?: TagColorVariant;
-  /*
-   *  Size variant of the Tag
-   */
-  size?: TagSize;
-} & Pick<HtmlProps, "testId" | "translate">;
-
-const getChipColors = ({
-  colorVariant,
-  contrastMode,
-  odysseyDesignTokens,
-}: {
-  colorVariant: TagColorVariant;
-  contrastMode: ContrastMode;
-  odysseyDesignTokens: DesignTokens;
-}) => {
-  const colors = {
-    default: {
-      ...(contrastMode === "highContrast" && {
-        background: odysseyDesignTokens.HueNeutral200,
-        text: odysseyDesignTokens.HueNeutral700,
-        textDisabled: odysseyDesignTokens.HueNeutral400,
-      }),
-      ...(contrastMode === "lowContrast" && {
-        background: odysseyDesignTokens.HueNeutral100,
-        text: odysseyDesignTokens.HueNeutral700,
-        textDisabled: odysseyDesignTokens.HueNeutral300,
-      }),
-      hover: odysseyDesignTokens.HueNeutral200,
-      active: odysseyDesignTokens.HueNeutral300,
-      border: odysseyDesignTokens.HueNeutral200,
-      deleteIcon: odysseyDesignTokens.HueNeutral500,
-      deleteIconHover: odysseyDesignTokens.HueNeutral700,
-      icon: odysseyDesignTokens.HueNeutral700,
-      iconDisabled: odysseyDesignTokens.HueNeutral300,
-    },
-    info: {
-      ...(contrastMode === "highContrast" && {
-        background: odysseyDesignTokens.HueBlue200,
-        text: odysseyDesignTokens.HueBlue700,
-        textDisabled: odysseyDesignTokens.HueBlue400,
-      }),
-      ...(contrastMode === "lowContrast" && {
-        background: odysseyDesignTokens.HueBlue100,
-        text: odysseyDesignTokens.HueBlue700,
-        textDisabled: odysseyDesignTokens.HueBlue300,
-      }),
-      hover: odysseyDesignTokens.HueBlue200,
-      active: odysseyDesignTokens.HueBlue300,
-      border: odysseyDesignTokens.HueBlue200,
-      deleteIcon: odysseyDesignTokens.HueBlue500,
-      deleteIconHover: odysseyDesignTokens.HueBlue700,
-      icon: odysseyDesignTokens.HueBlue700,
-      iconDisabled: odysseyDesignTokens.HueBlue300,
-    },
-    accentOne: {
-      ...(contrastMode === "highContrast" && {
-        background: odysseyDesignTokens.HueAccentOne200,
-        text: odysseyDesignTokens.HueAccentOne700,
-        textDisabled: odysseyDesignTokens.HueAccentOne400,
-      }),
-      ...(contrastMode === "lowContrast" && {
-        background: odysseyDesignTokens.HueAccentOne100,
-        text: odysseyDesignTokens.HueAccentOne700,
-        textDisabled: odysseyDesignTokens.HueAccentOne300,
-      }),
-      hover: odysseyDesignTokens.HueAccentOne200,
-      active: odysseyDesignTokens.HueAccentOne300,
-      border: odysseyDesignTokens.HueAccentOne200,
-      deleteIcon: odysseyDesignTokens.HueAccentOne500,
-      deleteIconHover: odysseyDesignTokens.HueAccentOne700,
-      icon: odysseyDesignTokens.HueAccentOne700,
-      iconDisabled: odysseyDesignTokens.HueAccentOne300,
-    },
-    accentTwo: {
-      ...(contrastMode === "highContrast" && {
-        background: odysseyDesignTokens.HueAccentTwo200,
-        text: odysseyDesignTokens.HueAccentTwo800,
-        textDisabled: odysseyDesignTokens.HueAccentTwo400,
-      }),
-      ...(contrastMode === "lowContrast" && {
-        background: odysseyDesignTokens.HueAccentTwo100,
-        text: odysseyDesignTokens.HueAccentTwo700,
-        textDisabled: odysseyDesignTokens.HueAccentTwo300,
-      }),
-      hover: odysseyDesignTokens.HueAccentTwo200,
-      active: odysseyDesignTokens.HueAccentTwo300,
-      border: odysseyDesignTokens.HueAccentTwo200,
-      deleteIcon: odysseyDesignTokens.HueAccentTwo500,
-      deleteIconHover: odysseyDesignTokens.HueAccentTwo700,
-      icon: odysseyDesignTokens.HueAccentTwo700,
-      iconDisabled: odysseyDesignTokens.HueAccentTwo300,
-    },
-    accentThree: {
-      ...(contrastMode === "highContrast" && {
-        background: odysseyDesignTokens.HueAccentThree200,
-        text: odysseyDesignTokens.HueAccentThree700,
-        textDisabled: odysseyDesignTokens.HueAccentThree400,
-      }),
-      ...(contrastMode === "lowContrast" && {
-        background: odysseyDesignTokens.HueAccentThree100,
-        text: odysseyDesignTokens.HueAccentThree700,
-        textDisabled: odysseyDesignTokens.HueAccentThree300,
-      }),
-      hover: odysseyDesignTokens.HueAccentThree200,
-      active: odysseyDesignTokens.HueAccentThree300,
-      border: odysseyDesignTokens.HueAccentThree200,
-      deleteIcon: odysseyDesignTokens.HueAccentThree500,
-      deleteIconHover: odysseyDesignTokens.HueAccentThree700,
-      icon: odysseyDesignTokens.HueAccentThree700,
-      iconDisabled: odysseyDesignTokens.HueAccentThree300,
-    },
-    accentFour: {
-      ...(contrastMode === "highContrast" && {
-        background: odysseyDesignTokens.HueAccentFour200,
-        text: odysseyDesignTokens.HueAccentFour700,
-        textDisabled: odysseyDesignTokens.HueAccentFour400,
-      }),
-      ...(contrastMode === "lowContrast" && {
-        background: odysseyDesignTokens.HueAccentFour100,
-        text: odysseyDesignTokens.HueAccentFour700,
-        textDisabled: odysseyDesignTokens.HueAccentFour300,
-      }),
-      hover: odysseyDesignTokens.HueAccentFour200,
-      active: odysseyDesignTokens.HueAccentFour300,
-      border: odysseyDesignTokens.HueAccentFour200,
-      deleteIcon: odysseyDesignTokens.HueAccentFour500,
-      deleteIconHover: odysseyDesignTokens.HueAccentFour700,
-      icon: odysseyDesignTokens.HueAccentFour700,
-      iconDisabled: odysseyDesignTokens.HueAccentFour300,
-    },
-  };
-
-  return colors[colorVariant] || colors.default;
-};
-
-const StyledTag = styled(MuiChip, {
-  shouldForwardProp: (prop) =>
-    !["colorVariant", "contrastMode", "odysseyDesignTokens", "size"].includes(
-      prop,
-    ),
-})<{
-  as?: React.ElementType; // Allow the 'as' prop to be forwarded
-  clickable?: boolean;
-  colorVariant: TagColorVariant;
-  contrastMode: ContrastMode;
-  odysseyDesignTokens: DesignTokens;
-  size?: TagSize;
-}>(({ colorVariant, contrastMode, odysseyDesignTokens, clickable, size }) => {
-  const colors = getChipColors({
-    colorVariant,
-    odysseyDesignTokens,
-    contrastMode,
-  });
-
-  return {
-    backgroundColor: colors.background,
-    color: colors.text,
-
-    ...(clickable === true && {
-      borderColor: colors.border,
-    }),
-
-    ...(clickable === false && {
-      borderColor: "transparent",
-    }),
-
-    ...(size === "small" && {
-      paddingBlock: `calc(${odysseyDesignTokens.Spacing1})`,
-    }),
-
-    "&.MuiChip-clickable:hover": {
-      backgroundColor: colors.hover,
-    },
-
-    "&.MuiChip-clickable:active": {
-      backgroundColor: colors.active,
-    },
-
-    "&.Mui-disabled": {
-      color: colors.textDisabled,
-      borderColor: colors.border,
-      "& .MuiChip-icon, & .MuiChip-deleteIcon": {
-        color: colors.iconDisabled,
-      },
-    },
-
-    "& .MuiChip-icon": {
-      color: colors.icon,
-    },
-
-    "& .MuiChip-deleteIcon": {
-      color: colors.deleteIcon,
-      "&:hover": {
-        color: colors.deleteIconHover,
-      },
-    },
-  };
-});
-
-const Tag = ({
-  colorVariant = "default",
-  icon,
-  isDisabled,
-  label,
-  onClick,
-  onRemove,
-  size = "medium",
-  testId,
-  translate,
-}: TagProps) => {
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-  const { chipElementType } = useContext(TagListContext);
-  const { contrastMode } = useContrastModeContext();
-
-  const renderTag = useCallback(
-    (muiProps: MuiPropsContextType) => (
-      <StyledTag
-        {...muiProps}
-        aria-disabled={isDisabled}
-        as={chipElementType}
-        clickable={Boolean(onClick)}
-        colorVariant={colorVariant}
-        contrastMode={contrastMode}
-        data-se={testId}
-        deleteIcon={<CloseCircleFilledIcon />}
-        disabled={isDisabled}
-        icon={icon}
-        label={label}
-        odysseyDesignTokens={odysseyDesignTokens}
-        onClick={onClick}
-        onDelete={onRemove}
-        size={size}
-        translate={translate}
-      />
-    ),
-    [
-      chipElementType,
-      colorVariant,
-      contrastMode,
-      icon,
-      isDisabled,
-      label,
-      odysseyDesignTokens,
-      onClick,
-      onRemove,
-      size,
-      testId,
-      translate,
-    ],
-  );
-
-  return <MuiPropsContext.Consumer>{renderTag}</MuiPropsContext.Consumer>;
-};
-
-const MemoizedTag = memo(Tag);
-MemoizedTag.displayName = "Tag";
-
-export { MemoizedTag as Tag };

package/src/TagList.tsx

@@ -1,55 +0,0 @@
-/*!
- * 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 { Tag } from "./Tag.js";
-import { Stack } from "@mui/material";
-import { memo, ReactElement, useMemo } from "react";
-import { ChipElementType, TagListContext } from "./TagListContext.js";
-import { HtmlProps } from "./HtmlProps.js";
-
-export type TagListProps = {
-  /**
-   * The Tag or array of Tags within the TagList
-   */
-  children: ReactElement<typeof Tag> | Array<ReactElement<typeof Tag>>;
-} & Pick<HtmlProps, "testId">;
-
-const TagList = ({ children, testId }: TagListProps) => {
-  const providerValue = useMemo<{
-    chipElementType: ChipElementType;
-  }>(
-    () => ({
-      chipElementType: "li",
-    }),
-    [],
-  );
-
-  return (
-    <Stack
-      component="ul"
-      data-se={testId}
-      direction="row"
-      spacing={2}
-      useFlexGap
-      flexWrap="wrap"
-    >
-      <TagListContext.Provider value={providerValue}>
-        {children}
-      </TagListContext.Provider>
-    </Stack>
-  );
-};
-
-const MemoizedTagList = memo(TagList);
-MemoizedTagList.displayName = "TagList";
-
-export { MemoizedTagList as TagList };

package/src/TagListContext.tsx

@@ -1,23 +0,0 @@
-/*!
- * 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 { createContext } from "react";
-
-export type ChipElementType = "li" | "div";
-
-export type TagListContextType = {
-  chipElementType: ChipElementType;
-};
-
-export const TagListContext = createContext<TagListContextType>({
-  chipElementType: "div",
-});