@okta/odyssey-react-mui 1.24.1 → 1.26.0

package/src/labs/UiShell/renderUiShell.test.tsx

@@ -0,0 +1,197 @@
+/*!
+ * 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 { act } from "@testing-library/react";
+
+import { renderUiShell } from "./renderUiShell";
+import {
+  ReactInWebComponentElement,
+  reactWebComponentElementName,
+} from "../../web-component/renderReactInWebComponent";
+
+describe("renderUiShell", () => {
+  afterEach(() => {
+    // This needs to be wrapped in `act` because the web component unmounts the React app, and React events have to be wrapped in `act`.
+    act(() => {
+      // Remove any appended elements because of this hacky process of rendering to the global DOM.
+      document.body.innerHTML = "";
+    });
+  });
+
+  test("returns app root element", async () => {
+    const rootElement = document.createElement("div");
+
+    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
+    document.body.append(rootElement);
+
+    act(() => {
+      const { appRootElement } = renderUiShell({
+        uiShellRootElement: rootElement,
+      });
+
+      expect(appRootElement).toBeInstanceOf(HTMLDivElement);
+    });
+  });
+
+  test("returns slotted elements", async () => {
+    const rootElement = document.createElement("div");
+
+    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
+    document.body.append(rootElement);
+
+    act(() => {
+      const { slottedElements } = renderUiShell({
+        uiShellRootElement: rootElement,
+      });
+
+      expect(slottedElements.banners).toBeInstanceOf(HTMLDivElement);
+      expect(slottedElements.sideNavFooter).toBeInstanceOf(HTMLDivElement);
+      expect(slottedElements.topNavLeftSide).toBeInstanceOf(HTMLDivElement);
+      expect(slottedElements.topNavRightSide).toBeInstanceOf(HTMLDivElement);
+    });
+  });
+
+  test("returns ui shell root element", async () => {
+    const rootElement = document.createElement("div");
+
+    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
+    document.body.append(rootElement);
+
+    act(() => {
+      const { uiShellElement } = renderUiShell({
+        uiShellRootElement: rootElement,
+      });
+
+      expect(uiShellElement).toBeInstanceOf(ReactInWebComponentElement);
+    });
+  });
+
+  test("renders `UiShell` component in a web component", async () => {
+    const rootElement = document.createElement("div");
+
+    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
+    document.body.append(rootElement);
+
+    // This needs to be wrapped in `act` because the web component mounts the React app, and React events have to be wrapped in `act`.
+    act(() => {
+      renderUiShell({
+        uiShellRootElement: rootElement,
+      });
+    });
+
+    expect(
+      Array.from(
+        rootElement.querySelector(reactWebComponentElementName)!.shadowRoot!
+          .children,
+      ).length,
+    ).toBeGreaterThan(0);
+  });
+
+  test("renders `UiShell` with updated props", async () => {
+    const rootElement = document.createElement("div");
+    const appName = "Hello World!";
+
+    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
+    document.body.append(rootElement);
+
+    let setComponentProps: ReturnType<
+      typeof renderUiShell
+    >["setComponentProps"];
+
+    // This needs to be wrapped in `act` because the web component mounts the React app, and React events have to be wrapped in `act`.
+    act(() => {
+      const renderUiShellReturnValue = renderUiShell({
+        uiShellRootElement: rootElement,
+      });
+
+      setComponentProps = renderUiShellReturnValue.setComponentProps;
+    });
+
+    act(() => {
+      setComponentProps({
+        sideNavProps: {
+          appName,
+          sideNavItems: [],
+        },
+        topNavProps: {},
+      });
+    });
+
+    expect(
+      rootElement.querySelector(reactWebComponentElementName)!.shadowRoot,
+    ).toHaveTextContent(appName);
+  });
+
+  test("renders `UiShell` with immediately updated props", async () => {
+    const rootElement = document.createElement("div");
+    const appName = "Hello World!";
+
+    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
+    document.body.append(rootElement);
+
+    // This needs to be wrapped in `act` because the web component mounts the React app, and React events have to be wrapped in `act`.
+    act(() => {
+      const { setComponentProps } = renderUiShell({
+        uiShellRootElement: rootElement,
+      });
+
+      setComponentProps({
+        sideNavProps: {
+          appName,
+          sideNavItems: [],
+        },
+        topNavProps: {},
+      });
+    });
+
+    expect(
+      rootElement.querySelector(reactWebComponentElementName)!.shadowRoot,
+    ).toHaveTextContent(appName);
+  });
+
+  test("renders `<slot>` in the event of an error", async () => {
+    const rootElement = document.createElement("div");
+    const consoleError = jest.fn();
+    const onError = jest.fn();
+
+    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
+    document.body.append(rootElement);
+
+    const consoleErrorSpy = jest
+      .spyOn(console, "error")
+      .mockImplementation(consoleError);
+
+    await act(() => {
+      const { setComponentProps } = renderUiShell({
+        onError,
+        uiShellRootElement: rootElement,
+      });
+
+      setComponentProps(
+        // We're purposefully testing an error state, so we need to send something that will cause an error.
+        () => {
+          throw new Error("TEST BREAK!");
+        },
+      );
+    });
+
+    consoleErrorSpy.mockRestore();
+
+    expect(onError).toHaveBeenCalledTimes(1);
+    expect(consoleError).toHaveBeenCalledTimes(1);
+    expect(
+      rootElement
+        .querySelector(reactWebComponentElementName)!
+        .shadowRoot?.querySelector("slot"),
+    ).toBeInstanceOf(HTMLSlotElement);
+  });
+});

package/src/labs/UiShell/renderUiShell.tsx

@@ -0,0 +1,132 @@
+/*!
+ * 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 { type SetStateAction } from "react";
+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 { type UiShellNavComponentProps } from "./UiShellContent";
+
+export const uiShellDataAttribute = "data-unified-ui-shell";
+
+export const optionalComponentSlotNames: Record<
+  keyof Required<UiShellProps>["optionalComponents"],
+  string
+> = {
+  banners: "banners",
+  sideNavFooter: "side-nav-footer",
+  topNavLeftSide: "top-nav-left-side",
+  topNavRightSide: "top-nav-right-side",
+};
+
+/**
+ * This function renders UI Shell in a web component.
+ * This function is agnostic to the UI framework for your app is using. Your application can be another web component, a React app, or even vanilla HTML.
+ *
+ * **All styles are self-contained.** Even though your application visually renders as children of the web component, its within the global `document` scope, not the web component's `ShadowRoot`. That means any global styles will not affect UI Shell but will affect your application.
+ *
+ * It places your app's root element in a web component <slot> and ensures it remains rendered in the event of a UI Shell error.
+ * It also provides you with other elements fitted to slots in the web component. **In React, you can portal to these components.**
+ */
+export const renderUiShell = ({
+  appRootElement: explicitAppRootElement,
+  onError = console.error,
+  uiShellRootElement,
+}: {
+  /**
+   * HTML element used as the root for a React app.
+   */
+  appRootElement?: HTMLDivElement;
+  /**
+   * Notifies when a React rendering error occurs. This could be useful for logging, reporting priority 0 issues, and recovering UI Shell when errors occur.
+   */
+  onError?: () => void;
+  /**
+   * HTML element used as the root for UI Shell.
+   */
+  uiShellRootElement: HTMLElement;
+}) => {
+  const appRootElement =
+    explicitAppRootElement || document.createElement("div");
+
+  // Add this attribute so `PageTemplate` and potentially other components will know if they're in UI Shell with special padding already available.
+  uiShellRootElement.setAttribute(uiShellDataAttribute, "");
+
+  const { publish: publishPropChanges, subscribe: subscribeToPropChanges } =
+    createMessageBus<SetStateAction<UiShellNavComponentProps>>();
+
+  const {
+    publish: publishSubscriptionCreated,
+    subscribe: subscribeToReactAppSubscribed,
+  } = createMessageBus();
+
+  const publishAfterReactAppReadyForProps = bufferLatest({
+    publish: publishPropChanges,
+    subscribe: subscribeToReactAppSubscribed,
+  });
+
+  const slottedElements = Object.fromEntries(
+    Object.entries(optionalComponentSlotNames).map(
+      ([optionalComponentKey, slotName]) => {
+        const element = document.createElement("div");
+
+        element.setAttribute("slot", slotName);
+
+        return [optionalComponentKey, element];
+      },
+    ),
+  ) as Record<
+    keyof Required<UiShellProps>["optionalComponents"],
+    HTMLDivElement
+  >;
+
+  const webComponentChildren =
+    Object.values(slottedElements).concat(appRootElement);
+
+  const appComponent = <slot />;
+
+  const uiShellElement = renderReactInWebComponent({
+    getReactComponent: (reactRootElements) => (
+      <ErrorBoundary fallback={appComponent} onError={onError}>
+        <UiShell
+          appComponent={appComponent}
+          appRootElement={reactRootElements.appRootElement}
+          onError={onError}
+          onSubscriptionCreated={publishSubscriptionCreated}
+          // `optionalComponents` doesn't need to be memoized because gets passed in once.
+          optionalComponents={Object.fromEntries(
+            Object.entries(optionalComponentSlotNames).map(
+              ([optionalComponentKey, slotName]) => [
+                optionalComponentKey,
+                <slot name={slotName} />,
+              ],
+            ),
+          )}
+          stylesRootElement={reactRootElements.stylesRootElement}
+          subscribeToPropChanges={subscribeToPropChanges}
+        />
+      </ErrorBoundary>
+    ),
+    webComponentRootElement: uiShellRootElement,
+    webComponentChildren,
+  });
+
+  return {
+    appRootElement,
+    setComponentProps: publishAfterReactAppReadyForProps,
+    slottedElements,
+    uiShellElement,
+  };
+};

package/src/labs/UiShell/useHasUiShell.ts

@@ -0,0 +1,25 @@
+/*!
+ * 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 { useEffect, useState } from "react";
+
+import { uiShellDataAttribute } from "./renderUiShell";
+
+export const useHasUiShell = () => {
+  const [hasUiShell, setHasUiShell] = useState(false);
+
+  useEffect(() => {
+    setHasUiShell(Boolean(document.querySelector(`[${uiShellDataAttribute}]`)));
+  }, []);
+
+  return hasUiShell;
+};

package/src/labs/UiShell/useScrollState.ts

@@ -0,0 +1,56 @@
+/*!
+ * 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 { useEffect, useRef, useState } from "react";
+
+export const useScrollState = <
+  ScrollableContentElement extends HTMLElement = HTMLDivElement,
+>() => {
+  const [isContentScrolled, setIsContentScrolled] = useState(false);
+
+  const scrollableContentRef = useRef<ScrollableContentElement>(null);
+
+  useEffect(() => {
+    if (scrollableContentRef.current) {
+      let requestedAnimationFrameId: number;
+      const scrollableContentElement = scrollableContentRef.current;
+
+      const updateScrollState = () => {
+        cancelAnimationFrame(requestedAnimationFrameId);
+
+        requestedAnimationFrameId = requestAnimationFrame(() => {
+          setIsContentScrolled(scrollableContentElement.scrollTop > 0);
+        });
+      };
+
+      scrollableContentElement.addEventListener("scroll", updateScrollState);
+
+      updateScrollState();
+
+      return () => {
+        scrollableContentElement.removeEventListener(
+          "scroll",
+          updateScrollState,
+        );
+
+        cancelAnimationFrame(requestedAnimationFrameId);
+      };
+    }
+
+    return () => {};
+  }, []);
+
+  return {
+    isContentScrolled,
+    scrollableContentRef,
+  };
+};

package/src/labs/index.ts

@@ -14,8 +14,8 @@ export { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 export { LocalizationProvider } from "@mui/x-date-pickers";
 export type { LocalizationProviderProps } from "@mui/x-date-pickers";
 
+// export * from "./AdaptablePicker";
 export * from "./AppTile";
-
 export * from "./DatePicker";
 export * from "./datePickerTheme";
 
@@ -28,12 +28,19 @@ export * from "./Layout";
 export * from "./materialReactTableTypes";
 /** @deprecated Will be removed in a future Odyssey version in lieu of DataTable */
 export * from "./StaticTable";
+export * from "./OdysseyPickers";
 export * from "./PageTemplate";
 /** @deprecated Will be removed in a future Odyssey version in lieu of DataTable */
 export * from "./PaginatedTable";
 
-export * from "./GroupPicker";
+export {
+  /** @deprecated Will be removed in a future Odyssey version. Use `PickerWithOptionAdornment` */
+  GroupPicker,
+  type GroupPickerOptionType,
+  type GroupPickerProps,
+} from "./GroupPicker";
 
-export * from "./NavAccordion";
+export * from "./SideNav/NavAccordion";
 export * from "./SideNav";
 export * from "./TopNav";
+export * from "./UiShell";

package/src/properties/odyssey-react-mui.properties

@@ -1,3 +1,6 @@
+navigation.label = Main navigation
+navigation.footer = Navigation secondary links
+
 breadcrumbs.home.text = Home
 breadcrumbs.label.text = Breadcrumbs
 close.text = Close
@@ -82,6 +85,8 @@ severity.error = error
 severity.info = info
 severity.success = success
 severity.warning = warning
+sidenav.toggle.expand = Open navigation
+sidenav.toggle.collapse = Close navigation
 switch.active = Active
 switch.inactive = Inactive
 table.columnvisibility.arialabel = Show/hide columns
@@ -122,3 +127,5 @@ table.rowexpansion.collapseall = Collapse all
 dataview.layout.table = Table
 dataview.layout.grid = Grid
 dataview.layout.list = List
+topnav.helpicon = help page
+topnav.settingsicon = settings page

package/src/properties/translations/odyssey-react-mui_cs.properties

@@ -31,7 +31,7 @@ picker.labels.action.today = Dnes
 picker.labels.clock.empty = Nen\u00ED vybran\u00FD \u010Das
 picker.labels.clock.hours = hod
 picker.labels.clock.minutes = min
-picker.labels.clock.minutes = s
+picker.labels.clock.seconds = s
 picker.labels.clock.selected = Vybran\u00FD \u010Das je
 picker.labels.date.choose = Zvolit datum
 picker.labels.date.selected = Vybran\u00E9 datum je
@@ -47,6 +47,7 @@ picker.labels.select = Vybrat
 picker.labels.table.date = vybrat datum
 picker.labels.table.time = vybrat \u010Das
 picker.labels.time.choose = Zvolit \u010Das
+picker.labels.time.selected = vybran\u00FD \u010Das je
 picker.time.toolbar.title = Vybrat \u010Das
 picker.view.name.day = Den
 picker.view.name.hours = Hodiny

package/src/properties/translations/odyssey-react-mui_da.properties

@@ -31,7 +31,7 @@ picker.labels.action.today = I dag
 picker.labels.clock.empty = Intet tidspunkt valgt
 picker.labels.clock.hours = timer
 picker.labels.clock.minutes = minutter
-picker.labels.clock.minutes = sekunder
+picker.labels.clock.seconds = sekunder
 picker.labels.clock.selected = Det valgte tidspunkt er
 picker.labels.date.choose = V\u00E6lg dato
 picker.labels.date.selected = Den valgte dato er
@@ -47,6 +47,7 @@ picker.labels.select = V\u00E6lg
 picker.labels.table.date = v\u00E6lg dato
 picker.labels.table.time = v\u00E6lg tidspunkt
 picker.labels.time.choose = V\u00E6lg tidspunkt
+picker.labels.time.selected = valgte tidspunkt er
 picker.time.toolbar.title = V\u00E6lg tidspunkt
 picker.view.name.day = Dag
 picker.view.name.hours = Timer

package/src/properties/translations/odyssey-react-mui_de.properties

@@ -31,7 +31,7 @@ picker.labels.action.today = Heute
 picker.labels.clock.empty = Keine Uhrzeit ausgew\u00E4hlt
 picker.labels.clock.hours = Stunden
 picker.labels.clock.minutes = Minuten
-picker.labels.clock.minutes = Sekunden
+picker.labels.clock.seconds = Sekunden
 picker.labels.clock.selected = Ausgew\u00E4hlte Uhrzeit
 picker.labels.date.choose = Datum w\u00E4hlen
 picker.labels.date.selected = Gew\u00E4hltes Datum
@@ -47,6 +47,7 @@ picker.labels.select = Ausw\u00E4hlen
 picker.labels.table.date = Datum w\u00E4hlen
 picker.labels.table.time = Uhrzeit w\u00E4hlen
 picker.labels.time.choose = Uhrzeit w\u00E4hlen
+picker.labels.time.selected = ausgew\u00E4hlte Uhrzeit ist
 picker.time.toolbar.title = Uhrzeit ausw\u00E4hlen
 picker.view.name.day = Tag
 picker.view.name.hours = Stunden

package/src/properties/translations/odyssey-react-mui_el.properties

@@ -31,7 +31,7 @@ picker.labels.action.today = \u03A3\u03AE\u03BC\u03B5\u03C1\u03B1
 picker.labels.clock.empty = \u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03B9 \u03B5\u03C0\u03B9\u03BB\u03B5\u03B3\u03B5\u03AF \u03CE\u03C1\u03B1
 picker.labels.clock.hours = \u03CE\u03C1\u03B5\u03C2
 picker.labels.clock.minutes = \u03BB\u03B5\u03C0\u03C4\u03AC
-picker.labels.clock.minutes = \u03B4\u03B5\u03C5\u03C4\u03B5\u03C1\u03CC\u03BB\u03B5\u03C0\u03C4\u03B1
+picker.labels.clock.seconds = \u03B4\u03B5\u03C5\u03C4\u03B5\u03C1\u03CC\u03BB\u03B5\u03C0\u03C4\u03B1
 picker.labels.clock.selected = \u0397 \u03B5\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03B7 \u03CE\u03C1\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9
 picker.labels.date.choose = \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1
 picker.labels.date.selected = \u0397 \u03B5\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03B7 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9
@@ -47,6 +47,7 @@ picker.labels.select = \u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE
 picker.labels.table.date = \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1
 picker.labels.table.time = \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CE\u03C1\u03B1
 picker.labels.time.choose = \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CE\u03C1\u03B1
+picker.labels.time.selected = \u03B7 \u03B5\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03B7 \u03CE\u03C1\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9
 picker.time.toolbar.title = \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CE\u03C1\u03B1
 picker.view.name.day = \u0397\u03BC\u03AD\u03C1\u03B1
 picker.view.name.hours = \u038F\u03C1\u03B5\u03C2

package/src/properties/translations/odyssey-react-mui_es.properties

@@ -31,7 +31,7 @@ picker.labels.action.today = Hoy
 picker.labels.clock.empty = No se ha seleccionado ninguna hora
 picker.labels.clock.hours = horas
 picker.labels.clock.minutes = minutos
-picker.labels.clock.minutes = segundos
+picker.labels.clock.seconds = segundos
 picker.labels.clock.selected = La hora seleccionada es
 picker.labels.date.choose = Elegir fecha
 picker.labels.date.selected = La fecha seleccionada es
@@ -47,6 +47,7 @@ picker.labels.select = Seleccionar
 picker.labels.table.date = elegir fecha
 picker.labels.table.time = elegir hora
 picker.labels.time.choose = Elegir hora
+picker.labels.time.selected = la hora seleccionada es
 picker.time.toolbar.title = Seleccionar hora
 picker.view.name.day = D\u00EDa
 picker.view.name.hours = Horas

package/src/properties/translations/odyssey-react-mui_fi.properties

@@ -31,7 +31,7 @@ picker.labels.action.today = T\u00E4n\u00E4\u00E4n
 picker.labels.clock.empty = Aikaa ei ole valittu
 picker.labels.clock.hours = tuntia
 picker.labels.clock.minutes = minuuttia
-picker.labels.clock.minutes = sekuntia
+picker.labels.clock.seconds = sekuntia
 picker.labels.clock.selected = Valittu aika on
 picker.labels.date.choose = Valitse p\u00E4iv\u00E4m\u00E4\u00E4r\u00E4
 picker.labels.date.selected = Valittu p\u00E4iv\u00E4m\u00E4\u00E4r\u00E4 on
@@ -47,6 +47,7 @@ picker.labels.select = Valitse
 picker.labels.table.date = valitse p\u00E4iv\u00E4m\u00E4\u00E4r\u00E4
 picker.labels.table.time = valitse aika
 picker.labels.time.choose = Valitse aika
+picker.labels.time.selected = valittu aika on
 picker.time.toolbar.title = Valitse aika
 picker.view.name.day = P\u00E4iv\u00E4
 picker.view.name.hours = Tuntia

package/src/properties/translations/odyssey-react-mui_fr.properties

@@ -8,8 +8,8 @@ picker.calendar.navigation.previousmonth = Mois pr\u00E9c\u00E8dent
 picker.date.toolbar.title = Date s\u00E9lectionn\u00E9e
 picker.daterange.toolbar.title = S\u00E9lectionner une plage de dates
 picker.datetime.toolbar.title = S\u00E9lectionner une date et une heure
-picker.error.invalid = Corrigez le format de la date ou s\u00E9lectionnez la date dans le calendrier. 
-picker.error.mindate = La date saisie est ant\u00E9rieure aux dates autoris\u00E9es.  S\u00E9lectionnez une date dans la plage du calendrier. 
+picker.error.invalid = Corrigez le format de la date ou s\u00E9lectionnez la date dans le calendrier.
+picker.error.mindate = La date saisie est ant\u00E9rieure aux dates autoris\u00E9es. S\u00E9lectionnez une date dans la plage du calendrier.
 picker.error.maxdate = La date saisie est post\u00E9rieure aux dates autoris\u00E9es. S\u00E9lectionnez une date dans la plage du calendrier.
 # placeholder text in date field
 picker.field.placeholder.day = DD
@@ -31,7 +31,7 @@ picker.labels.action.today = Aujourd'hui
 picker.labels.clock.empty = Aucune heure s\u00E9lectionn\u00E9e
 picker.labels.clock.hours = heures
 picker.labels.clock.minutes = minutes
-picker.labels.clock.minutes = secondes
+picker.labels.clock.seconds = secondes
 picker.labels.clock.selected = L'heure s\u00E9lectionn\u00E9e est
 picker.labels.date.choose = Choisir la date
 picker.labels.date.selected = La date s\u00E9lectionn\u00E9e est
@@ -47,6 +47,7 @@ picker.labels.select = S\u00E9lectionner
 picker.labels.table.date = choisir une date
 picker.labels.table.time = choisir une heure
 picker.labels.time.choose = Choisir une heure
+picker.labels.time.selected = l'heure s\u00E9lectionn\u00E9e est
 picker.time.toolbar.title = Choisir une date
 picker.view.name.day = Jour
 picker.view.name.hours = Heures

package/src/properties/translations/odyssey-react-mui_ht.properties

@@ -31,7 +31,7 @@ picker.labels.action.today = Jodia
 picker.labels.clock.empty = Pa gen l\u00E8 ki seleksyone
 picker.labels.clock.hours = \u00E8dtan
 picker.labels.clock.minutes = minit
-picker.labels.clock.minutes = segonn
+picker.labels.clock.seconds = segonn
 picker.labels.clock.selected = L\u00E8 ki seleksyone a se
 picker.labels.date.choose = Chwazi dat
 picker.labels.date.selected = Dat ki seleksyone a se
@@ -47,6 +47,7 @@ picker.labels.select = Seleksyone
 picker.labels.table.date = pran dat
 picker.labels.table.time = pran l\u00E8
 picker.labels.time.choose = Chwazi l\u00E8
+picker.labels.time.selected = l\u00E8 ki seleksyone a se
 picker.time.toolbar.title = Seleksyone l\u00E8
 picker.view.name.day = Jou
 picker.view.name.hours = \u00C8dtan

package/src/properties/translations/odyssey-react-mui_hu.properties

@@ -31,7 +31,7 @@ picker.labels.action.today = Ma
 picker.labels.clock.empty = Nincs kiv\u00E1lasztva id\u0151pont
 picker.labels.clock.hours = \u00F3ra
 picker.labels.clock.minutes = perc
-picker.labels.clock.minutes = m\u00E1sodperc
+picker.labels.clock.seconds = m\u00E1sodperc
 picker.labels.clock.selected = A kiv\u00E1lasztott id\u0151pont
 picker.labels.date.choose = V\u00E1lasszon d\u00E1tumot
 picker.labels.date.selected = A kiv\u00E1lasztott d\u00E1tum
@@ -47,6 +47,7 @@ picker.labels.select = Kiv\u00E1laszt\u00E1s
 picker.labels.table.date = v\u00E1lasszon d\u00E1tumot
 picker.labels.table.time = v\u00E1lasszon id\u0151pontot
 picker.labels.time.choose = Id\u0151pont kiv\u00E1laszt\u00E1sa
+picker.labels.time.selected = a kiv\u00E1lasztott id\u0151pont:
 picker.time.toolbar.title = Id\u0151pont kiv\u00E1laszt\u00E1sa
 picker.view.name.day = Nap
 picker.view.name.hours = \u00D3ra

package/src/properties/translations/odyssey-react-mui_id.properties

@@ -31,7 +31,7 @@ picker.labels.action.today = Hari ini
 picker.labels.clock.empty = Tidak ada waktu yang dipilih
 picker.labels.clock.hours = jam
 picker.labels.clock.minutes = menit
-picker.labels.clock.minutes = detik
+picker.labels.clock.seconds = detik
 picker.labels.clock.selected = Waktu yang dipilih
 picker.labels.date.choose = Pilih tanggal
 picker.labels.date.selected = Tanggal yang dipilih
@@ -47,6 +47,7 @@ picker.labels.select = Pilih
 picker.labels.table.date = pilih tanggal
 picker.labels.table.time = pilih waktu
 picker.labels.time.choose = Pilih waktu
+picker.labels.time.selected = waktu yang dipilih adalah
 picker.time.toolbar.title = Pilih waktu
 picker.view.name.day = Hari
 picker.view.name.hours = Jam