feat: Misc Odyssey updates

packages/odyssey-react-mui/src/Autocomplete.tsx

@@ -60,6 +60,15 @@ export type AutocompleteProps<
     undefined,
     IsCustomValueAllowed
   >["defaultValue"];
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  getOptionLabel?: UseAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["getOptionLabel"];
   /**
    * Enables multiple choice selection
    */
@@ -217,6 +226,7 @@ const Autocomplete = <
   defaultValue,
   errorMessage,
   errorMessageList,
+  getOptionLabel,
   hasMultipleChoices,
   id: idOverride,
   inputValue,
@@ -539,6 +549,7 @@ const Autocomplete = <
       disabled={isDisabled}
       freeSolo={isCustomValueAllowed}
       filterSelectedOptions={true}
+      getOptionLabel={getOptionLabel}
       id={idOverride}
       fullWidth={isFullWidth}
       loading={isLoading}

packages/odyssey-react-mui/src/Grid.tsx

@@ -0,0 +1,134 @@
+/*!
+ * 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 { memo } from "react";
+import { Grid as MuiGrid, GridProps as MuiGridProps } from "@mui/material";
+
+type GridBreakpoints = {
+  /**
+   * If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `lg` breakpoint and wider screens if not overridden.
+   */
+  lg?: MuiGridProps["lg"];
+  /**
+   * If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `md` breakpoint and wider screens if not overridden.
+   */
+  md?: MuiGridProps["md"];
+  /**
+   * If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `sm` breakpoint and wider screens if not overridden.
+   */
+  sm?: MuiGridProps["sm"];
+  /**
+   * If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for all the screen sizes with the lowest priority.
+   */
+  xs?: MuiGridProps["xs"];
+};
+
+export type GridProps = {
+  /**
+   * The `Grid` content. Will be made up of `<Grid item />` components
+   */
+  children: MuiGridProps["children"];
+  /**
+   * The number of columns.
+   */
+  columns?: MuiGridProps["columns"];
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: MuiGridProps["component"];
+  /**
+   * If true, the component will have the flex container behavior. You should be wrapping items with a container.
+   */
+  container?: MuiGridProps["container"];
+  /**
+   * Defines the horizontal space between the type item components. It overrides the value of the spacing prop.
+   */
+  columnSpacing?: MuiGridProps["columnSpacing"];
+  /**
+   * Defines the flex-direction style property. It is applied for all screen sizes.
+   */
+  direction?: MuiGridProps["direction"];
+  /**
+   * designates the `Grid` component as a child item of it's parent container
+   */
+  item?: MuiGridProps["item"];
+  /**
+   * Defines the vertical space between the type item components. It overrides the value of the spacing prop.
+   */
+  rowSpacing?: MuiGridProps["rowSpacing"];
+  /**
+   * Defines the space between the type item components. It can only be used on a type container component.
+   */
+  spacing?: MuiGridProps["spacing"];
+};
+
+export type GridContainerProps = Pick<
+  GridProps,
+  | "children"
+  | "component"
+  | "columnSpacing"
+  | "direction"
+  | "rowSpacing"
+  | "spacing"
+>;
+
+export type GridItemProps = Pick<GridProps, "children" | "component"> &
+  GridBreakpoints;
+
+const Grid = ({
+  children,
+  columns,
+  component = "div",
+  container,
+  direction,
+  item,
+  rowSpacing,
+  spacing,
+}: GridProps) => {
+  return (
+    <MuiGrid
+      columns={columns}
+      container={container}
+      component={component}
+      direction={direction}
+      item={item}
+      rowSpacing={rowSpacing}
+      spacing={spacing}
+    >
+      {children}
+    </MuiGrid>
+  );
+};
+
+const GridContainer = ({ children, ...props }: GridContainerProps) => {
+  return (
+    <Grid container {...props}>
+      {children}
+    </Grid>
+  );
+};
+
+const GridItem = ({ children, ...props }: GridItemProps) => {
+  return (
+    <Grid item {...props}>
+      {children}
+    </Grid>
+  );
+};
+
+const MemoizedGridContainer = memo(GridContainer);
+MemoizedGridContainer.displayName = "GridContainer";
+
+const MemoizedGridItem = memo(GridItem);
+MemoizedGridItem.displayName = "GridItem";
+
+export { MemoizedGridContainer as GridContainer, MemoizedGridItem as GriItem };

packages/odyssey-react-mui/src/Stack.tsx

@@ -0,0 +1,39 @@
+/*!
+ * 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 { memo } from "react";
+import { Stack as MuiStack, StackProps as MuiStackProps } from "@mui/material";
+
+export type StackProps = {
+  children?: MuiStackProps["children"];
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: MuiStackProps["component"];
+  /**
+   * Defines the flex-direction style property. It is applied for all screen sizes.
+   */
+  direction?: MuiStackProps["direction"];
+  /**
+   * Defines the space between immediate children.
+   */
+  spacing?: MuiStackProps["spacing"];
+};
+
+const Stack = ({ children, spacing }: StackProps) => {
+  return <MuiStack spacing={spacing}>{children}</MuiStack>;
+};
+
+const MemoizedStack = memo(Stack);
+MemoizedStack.displayName = "Stack";
+
+export { MemoizedStack as Stack };

packages/odyssey-react-mui/src/index.ts

@@ -19,6 +19,8 @@ export {
   /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
   Divider,
   /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
+  Grid,
+  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
   InputAdornment,
   /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
   InputBase,
@@ -34,13 +36,16 @@ export {
   Paper,
   /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
   ScopedCssBaseline,
+  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
+  Stack,
   ThemeProvider,
 } from "@mui/material";
 
 export type {
   CssBaselineProps,
   DialogContentTextProps,
   DividerProps,
+  GridProps,
   InputAdornmentProps,
   InputBaseProps,
   ListItemIconProps,
@@ -49,6 +54,7 @@ export type {
   MenuListProps,
   PaperProps,
   ScopedCssBaselineProps,
+  StackProps,
   ThemeOptions,
 } from "@mui/material";
 

packages/odyssey-react-mui/src/labs/datePickerTheme.tsx

@@ -47,10 +47,6 @@ const dateStyles: StateStyles = {
   hoverSelected: ({ theme }) => ({
     backgroundColor: theme.palette.primary.dark,
     color: theme.palette.primary.contrastText,
-
-    "@media (pointer: fine)": {
-      backgroundColor: theme.palette.primary.main,
-    },
   }),
   outsideOfMonth: ({ theme }) => ({
     backgroundColor: "transparent",
@@ -158,8 +154,8 @@ export const datePickerTheme: ThemeOptions = {
             borderStyle: theme.mixins.borderStyle,
             borderWidth: theme.mixins.borderWidth,
             borderRadius: theme.mixins.borderRadius,
-            paddingBlock: theme.spacing(3),
-            paddingInline: theme.spacing(3),
+            paddingBlock: theme.spacing(6),
+            paddingInline: theme.spacing(6),
           },
         }),
       },

packages/odyssey-react-mui/src/theme/palette.ts

@@ -29,7 +29,8 @@ export const palette = ({
       lighter: odysseyTokens.HueBlue50,
       light: odysseyTokens.HueBlue300,
       main: odysseyTokens.HueBlue500,
-      dark: odysseyTokens.HueBlue900,
+      dark: odysseyTokens.HueBlue700,
+      darker: odysseyTokens.HueBlue800,
       contrastText: odysseyTokens.TypographyColorInverse,
     },
     secondary: {

packages/odyssey-react-mui/src/theme/palette.types.ts

@@ -12,9 +12,11 @@
 
 declare module "@mui/material/styles" {
   interface PaletteColor {
+    darker?: string;
     lighter?: string;
   }
   interface SimplePaletteColorOptions {
+    darker?: string;
     lighter?: string;
   }
 }

packages/odyssey-storybook/src/components/odyssey-mui/TextField/TextField.stories.tsx

@@ -317,7 +317,7 @@ export const Multiline: StoryObj<typeof TextField> = {
     isMultiline: true,
     defaultValue: "",
   },
-  storyName: "Multiline (Textarea)",
+  name: "Multiline (Textarea)",
 };
 
 export const Placeholder: StoryObj<typeof TextField> = {