@okta/odyssey-react-mui 1.28.1 → 1.29.0

package/src/theme/components.tsx

@@ -425,7 +425,7 @@ export const components = ({
             display: "none",
           }),
         }),
-        listbox: {
+        listbox: ({ theme }) => ({
           borderWidth: odysseyTokens.BorderWidthMain,
           borderStyle: odysseyTokens.BorderStyleMain,
           borderColor: odysseyTokens.HueNeutral200,
@@ -447,6 +447,15 @@ export const components = ({
               backgroundColor: odysseyTokens.HueNeutral100,
             },
 
+            [`&.${autocompleteClasses.focusVisible}`]: {
+              backgroundColor: "transparent",
+              boxShadow: theme.mixins.insetFocusRing,
+
+              [`&:hover`]: {
+                backgroundColor: odysseyTokens.HueNeutral100,
+              },
+            },
+
             [`&[aria-selected="true"]`]: {
               backgroundColor: "transparent",
               color: odysseyTokens.TypographyColorAction,
@@ -466,7 +475,7 @@ export const components = ({
             marginBlockStart: 0,
             marginBlockEnd: 0,
           },
-        },
+        }),
         loading: {
           paddingBlock: odysseyTokens.Spacing3,
           paddingInline: odysseyTokens.Spacing4,
@@ -2184,7 +2193,7 @@ export const components = ({
       styleOverrides: {
         list: {
           paddingBlock: odysseyTokens.Spacing2,
-          paddingInline: odysseyTokens.Spacing2,
+          paddingInline: `${odysseyTokens.Spacing2} !important`,
           borderRadius: odysseyTokens.BorderRadiusMain,
         },
         root: {
@@ -2198,7 +2207,7 @@ export const components = ({
     },
     MuiMenuItem: {
       styleOverrides: {
-        root: ({ ownerState }) => ({
+        root: ({ ownerState, theme }) => ({
           gap: odysseyTokens.Spacing2,
           minHeight: "unset",
           maxWidth: `calc(55ch - ${odysseyTokens.Spacing4})`,
@@ -2244,6 +2253,7 @@ export const components = ({
           [`&.${menuItemClasses.selected}`]: {
             backgroundColor: "transparent",
             color: odysseyTokens.TypographyColorAction,
+            fontWeight: odysseyTokens.TypographyWeightBodyBold,
 
             "&:hover": {
               backgroundColor: odysseyTokens.PalettePrimaryLighter,
@@ -2252,6 +2262,33 @@ export const components = ({
                 backgroundColor: odysseyTokens.PalettePrimaryLighter,
               },
             },
+
+            [`&.${menuItemClasses.focusVisible}`]: {
+              backgroundColor: odysseyTokens.PalettePrimaryLighter,
+              color: odysseyTokens.TypographyColorAction,
+
+              "&:hover": {
+                backgroundColor: odysseyTokens.PalettePrimaryLighter,
+
+                "@media (hover: none)": {
+                  backgroundColor: odysseyTokens.PalettePrimaryLighter,
+                },
+              },
+            },
+          },
+
+          [`&.${menuItemClasses.focusVisible}`]: {
+            backgroundColor: "transparent",
+            boxShadow: theme.mixins.insetFocusRing,
+
+            "&:hover": {
+              backgroundColor: odysseyTokens.HueNeutral100,
+
+              // Reset on touch devices, it doesn't add specificity
+              "@media (hover: none)": {
+                backgroundColor: "transparent",
+              },
+            },
           },
 
           "&[data-empty='true']": {
@@ -2269,6 +2306,10 @@ export const components = ({
             borderBlockEnd: `1px solid ${odysseyTokens.BorderColorDisplay}`,
           }),
 
+          ...(!ownerState.isFullWidth && {
+            maxWidth: "100%",
+          }),
+
           [`&.${menuItemClasses.disabled}`]: {
             opacity: 1,
             color: odysseyTokens.TypographyColorDisabled,

package/src/theme/mixins.ts

@@ -24,5 +24,6 @@ export const mixins = ({
     borderRadius: odysseyTokens.BorderRadiusMain,
     borderStyle: odysseyTokens.BorderStyleMain,
     borderWidth: odysseyTokens.BorderWidthMain,
+    insetFocusRing: `inset 0 0 0 2px ${odysseyTokens.PalettePrimaryMain}`,
   };
 };

package/src/theme/mixins.types.ts

@@ -16,6 +16,7 @@ declare module "@mui/material/styles" {
     borderStyle?: string;
     borderWidth?: string;
     maxWidth?: string;
+    insetFocusRing?: string;
   }
 
   interface MixinsOptions {
@@ -23,6 +24,7 @@ declare module "@mui/material/styles" {
     borderStyle?: string;
     borderWidth?: string;
     maxWidth?: string;
+    insetFocusRing?: string;
   }
 }
 

package/src/{labs → ui-shell}/UiShell/UiShell.tsx

@@ -50,6 +50,7 @@ export type UiShellProps = {
     UiShellContentProps,
     | "appBackgroundContrastMode"
     | "appComponent"
+    | "hasStandardAppContentPadding"
     | "initialVisibleSections"
     | "onError"
     | "optionalComponents"
@@ -66,6 +67,7 @@ const UiShell = ({
   appBackgroundContrastMode,
   appComponent,
   appRootElement,
+  hasStandardAppContentPadding,
   initialVisibleSections,
   onError = console.error,
   onSubscriptionCreated,
@@ -101,6 +103,7 @@ const UiShell = ({
             {...componentProps}
             appBackgroundContrastMode={appBackgroundContrastMode}
             appComponent={appComponent}
+            hasStandardAppContentPadding={hasStandardAppContentPadding}
             initialVisibleSections={initialVisibleSections}
             onError={onError}
             optionalComponents={optionalComponents}

package/src/{labs → ui-shell}/UiShell/UiShellContent.tsx

@@ -14,9 +14,9 @@ import styled from "@emotion/styled";
 import { memo, type ReactElement, type ReactNode } from "react";
 import { ErrorBoundary, ErrorBoundaryProps } from "react-error-boundary";
 
-import { AppSwitcher, type AppSwitcherProps } from "../AppSwitcher";
-import { SideNav, type SideNavProps } from "../SideNav";
-import { TopNav, type TopNavProps } from "../TopNav";
+import { AppSwitcher, type AppSwitcherProps } from "../../labs/AppSwitcher";
+import { SideNav, type SideNavProps } from "../../labs/SideNav";
+import { TopNav, type TopNavProps } from "../../labs/TopNav";
 import {
   useOdysseyDesignTokens,
   type DesignTokens,
@@ -28,21 +28,33 @@ const emptySideNavItems = [] satisfies SideNavProps["sideNavItems"];
 
 const StyledAppContainer = styled("div", {
   shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" && prop !== "appBackgroundContrastMode",
+    prop !== "odysseyDesignTokens" &&
+    prop !== "appBackgroundContrastMode" &&
+    prop !== "hasStandardAppContentPadding",
 })<{
   appBackgroundContrastMode: ContrastMode;
+  hasStandardAppContentPadding: UiShellContentProps["hasStandardAppContentPadding"];
   odysseyDesignTokens: DesignTokens;
-}>(({ appBackgroundContrastMode, odysseyDesignTokens }) => ({
-  gridArea: "app-content",
-  overflowX: "hidden",
-  overflowY: "auto",
-  paddingBlock: odysseyDesignTokens.Spacing5,
-  paddingInline: odysseyDesignTokens.Spacing8,
-  backgroundColor:
-    appBackgroundContrastMode === "highContrast"
-      ? odysseyDesignTokens.HueNeutralWhite
-      : odysseyDesignTokens.HueNeutral50,
-}));
+}>(
+  ({
+    appBackgroundContrastMode,
+    hasStandardAppContentPadding,
+    odysseyDesignTokens,
+  }) => ({
+    gridArea: "app-content",
+    overflowX: "hidden",
+    overflowY: "auto",
+    backgroundColor:
+      appBackgroundContrastMode === "highContrast"
+        ? odysseyDesignTokens.HueNeutralWhite
+        : odysseyDesignTokens.HueNeutral50,
+
+    ...(hasStandardAppContentPadding && {
+      paddingBlock: odysseyDesignTokens.Spacing5,
+      paddingInline: odysseyDesignTokens.Spacing8,
+    }),
+  }),
+);
 
 const StyledBannersContainer = styled("div")(() => ({
   gridArea: "banners",
@@ -88,13 +100,16 @@ export type UiShellNavComponentProps = {
    */
   appSwitcherProps?: AppSwitcherProps;
   /**
-   * Object that gets pass directly to the side nav component.
+   * Object that gets pass directly to the side nav component. If `undefined` and in `initialVisibleSections`, SideNav will be initially rendered. Pass `null` to hide a previously-visible SideNav.
    */
-  sideNavProps?: Omit<SideNavProps, "footerComponent">;
+  sideNavProps?: Omit<SideNavProps, "footerComponent"> | null;
   /**
-   * Object that gets pass directly to the top nav component.
+   * Object that gets pass directly to the top nav component. If `undefined` and in `initialVisibleSections`, TopNav will be initially rendered. Pass `null` to hide a previously-visible TopNav.
    */
-  topNavProps?: Omit<TopNavProps, "leftSideComponent" | "rightSideComponent">;
+  topNavProps?: Omit<
+    TopNavProps,
+    "leftSideComponent" | "rightSideComponent"
+  > | null;
 };
 
 export type UiShellContentProps = {
@@ -106,6 +121,10 @@ export type UiShellContentProps = {
    * React app component that renders as children in the correct location of the shell.
    */
   appComponent: ReactNode;
+  /**
+   * defaults to `true`. If `false`, the content area will have no padding provided
+   */
+  hasStandardAppContentPadding?: boolean;
   /**
    * Which parts of the UI Shell should be visible initially? For example,
    * if sideNavProps is undefined, should the space for the sidenav be initially visible?
@@ -136,6 +155,7 @@ export type UiShellContentProps = {
 const UiShellContent = ({
   appBackgroundContrastMode = "lowContrast",
   appComponent,
+  hasStandardAppContentPadding = true,
   initialVisibleSections = ["TopNav", "SideNav", "AppSwitcher"],
   onError = console.error,
   optionalComponents,
@@ -172,11 +192,16 @@ const UiShellContent = ({
       <StyledSideNavContainer>
         {
           /* If SideNav should be initially visible and we have not yet received props, render SideNav with minimal inputs */
-          initialVisibleSections?.includes("SideNav") && !sideNavProps && (
-            <ErrorBoundary fallback={null} onError={onError}>
-              <SideNav isLoading appName="" sideNavItems={emptySideNavItems} />
-            </ErrorBoundary>
-          )
+          initialVisibleSections?.includes("SideNav") &&
+            sideNavProps === undefined && (
+              <ErrorBoundary fallback={null} onError={onError}>
+                <SideNav
+                  isLoading
+                  appName=""
+                  sideNavItems={emptySideNavItems}
+                />
+              </ErrorBoundary>
+            )
         }
         {sideNavProps && (
           <ErrorBoundary fallback={null} onError={onError}>
@@ -199,15 +224,18 @@ const UiShellContent = ({
           </ErrorBoundary>
         )}
       </StyledSideNavContainer>
-
       <StyledTopNavContainer>
         {
           /* If TopNav should be initially visible and we have not yet received props, render Topnav with minimal inputs */
-          initialVisibleSections?.includes("TopNav") && !topNavProps && (
-            <ErrorBoundary fallback={null} onError={onError}>
-              <TopNav />
-            </ErrorBoundary>
-          )
+          initialVisibleSections?.includes("TopNav") &&
+            topNavProps === undefined && (
+              <ErrorBoundary fallback={null} onError={onError}>
+                <TopNav
+                  leftSideComponent={optionalComponents?.topNavLeftSide}
+                  rightSideComponent={optionalComponents?.topNavRightSide}
+                />
+              </ErrorBoundary>
+            )
         }
         {topNavProps && (
           <ErrorBoundary fallback={null} onError={onError}>
@@ -222,8 +250,9 @@ const UiShellContent = ({
       </StyledTopNavContainer>
 
       <StyledAppContainer
-        odysseyDesignTokens={odysseyDesignTokens}
         appBackgroundContrastMode={appBackgroundContrastMode}
+        hasStandardAppContentPadding={hasStandardAppContentPadding}
+        odysseyDesignTokens={odysseyDesignTokens}
         ref={scrollableContentRef}
         tabIndex={0}
       >

package/src/{labs → ui-shell}/UiShell/renderUiShell.test.tsx

@@ -10,13 +10,13 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { act, waitFor } from "@testing-library/react";
+import { act } from "@testing-library/react";
 
 import { renderUiShell } from "./renderUiShell";
 import {
   ReactInWebComponentElement,
   reactWebComponentElementName,
-} from "../../web-component/renderReactInWebComponent";
+} from "../renderReactInWebComponent";
 
 describe("renderUiShell", () => {
   afterEach(() => {
@@ -126,11 +126,9 @@ describe("renderUiShell", () => {
       });
     });
 
-    await waitFor(() => {
-      expect(
-        rootElement.querySelector(reactWebComponentElementName)!.shadowRoot,
-      ).toHaveTextContent(appName);
-    });
+    expect(
+      rootElement.querySelector(reactWebComponentElementName)!.shadowRoot,
+    ).toHaveTextContent(appName);
   });
 
   test("renders `UiShell` with immediately updated props", async () => {
@@ -155,11 +153,9 @@ describe("renderUiShell", () => {
       });
     });
 
-    await waitFor(() => {
-      expect(
-        rootElement.querySelector(reactWebComponentElementName)!.shadowRoot,
-      ).toHaveTextContent(appName);
-    });
+    expect(
+      rootElement.querySelector(reactWebComponentElementName)!.shadowRoot,
+    ).toHaveTextContent(appName);
   });
 
   test("renders `<slot>` in the event of an error", async () => {
@@ -188,16 +184,14 @@ describe("renderUiShell", () => {
       );
     });
 
-    await waitFor(() => {
-      expect(onError).toHaveBeenCalledTimes(1);
-      expect(consoleError).toHaveBeenCalledTimes(1);
-      expect(
-        rootElement
-          .querySelector(reactWebComponentElementName)!
-          .shadowRoot?.querySelector("slot"),
-      ).toBeInstanceOf(HTMLSlotElement);
-    });
-
     consoleErrorSpy.mockRestore();
+
+    expect(onError).toHaveBeenCalledTimes(1);
+    expect(consoleError).toHaveBeenCalledTimes(1);
+    expect(
+      rootElement
+        .querySelector(reactWebComponentElementName)!
+        .shadowRoot?.querySelector("slot"),
+    ).toBeInstanceOf(HTMLSlotElement);
   });
 });

package/src/{labs → ui-shell}/UiShell/renderUiShell.tsx

@@ -16,10 +16,9 @@ import { ErrorBoundary } from "react-error-boundary";
 import { bufferLatest } from "./bufferLatest";
 import { createMessageBus } from "./createMessageBus";
 import { UiShell, UiShellProps } from "./UiShell";
-import { renderReactInWebComponent } from "../../web-component/renderReactInWebComponent";
+import { renderReactInWebComponent } from "../renderReactInWebComponent";
 import { type UiShellNavComponentProps } from "./UiShellContent";
-
-export const uiShellDataAttribute = "data-unified-ui-shell";
+import { uiShellDataAttribute } from "./useHasUiShell";
 
 export const optionalComponentSlotNames: Record<
   keyof Required<UiShellProps>["optionalComponents"],
@@ -43,6 +42,7 @@ export const optionalComponentSlotNames: Record<
 export const renderUiShell = ({
   appBackgroundContrastMode,
   appRootElement: explicitAppRootElement,
+  hasStandardAppContentPadding,
   initialVisibleSections,
   onError = console.error,
   uiShellRootElement,
@@ -61,7 +61,9 @@ export const renderUiShell = ({
   uiShellRootElement: HTMLElement;
 } & Pick<
   UiShellProps,
-  "appBackgroundContrastMode" | "initialVisibleSections"
+  | "appBackgroundContrastMode"
+  | "hasStandardAppContentPadding"
+  | "initialVisibleSections"
 >) => {
   const appRootElement =
     explicitAppRootElement || document.createElement("div");
@@ -109,6 +111,7 @@ export const renderUiShell = ({
           appBackgroundContrastMode={appBackgroundContrastMode}
           appComponent={appComponent}
           appRootElement={reactRootElements.appRootElement}
+          hasStandardAppContentPadding={hasStandardAppContentPadding}
           initialVisibleSections={initialVisibleSections}
           onError={onError}
           onSubscriptionCreated={publishSubscriptionCreated}

package/src/{labs → ui-shell}/UiShell/useHasUiShell.ts

@@ -12,7 +12,7 @@
 
 import { useEffect, useState } from "react";
 
-import { uiShellDataAttribute } from "./renderUiShell";
+export const uiShellDataAttribute = "data-unified-ui-shell";
 
 export const useHasUiShell = () => {
   const [hasUiShell, setHasUiShell] = useState(false);

package/src/ui-shell/index.ts

@@ -0,0 +1,14 @@
+/*!
+ * 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.
+ */
+
+export * from "./UiShell";
+export * from "./renderReactInWebComponent";

package/src/{web-component → ui-shell}/renderReactInWebComponent.test.tsx

@@ -12,8 +12,8 @@
 
 import { waitFor } from "@testing-library/dom";
 
+import { createReactRootElements } from "../web-component";
 import {
-  createReactRootElements,
   ReactInWebComponentElement,
   reactWebComponentElementName,
   renderReactInWebComponent,

package/src/{web-component → ui-shell}/renderReactInWebComponent.ts

@@ -11,42 +11,11 @@
  */
 
 import { type ReactNode } from "react";
-import type { Root } from "react-dom/client";
-
-/**
- * Creates elements for a Shadow DOM that Odyssey will render into.
- * The Emotion root is for `<style>` tags and the app root is for an app to render into.
- * These are bare elements that
- */
-export const createReactRootElements = () => {
-  const appRootElement = document.createElement("div");
-  const stylesRootElement = document.createElement("div");
-
-  // This `div` may cause layout issues unless it inherits the parent's height.
-  appRootElement.style.setProperty("height", "inherit");
-
-  appRootElement.setAttribute("id", "app-root");
-  stylesRootElement.setAttribute("id", "style-root");
-  stylesRootElement.setAttribute("nonce", window.cspNonce);
-
-  return {
-    /**
-     * The element your React root component renders into.
-     * React has to render or portal somewhere, and this element can be used for that root element.
-     *
-     * In the case of a web component, there is no defined root element, so you have to define it yourself.
-     */
-    appRootElement,
-    /**
-     * In React apps, your styles typically go in `document.head`, but you may want to render them somewhere else.
-     *
-     * Specifically when rendering in a web component, there is no `<head>`, so you have to create a spot for styles to render.
-     */
-    stylesRootElement,
-  };
-};
-
-export type ReactRootElements = ReturnType<typeof createReactRootElements>;
+import { createRoot, type Root } from "react-dom/client";
+import {
+  createReactRootElements,
+  type ReactRootElements,
+} from "../web-component";
 
 export const reactWebComponentElementName = "odyssey-react-web-component";
 
@@ -56,8 +25,8 @@ export type GetReactComponentInWebComponent = (
 
 export class ReactInWebComponentElement extends HTMLElement {
   getReactComponent: GetReactComponentInWebComponent;
+  reactRoot: Root;
   reactRootElements: ReactRootElements;
-  reactRootPromise: Promise<Root>;
 
   constructor(getReactComponent: GetReactComponentInWebComponent) {
     super();
@@ -81,20 +50,15 @@ export class ReactInWebComponentElement extends HTMLElement {
     shadowRoot.appendChild(this.reactRootElements.stylesRootElement);
     shadowRoot.appendChild(this.reactRootElements.appRootElement);
 
-    // If we want to support React v17 in the future, we can use a try-catch on the import to grab the old `ReactDOM.render` function if `react-dom/client` errors. --Kevin Ghadyani
-    this.reactRootPromise = import("react-dom/client").then(({ createRoot }) =>
-      createRoot(this.reactRootElements.appRootElement),
-    );
+    this.reactRoot = createRoot(this.reactRootElements.appRootElement);
   }
 
   connectedCallback() {
-    this.reactRootPromise.then((reactRoot) =>
-      reactRoot.render(this.getReactComponent(this.reactRootElements)),
-    );
+    this.reactRoot.render(this.getReactComponent(this.reactRootElements));
   }
 
   disconnectedCallback() {
-    this.reactRootPromise.then((reactRoot) => reactRoot.unmount());
+    this.reactRoot.unmount();
   }
 }
 

package/src/web-component/index.ts

@@ -10,5 +10,4 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export * from "./renderReactInWebComponent";
 export * from "./shadow-dom";

package/src/web-component/shadow-dom.ts

@@ -10,10 +10,43 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { createReactRootElements } from "./renderReactInWebComponent";
+/**
+ * Creates elements for a Shadow DOM that Odyssey will render into.
+ * The Emotion root is for `<style>` tags and the app root is for an app to render into.
+ * These are bare elements that
+ */
+export const createReactRootElements = () => {
+  const appRootElement = document.createElement("div");
+  const stylesRootElement = document.createElement("div");
+
+  // This `div` may cause layout issues unless it inherits the parent's height.
+  appRootElement.style.setProperty("height", "inherit");
+
+  appRootElement.setAttribute("id", "app-root");
+  stylesRootElement.setAttribute("id", "style-root");
+  stylesRootElement.setAttribute("nonce", window.cspNonce);
+
+  return {
+    /**
+     * The element your React root component renders into.
+     * React has to render or portal somewhere, and this element can be used for that root element.
+     *
+     * In the case of a web component, there is no defined root element, so you have to define it yourself.
+     */
+    appRootElement,
+    /**
+     * In React apps, your styles typically go in `document.head`, but you may want to render them somewhere else.
+     *
+     * Specifically when rendering in a web component, there is no `<head>`, so you have to create a spot for styles to render.
+     */
+    stylesRootElement,
+  };
+};
+
+export type ReactRootElements = ReturnType<typeof createReactRootElements>;
 
 /**
- * @deprecated Use `renderReactInWebComponent` instead. This function was necessary when using bare Shadow DOM, but with UI Shell rendering in a Web Component, you won't be able to render your Shadow DOM in its Shadow DOM without using a Web Component.
+ * @deprecated Use `renderReactInWebComponent` from `@okta/odyssey-react-mui/ui-shell` instead. This function was necessary when using bare Shadow DOM, but with UI Shell rendering in a Web Component, you won't be able to render your Shadow DOM in its Shadow DOM without using a Web Component.
  */
 export const createShadowDomElements = (containerElement: HTMLElement) => {
   const shadowRoot = containerElement.attachShadow({ mode: "open" });
@@ -32,7 +65,7 @@ export const createShadowDomElements = (containerElement: HTMLElement) => {
 
 /**
  * @deprecated Use `createShadowDomElements` instead which returns an object instead of an array. It's otherwise the same.
- * @deprecated Ideally, use `renderReactInWebComponent` instead. This function was necessary when using bare Shadow DOM, but with UI Shell rendering in a Web Component, you won't be able to render your Shadow DOM in its Shadow DOM without using a Web Component. */
+ * @deprecated Ideally, use `renderReactInWebComponent` from `@okta/odyssey-react-mui/ui-shell` instead. This function was necessary when using bare Shadow DOM, but with UI Shell rendering in a Web Component, you won't be able to render your Shadow DOM in its Shadow DOM without using a Web Component. */
 export const createShadowRootElement = (
   containerElement: HTMLElement,
 ): [HTMLStyleElement, HTMLDivElement] => {

package/dist/labs/DateField.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DateField.js","names":["memo","useCallback","useEffect","useImperativeHandle","useRef","useState","DateField","MuiDateField","useTranslation","Field","jsx","_jsx","Fragment","_Fragment","useOdysseyDateError","t","Map","formatDateTimeToUtcIsoDateString","value","toUTC","toISO","defaultValue","endAdornment","errorMessage","hasInitialFocus","hint","HintLinkComponent","id","idOverride","inputRef","isDisabled","isOptional","isReadOnly","label","minDate","maxDate","onBlur","onChange","onFocus","timezone","errorMap","displayedErrorMessage","setDisplayedErrorMessage","internalValidationError","localInputRef","focus","current","checkMinMaxValidity","hasMinError","hasMaxError","get","clearErrorMessages","undefined","validateAndCallOnChange","validationContext","validationError","hasEnteredFullYear","year","toString","length","odysseyValidationError","isValid","dateStringFromDateTime","checkFieldValidityAndSetError","event","hasVisibleAdornment","renderFieldComponent","ariaDescribedBy","errorMessageElementId","labelElementId","autoFocus","disabled","inputProps","InputProps","error","Boolean","children","_InputAdornment","position","name","readOnly","variant","fieldType","hasVisibleLabel","MemoizedDateField","displayName"],"sources":["../../src/labs/DateField.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  FocusEventHandler,\n  memo,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\nimport { InputAdornment } from \"@mui/material\";\nimport {\n  DateField as MuiDateField,\n  DateFieldProps as MuiDateFieldProps,\n  DateValidationError,\n} from \"@mui/x-date-pickers\";\nimport { DateTime } from \"luxon\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Field, RenderFieldComponentProps } from \"../Field\";\nimport { TextFieldProps } from \"../TextField\";\n\nexport type DateFieldProps = {\n  onChange?: (value: string) => void;\n} & Pick<\n  MuiDateFieldProps<DateTime>,\n  \"defaultValue\" | \"inputRef\" | \"minDate\" | \"maxDate\" | \"timezone\" | \"value\"\n> &\n  Pick<\n    TextFieldProps,\n    | \"endAdornment\"\n    | \"errorMessage\"\n    | \"hasInitialFocus\"\n    | \"hint\"\n    | \"HintLinkComponent\"\n    | \"id\"\n    | \"isDisabled\"\n    | \"isOptional\"\n    | \"isReadOnly\"\n    | \"label\"\n    | \"onBlur\"\n    | \"onFocus\"\n  >;\n\nconst useOdysseyDateError = () => {\n  const { t } = useTranslation();\n\n  return new Map<DateValidationError, string>([\n    [\"invalidDate\", t(\"picker.error.invalid\")],\n    [\"maxDate\", t(\"picker.error.maxdate\")],\n    [\"minDate\", t(\"picker.error.mindate\")],\n  ]);\n};\n\nconst formatDateTimeToUtcIsoDateString = (value: DateTime) =>\n  value.toUTC().toISO();\n\nconst DateField = ({\n  defaultValue,\n  endAdornment,\n  errorMessage,\n  hasInitialFocus,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  inputRef,\n  isDisabled = false,\n  isOptional = false,\n  isReadOnly,\n  label,\n  minDate,\n  maxDate,\n  onBlur,\n  onChange,\n  onFocus,\n  timezone,\n  value,\n}: DateFieldProps) => {\n  const errorMap = useOdysseyDateError();\n  const [displayedErrorMessage, setDisplayedErrorMessage] =\n    useState(errorMessage);\n\n  const internalValidationError = useRef<string | undefined>();\n  const localInputRef = useRef<HTMLInputElement>(null);\n\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    [],\n  );\n\n  const checkMinMaxValidity = useCallback(\n    (value: DateTime) => {\n      const hasMinError = minDate && value.toUTC() < minDate.toUTC();\n      const hasMaxError = maxDate && value.toUTC() > maxDate.toUTC();\n\n      if (hasMinError || hasMaxError) {\n        if (hasMinError) {\n          setDisplayedErrorMessage(errorMap.get(\"minDate\"));\n        }\n\n        if (hasMaxError) {\n          setDisplayedErrorMessage(errorMap.get(\"maxDate\"));\n        }\n\n        return false;\n      }\n\n      return true;\n    },\n    [errorMap, minDate, maxDate],\n  );\n\n  useEffect(() => {\n    if (value) {\n      checkMinMaxValidity(value);\n    }\n\n    if (defaultValue) {\n      checkMinMaxValidity(defaultValue);\n    }\n  }, [checkMinMaxValidity, defaultValue, minDate, maxDate, value]);\n\n  const clearErrorMessages = useCallback(() => {\n    setDisplayedErrorMessage(undefined);\n    internalValidationError.current = undefined;\n  }, [internalValidationError, setDisplayedErrorMessage]);\n\n  const validateAndCallOnChange = useCallback<\n    NonNullable<MuiDateFieldProps<DateTime>[\"onChange\"]>\n  >(\n    (value, validationContext) => {\n      clearErrorMessages();\n      const { validationError } = validationContext;\n      const hasEnteredFullYear = value?.year.toString().length === 4;\n\n      if (validationError) {\n        const odysseyValidationError = errorMap.get(validationError);\n\n        if (odysseyValidationError) {\n          internalValidationError.current = odysseyValidationError;\n\n          if (value?.isValid && hasEnteredFullYear) {\n            setDisplayedErrorMessage(odysseyValidationError);\n          }\n        }\n      }\n\n      if (value?.isValid && !validationError) {\n        const dateStringFromDateTime = formatDateTimeToUtcIsoDateString(value);\n\n        if (dateStringFromDateTime && checkMinMaxValidity(value)) {\n          onChange?.(dateStringFromDateTime);\n        }\n      }\n    },\n    [checkMinMaxValidity, clearErrorMessages, errorMap, onChange],\n  );\n\n  const checkFieldValidityAndSetError = useCallback<\n    FocusEventHandler<HTMLInputElement>\n  >(\n    (event) => {\n      if (internalValidationError?.current && !displayedErrorMessage) {\n        setDisplayedErrorMessage(internalValidationError.current);\n      }\n      onBlur?.(event);\n    },\n    [displayedErrorMessage, internalValidationError, onBlur],\n  );\n\n  const hasVisibleAdornment = !isReadOnly && !isDisabled;\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: RenderFieldComponentProps) => (\n      <MuiDateField\n        /* eslint-disable-next-line jsx-a11y/no-autofocus */\n        autoFocus={hasInitialFocus}\n        defaultValue={defaultValue}\n        disabled={isDisabled}\n        id={id}\n        inputProps={{\n          \"aria-describedby\": ariaDescribedBy,\n          \"aria-errormessage\": errorMessageElementId,\n          \"aria-labelledby\": labelElementId,\n        }}\n        InputProps={{\n          error: Boolean(displayedErrorMessage || errorMessage),\n          endAdornment: (\n            <>\n              {hasVisibleAdornment && (\n                <InputAdornment position=\"end\">{endAdornment}</InputAdornment>\n              )}\n            </>\n          ),\n        }}\n        inputRef={localInputRef}\n        minDate={minDate}\n        maxDate={maxDate}\n        name={id}\n        onBlur={checkFieldValidityAndSetError}\n        onChange={validateAndCallOnChange}\n        onFocus={onFocus}\n        readOnly={isReadOnly}\n        timezone={timezone}\n        value={value}\n        variant=\"standard\"\n      />\n    ),\n    [\n      checkFieldValidityAndSetError,\n      defaultValue,\n      displayedErrorMessage,\n      endAdornment,\n      errorMessage,\n      hasInitialFocus,\n      hasVisibleAdornment,\n      isDisabled,\n      localInputRef,\n      minDate,\n      maxDate,\n      onFocus,\n      isReadOnly,\n      timezone,\n      validateAndCallOnChange,\n      value,\n    ],\n  );\n\n  return (\n    <Field\n      errorMessage={displayedErrorMessage || errorMessage}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedDateField = memo(DateField);\nMemoizedDateField.displayName = \"DateField\";\n\nexport { MemoizedDateField as DateField };\n"],"mappings":"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"}