@okta/odyssey-react-mui 1.14.8 → 1.15.9

package/src/MenuButton.tsx

@@ -10,21 +10,17 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, type ReactElement, useCallback, useMemo, useState } from "react";
 import {
-  Divider,
-  ListSubheader,
-  Menu as MuiMenu,
-  PopoverOrigin,
-} from "@mui/material";
-
-import {
-  Button,
-  buttonSizeValues,
-  buttonVariantValues,
-  MenuItem,
-  useUniqueId,
-} from "./";
+  memo,
+  type ReactElement,
+  useCallback,
+  useMemo,
+  useState,
+  ReactNode,
+} from "react";
+import { Menu as MuiMenu, PopoverOrigin } from "@mui/material";
+
+import { Button, buttonSizeValues, buttonVariantValues, useUniqueId } from "./";
 import { ChevronDownIcon, MoreIcon } from "./icons.generated";
 import { FieldComponentProps } from "./FieldComponentProps";
 import { MenuContext, MenuContextType } from "./MenuContext";
@@ -45,13 +41,7 @@ export type MenuButtonProps = {
   /**
    * The <MenuItem> components within the Menu.
    */
-  children:
-    | ReactElement<typeof MenuItem | typeof Divider | typeof ListSubheader>
-    | Array<
-        | ReactElement<typeof MenuItem | typeof Divider | typeof ListSubheader>
-        | NullElement
-      >
-    | NullElement;
+  children: ReactNode | NullElement;
   /**
    * The end Icon on the trigggering Button
    */

package/src/RadioGroup.tsx

@@ -14,9 +14,9 @@ import {
   RadioGroup as MuiRadioGroup,
   type RadioGroupProps as MuiRadioGroupProps,
 } from "@mui/material";
-import { memo, ReactElement, useCallback, useRef } from "react";
+import { memo, ReactNode, useCallback, useRef } from "react";
 
-import { Radio, RadioProps } from "./Radio";
+import { RadioProps } from "./Radio";
 import { Field } from "./Field";
 import {
   FieldComponentProps,
@@ -29,7 +29,7 @@ export type RadioGroupProps = {
   /**
    * The Radio components within the group. Must include two or more.
    */
-  children: Array<ReactElement<typeof Radio>>;
+  children: ReactNode;
   /**
    * The text value of the Radio that should be selected by default
    */

package/src/Select.tsx

@@ -92,6 +92,7 @@ const NonInteractiveIcon = styled(CloseCircleFilledIcon, {
   margin-inline-start: ${({ odysseyDesignTokens }) =>
     odysseyDesignTokens.Spacing2};
   margin-inline-end: -${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};
+  margin-block-end: -1px;
 `;
 
 const ChipsInnerContainer = styled(MuiBox, {
@@ -104,20 +105,9 @@ const ChipsInnerContainer = styled(MuiBox, {
   display: flex;
   flex-wrap: wrap;
   gap: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};
-  pointer-events: ${({ isInteractive }) => (isInteractive ? "auto" : "none")};
+  pointer-events: none;
   opacity: ${({ isInteractive }) => (isInteractive ? 1 : 0)};
-`;
-
-const ChipsSpacer = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<{
-  odysseyDesignTokens: DesignTokens;
-}>`
-  display: inline-block;
-  border-color: transparent;
-  border-style: solid none;
-  border-width: 1px;
-  height: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing6};
+  min-height: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing6};
 `;
 
 export type SelectValueType<HasMultipleChoices> =
@@ -280,12 +270,14 @@ const Select = <
       } = event;
       if (controlledStateRef.current !== CONTROLLED) {
         setInternalSelectedValues(
-          (typeof value === "string" ? value.split(",") : value) as Value,
+          (typeof value === "string" && hasMultipleChoices
+            ? value.split(",")
+            : value) as Value,
         );
       }
       onChangeProp?.(event, child);
     },
-    [onChangeProp],
+    [hasMultipleChoices, onChangeProp],
   );
 
   // Normalize the options array to accommodate the various
@@ -312,73 +304,74 @@ const Select = <
     [options],
   );
 
-  const Chips = useCallback(
-    ({
-      selection,
-      isInteractive,
-    }: {
-      selection: string[];
-      isInteractive: boolean;
-    }) => {
-      const removeSelection = (itemToRemove: string) => {
-        if (Array.isArray(internalSelectedValues)) {
-          const newValue = internalSelectedValues.filter(
-            (item: string) => item !== itemToRemove,
-          );
+  const removeSelectedValue = useCallback(
+    (selectedValue: string) => {
+      if (Array.isArray(internalSelectedValues)) {
+        const newValue = internalSelectedValues.filter(
+          (internalSelectedValue) => internalSelectedValue !== selectedValue,
+        );
 
-          const syntheticEvent = {
-            target: { value: newValue },
-          } as SelectChangeEvent<Value>;
+        const syntheticEvent = {
+          target: { value: newValue },
+        } as SelectChangeEvent<Value>;
 
-          onChange(syntheticEvent, null);
-        }
-      };
+        onChange(syntheticEvent, null);
+      }
+    },
+    [internalSelectedValues, onChange],
+  );
 
+  const Chips = useCallback(
+    ({ isInteractive }: { isInteractive: boolean }) => {
       const stopPropagation = (event: MouseEvent<SVGSVGElement>) =>
         event.stopPropagation();
 
+      const hasNonInteractiveIcon =
+        !isInteractive &&
+        controlledStateRef.current === CONTROLLED &&
+        hasMultipleChoices;
+
       return (
-        <ChipsInnerContainer
-          isInteractive={isInteractive}
-          odysseyDesignTokens={odysseyDesignTokens}
-        >
-          <ChipsSpacer odysseyDesignTokens={odysseyDesignTokens} />
-          {selection.map(
-            (item: string) =>
-              item?.length > 0 && (
-                <MuiChip
-                  key={item}
-                  label={
-                    <>
-                      {item}
-                      {!isInteractive &&
-                        controlledStateRef.current === CONTROLLED &&
-                        hasMultipleChoices && (
+        Array.isArray(internalSelectedValues) && (
+          <ChipsInnerContainer
+            isInteractive={isInteractive}
+            odysseyDesignTokens={odysseyDesignTokens}
+          >
+            {internalSelectedValues.map(
+              (item) =>
+                item?.length > 0 && (
+                  <MuiChip
+                    key={item}
+                    label={
+                      <>
+                        {item}
+                        {hasNonInteractiveIcon && (
                           <NonInteractiveIcon
                             odysseyDesignTokens={odysseyDesignTokens}
                           />
                         )}
-                    </>
-                  }
-                  tabIndex={-1}
-                  onDelete={
-                    isInteractive && controlledStateRef.current === CONTROLLED
-                      ? () => removeSelection(item)
-                      : undefined
-                  }
-                  deleteIcon={
-                    <CloseCircleFilledIcon
-                      sx={{ pointerEvents: "auto" }}
-                      // We need to stop event propagation on mouse down to prevent the deletion
-                      // from being blocked by the Select list opening, and also ensure that
-                      // the pointerEvent is registered even when the parent's are not
-                      onMouseDown={stopPropagation}
-                    />
-                  }
-                />
-              ),
-          )}
-        </ChipsInnerContainer>
+                      </>
+                    }
+                    tabIndex={-1}
+                    onDelete={
+                      isInteractive && controlledStateRef.current === CONTROLLED
+                        ? () => removeSelectedValue(item)
+                        : undefined
+                    }
+                    deleteIcon={
+                      <CloseCircleFilledIcon
+                        sx={{ pointerEvents: "auto" }}
+                        // We need to stop event propagation on mouse down to prevent the deletion
+                        // from being blocked by the Select list opening, and also ensure that
+                        // the pointerEvent is registered even when the parent's are not
+                        onMouseDown={stopPropagation}
+                      />
+                    }
+                  />
+                ),
+            )}
+          </ChipsInnerContainer>
+        )
       );
     },
     [
@@ -386,13 +379,13 @@ const Select = <
       hasMultipleChoices,
       internalSelectedValues,
       odysseyDesignTokens,
-      onChange,
+      removeSelectedValue,
     ],
   );
 
   // Convert the options into the ReactNode children
   // that will populate the <Select>
-  const children = useMemo(
+  const renderedOptions = useMemo(
     () =>
       normalizedOptions.map((option, index) => {
         if (option.type === "heading") {
@@ -413,22 +406,18 @@ const Select = <
           >
             {hasMultipleChoices && <MuiCheckbox checked={isSelected} />}
             {option.text}
-            {!hasMultipleChoices &&
-              (internalSelectedValues?.includes(option.value) ||
-                internalSelectedValues === option.value) && (
-                <ListItemSecondaryAction>
-                  <CheckIcon />
-                </ListItemSecondaryAction>
-              )}
+            {!hasMultipleChoices && internalSelectedValues === option.value && (
+              <ListItemSecondaryAction>
+                <CheckIcon />
+              </ListItemSecondaryAction>
+            )}
           </MuiMenuItem>
         );
       }),
     [hasMultipleChoices, normalizedOptions, internalSelectedValues],
   );
-
   const renderValue = useCallback(
-    (value: Value) =>
-      Array.isArray(value) && <Chips selection={value} isInteractive={false} />,
+    (value: Value) => Array.isArray(value) && <Chips isInteractive={false} />,
     [Chips],
   );
 
@@ -444,7 +433,6 @@ const Select = <
           {...inputValues}
           aria-describedby={ariaDescribedBy}
           aria-errormessage={errorMessageElementId}
-          children={children}
           id={id}
           inputProps={{ "data-se": testId }}
           inputRef={localInputRef}
@@ -456,16 +444,21 @@ const Select = <
           onFocus={onFocus}
           renderValue={hasMultipleChoices ? renderValue : undefined}
           translate={translate}
-        />
-        {hasMultipleChoices && Array.isArray(value) && (
-          <ChipsPositioningContainer odysseyDesignTokens={odysseyDesignTokens}>
-            <Chips selection={value} isInteractive={true} />
-          </ChipsPositioningContainer>
+        >
+          {renderedOptions}
+        </MuiSelect>
+        {hasMultipleChoices && (
+          <>
+            <ChipsPositioningContainer
+              odysseyDesignTokens={odysseyDesignTokens}
+            >
+              <Chips isInteractive={true} />
+            </ChipsPositioningContainer>
+          </>
         )}
       </SelectContainer>
     ),
     [
-      children,
       Chips,
       inputValues,
       hasMultipleChoices,
@@ -474,10 +467,10 @@ const Select = <
       onBlur,
       onChange,
       onFocus,
+      renderedOptions,
       renderValue,
       testId,
       translate,
-      value,
     ],
   );
 

package/src/Tabs.tsx

@@ -121,7 +121,15 @@ const Tabs = ({
   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);
@@ -136,6 +144,36 @@ const Tabs = ({
     }
   }, [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 {
@@ -177,6 +215,7 @@ const Tabs = ({
         onChange={onChange}
         aria-label={ariaLabel}
         variant="scrollable"
+        scrollButtons={scrollButtons}
       >
         {tabs.map((tab, index) => renderTab(tab, index))}
       </MuiTabList>

package/src/Tile.tsx

@@ -77,23 +77,21 @@ const ImageContainer = styled("div", {
 })<{
   odysseyDesignTokens: DesignTokens;
   hasMenuButtonChildren: boolean;
-}>`
-  display: flex;
-  align-items: flex-start;
-  max-height: ${TILE_IMAGE_HEIGHT};
-  margin-block-end: ${({ odysseyDesignTokens }) =>
-    odysseyDesignTokens.Spacing5};
-  padding-right: ${({ odysseyDesignTokens, hasMenuButtonChildren }) =>
-    hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0};
-`;
+}>(({ odysseyDesignTokens, hasMenuButtonChildren }) => ({
+  display: "flex",
+  alignItems: "flex-start",
+  maxHeight: `${TILE_IMAGE_HEIGHT}`,
+  marginBlockEnd: odysseyDesignTokens.Spacing5,
+  paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0,
+}));
 
 const MenuButtonContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<{ odysseyDesignTokens: DesignTokens }>`
-  position: absolute;
-  right: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing3};
-  top: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing3};
-`;
+})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
+  position: "absolute",
+  right: odysseyDesignTokens.Spacing3,
+  top: odysseyDesignTokens.Spacing3,
+}));
 
 const buttonProviderValue = { isFullWidth: true };