@okta/odyssey-react-mui 1.25.0 → 1.27.0

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,13 @@
+navigation.label = Main navigation
+navigation.footer = Navigation secondary links
+navigation.drag.handle = Drag handle
+sortable.list.drag.start = Picked up draggable item {{activeId}}
+sortable.list.drag.moved.over = Draggable item {{activeId}} was moved over droppable area {{overId}}
+sortable.list.drag.nolonger.over = Draggable item {{activeId}} is no longer over a droppable area
+sortable.list.drag.end.dropped.over = Draggable item {{activeId}} was dropped over droppable area {{overId}}
+sortable.list.drag.end.dropped = Draggable item {{activeId}} was dropped
+sortable.list.drag.cancel = Dragging was cancelled. Draggable item {{activeId}} was dropped
+
 breadcrumbs.home.text = Home
 breadcrumbs.label.text = Breadcrumbs
 close.text = Close
@@ -82,6 +92,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 +134,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

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

@@ -31,7 +31,7 @@ picker.labels.action.today = Oggi
 picker.labels.clock.empty = Ora non selezionata
 picker.labels.clock.hours = ore
 picker.labels.clock.minutes = minuti
-picker.labels.clock.minutes = secondi
+picker.labels.clock.seconds = secondi
 picker.labels.clock.selected = L'ora selezionata \u00E8
 picker.labels.date.choose = Scegli data
 picker.labels.date.selected = La data selezionata \u00E8
@@ -47,6 +47,7 @@ picker.labels.select = Seleziona
 picker.labels.table.date = seleziona data
 picker.labels.table.time = seleziona ora
 picker.labels.time.choose = Scegli ora
+picker.labels.time.selected = l'ora selezionata \u00E8
 picker.time.toolbar.title = Seleziona ora
 picker.view.name.day = Giorno
 picker.view.name.hours = Ore
@@ -113,7 +114,7 @@ pagination.rowswithtotal = {{firstRow}}-{{lastRow}} di {{totalRows}} righe
 pagination.rowswithouttotal = {{firstRow}}-{{lastRow}} righe
 table.actions.selectall = Seleziona tutto
 table.actions.selectnone = Non selezionare niente
-table.actions.selectsome = Selezionate: {{selectedRowCount}} 
+table.actions.selectsome = Selezionate: {{selectedRowCount}}
 table.rowexpansion.expand = Espandi
 table.rowexpansion.expandall = Espandi tutto
 table.rowexpansion.collapse = Comprimi

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

@@ -31,7 +31,7 @@ picker.labels.action.today = \u4ECA\u65E5
 picker.labels.clock.empty = \u6642\u523B\u304C\u9078\u629E\u3055\u308C\u3066\u3044\u307E\u305B\u3093
 picker.labels.clock.hours = \u6642\u9593
 picker.labels.clock.minutes = \u5206
-picker.labels.clock.minutes = \u79D2
+picker.labels.clock.seconds = \u79D2
 picker.labels.clock.selected = \u9078\u629E\u3057\u305F\u6642\u523B\u306F
 picker.labels.date.choose = \u65E5\u4ED8\u3092\u9078\u629E
 picker.labels.date.selected = \u9078\u629E\u3057\u305F\u65E5\u306F
@@ -47,6 +47,7 @@ picker.labels.select = \u9078\u629E
 picker.labels.table.date = \u65E5\u4ED8\u3092\u9078\u629E
 picker.labels.table.time = \u6642\u523B\u3092\u9078\u629E
 picker.labels.time.choose = \u6642\u523B\u3092\u9078\u629E
+picker.labels.time.selected = \u9078\u629E\u3057\u305F\u6642\u523B\u306F
 picker.time.toolbar.title = \u6642\u523B\u3092\u9078\u629E
 picker.view.name.day = \u65E5
 picker.view.name.hours = \u6642\u9593
@@ -93,15 +94,15 @@ table.density.arialabel = \u30C6\u30FC\u30D6\u30EB\u5BC6\u5EA6
 table.draghandle.arialabel = \u4E26\u3079\u66FF\u3048\u308B\u306B\u306F\u884C\u3092\u30C9\u30E9\u30C3\u30B0\u3057\u307E\u3059\u3002\u307E\u305F\u306F\u3001\u30B9\u30DA\u30FC\u30B9\u307E\u305F\u306FEnter\u30AD\u30FC\u3092\u62BC\u3057\u3066\u4E26\u3079\u66FF\u3048\u3092\u958B\u59CB/\u7D42\u4E86\u3057\u307E\u3059\u3002\u30AD\u30E3\u30F3\u30BB\u30EB\u3059\u308B\u306B\u306F\u3001Esc\u30AD\u30FC\u3092\u62BC\u3057\u307E\u3059\u3002
 table.draghandle.tooltip = \u884C\u3092\u30C9\u30E9\u30C3\u30B0\u3059\u308B\u304B\u3001\u30B9\u30DA\u30FC\u30B9/Enter\u30AD\u30FC\u3092\u62BC\u3057\u3066\u4E26\u3079\u66FF\u3048\u3092\u958B\u59CB/\u7D42\u4E86\u3057\u307E\u3059\u3002
 table.error = \u30C7\u30FC\u30BF\u306E\u8AAD\u307F\u8FBC\u307F\u4E2D\u306B\u30A8\u30E9\u30FC\u304C\u767A\u751F\u3057\u307E\u3057\u305F\u3002
-table.fetchedrows.text = {{totalRows}}\u884C\u3092\u30D5\u30A7\u30C3\u30C1
-table.fetchedrows.text_plural = \u5408\u8A08{{totalRows}}\u884C\u3092\u30D5\u30A7\u30C3\u30C1
+table.fetchedrows.text = {{totalRows}}\u884C\u3092\u53D6\u5F97\u3057\u307E\u3057\u305F
+table.fetchedrows.text_plural = \u5408\u8A08{{totalRows}}\u884C\u3092\u3092\u53D6\u5F97\u3057\u307E\u3057\u305F
 table.moreactions.arialabel = \u305D\u306E\u4ED6\u306E\u30A2\u30AF\u30B7\u30E7\u30F3
 table.noresults.heading = \u7D50\u679C\u304C\u3042\u308A\u307E\u305B\u3093\u3002
 table.noresults.text = \u5225\u306E\u30AF\u30A8\u30EA\u3092\u8A66\u3057\u3066\u304F\u3060\u3055\u3044\u3002
-table.reorder.backward = \u5F8C\u308D\u306B\u79FB\u52D5
-table.reorder.forward = \u524D\u306B\u79FB\u52D5
-table.reorder.toback = \u5F8C\u308D\u306B\u79FB\u52D5
-table.reorder.tofront = \u524D\u306B\u79FB\u52D5
+table.reorder.backward = \u80CC\u9762\u306B\u79FB\u52D5
+table.reorder.forward = \u524D\u9762\u306B\u79FB\u52D5
+table.reorder.toback = \u6700\u80CC\u9762\u306B\u79FB\u52D5
+table.reorder.tofront = \u6700\u524D\u9762\u306B\u79FB\u52D5
 table.rows.text = {{totalRows}}\u884C
 table.rows.text_plural = {{totalRows}}\u884C
 pagination.loadmore = \u3055\u3089\u306B\u8868\u793A

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

@@ -31,7 +31,7 @@ picker.labels.action.today = \uC624\uB298
 picker.labels.clock.empty = \uC120\uD0DD\uD55C \uC2DC\uAC04 \uC5C6\uC74C
 picker.labels.clock.hours = \uC2DC
 picker.labels.clock.minutes = \uBD84
-picker.labels.clock.minutes = \uCD08
+picker.labels.clock.seconds = \uCD08
 picker.labels.clock.selected = \uC120\uD0DD\uD55C \uC2DC\uAC04\uC740 \uB2E4\uC74C\uACFC \uAC19\uC2B5\uB2C8\uB2E4.
 picker.labels.date.choose = \uB0A0\uC9DC \uC120\uD0DD
 picker.labels.date.selected = \uC120\uD0DD\uD55C \uB0A0\uC9DC\uB294 \uB2E4\uC74C\uACFC \uAC19\uC2B5\uB2C8\uB2E4.
@@ -47,6 +47,7 @@ picker.labels.select = \uC120\uD0DD
 picker.labels.table.date = \uB0A0\uC9DC \uC120\uD0DD
 picker.labels.table.time = \uC2DC\uAC04 \uC120\uD0DD
 picker.labels.time.choose = \uC2DC\uAC04 \uC120\uD0DD
+picker.labels.time.selected = \uC120\uD0DD\uD55C \uC2DC\uAC04:
 picker.time.toolbar.title = \uC2DC\uAC04 \uC120\uD0DD
 picker.view.name.day = \uC694\uC77C
 picker.view.name.hours = \uC2DC

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

@@ -31,7 +31,7 @@ picker.labels.action.today = Hari ini
 picker.labels.clock.empty = Tiada masa dipilih
 picker.labels.clock.hours = jam
 picker.labels.clock.minutes = minit
-picker.labels.clock.minutes = saat
+picker.labels.clock.seconds = saat
 picker.labels.clock.selected = Masa yang dipilih ialah
 picker.labels.date.choose = Pilih tarikh
 picker.labels.date.selected = Tarikh yang dipilih ialah
@@ -47,6 +47,7 @@ picker.labels.select = Pilih
 picker.labels.table.date = pilih tarikh
 picker.labels.table.time = pilih masa
 picker.labels.time.choose = Pilih masa
+picker.labels.time.selected = masa yang dipilih ialah
 picker.time.toolbar.title = Pilih masa
 picker.view.name.day = Hari
 picker.view.name.hours = Jam

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

@@ -31,7 +31,7 @@ picker.labels.action.today = I dag
 picker.labels.clock.empty = Ingen tid 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 = Valgt tidspunkt er
 picker.labels.date.choose = Velg dato
 picker.labels.date.selected = Valgt dato er
@@ -47,6 +47,7 @@ picker.labels.select = Velg
 picker.labels.table.date = angi dato
 picker.labels.table.time = angi tid
 picker.labels.time.choose = Velg tid
+picker.labels.time.selected = valgt tidspunkt er
 picker.time.toolbar.title = Velg tidspunkt
 picker.view.name.day = Dag
 picker.view.name.hours = Timer

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

@@ -31,7 +31,7 @@ picker.labels.action.today = Vandaag
 picker.labels.clock.empty = Geen tijd geselecteerd
 picker.labels.clock.hours = uur
 picker.labels.clock.minutes = minuten
-picker.labels.clock.minutes = seconden
+picker.labels.clock.seconds = seconden
 picker.labels.clock.selected = De geselecteerde tijd is
 picker.labels.date.choose = Datum kiezen
 picker.labels.date.selected = De geselecteerde datum is
@@ -47,6 +47,7 @@ picker.labels.select = Selecteren
 picker.labels.table.date = datum kiezen
 picker.labels.table.time = tijd kiezen
 picker.labels.time.choose = Tijd kiezeen
+picker.labels.time.selected = geselecteerde tijd is
 picker.time.toolbar.title = Tijd selecteren
 picker.view.name.day = Dag
 picker.view.name.hours = Uur

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

@@ -31,7 +31,7 @@ picker.labels.action.today = Dzisiaj
 picker.labels.clock.empty = Nie wybornao godziny
 picker.labels.clock.hours = godz.
 picker.labels.clock.minutes = min
-picker.labels.clock.minutes = s
+picker.labels.clock.seconds = s
 picker.labels.clock.selected = Wybrana godzina to
 picker.labels.date.choose = Wybierz dat\u0119
 picker.labels.date.selected = Wybrana data to
@@ -47,6 +47,7 @@ picker.labels.select = Wybierz
 picker.labels.table.date = wska\u017C dat\u0119
 picker.labels.table.time = wska\u017C godzin\u0119
 picker.labels.time.choose = Wybierz godzin\u0119
+picker.labels.time.selected = wybrana godzina to
 picker.time.toolbar.title = Wybierz godzin\u0119
 picker.view.name.day = Dzie\u0144
 picker.view.name.hours = Godziny

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

@@ -31,7 +31,7 @@ picker.labels.action.today = Hoje
 picker.labels.clock.empty = Nenhum hor\u00E1rio selecionado
 picker.labels.clock.hours = horas
 picker.labels.clock.minutes = minutos
-picker.labels.clock.minutes = segundos
+picker.labels.clock.seconds = segundos
 picker.labels.clock.selected = O hor\u00E1rio selecionado \u00E9
 picker.labels.date.choose = Selecionar data
 picker.labels.date.selected = A data selecionada \u00E9
@@ -47,6 +47,7 @@ picker.labels.select = Selecionar
 picker.labels.table.date = selecionar data
 picker.labels.table.time = selecionar hora
 picker.labels.time.choose = Escolher hora
+picker.labels.time.selected = o hor\u00E1rio selecionado \u00E9
 picker.time.toolbar.title = Selecionar hora
 picker.view.name.day = Dia
 picker.view.name.hours = Horas

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

@@ -31,7 +31,7 @@ picker.labels.action.today = Ast\u0103zi
 picker.labels.clock.empty = Nicio or\u0103 selectat\u0103
 picker.labels.clock.hours = ore
 picker.labels.clock.minutes = minute
-picker.labels.clock.minutes = secunde
+picker.labels.clock.seconds = secunde
 picker.labels.clock.selected = Ora selectat\u0103 este
 picker.labels.date.choose = Alege\u021Bi data
 picker.labels.date.selected = Data selectat\u0103 este
@@ -47,6 +47,7 @@ picker.labels.select = Selecta\u021Bi
 picker.labels.table.date = alege\u021Bi data
 picker.labels.table.time = alege\u021Bi ora
 picker.labels.time.choose = Alege\u021Bi ora
+picker.labels.time.selected = ora selectat\u0103 este
 picker.time.toolbar.title = Selecta\u021Bi ora
 picker.view.name.day = Zi
 picker.view.name.hours = Ore