@okta/odyssey-react-mui 0.24.0 → 1.0.0

package/src/labs/StaticTable.tsx

@@ -0,0 +1,122 @@
+/*!
+ * 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.
+ */
+
+import MaterialReactTable, {
+  type MRT_ColumnFiltersState,
+  type MRT_TableInstance,
+  type MRT_Virtualizer,
+} from "material-react-table";
+import {
+  FunctionComponent,
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { useTranslation } from "react-i18next";
+
+import type {
+  DefaultMaterialReactTableData,
+  MaterialReactTableProps,
+} from "./materialReactTableTypes";
+
+export type StaticTableProps<TData extends DefaultMaterialReactTableData> = {
+  columns: MaterialReactTableProps<TData>["columns"];
+  data: MaterialReactTableProps<TData>["data"];
+  getRowId?: MaterialReactTableProps<TData>["getRowId"];
+  hasError?: boolean;
+  initialState?: MaterialReactTableProps<TData>["initialState"];
+  onGlobalFilterChange?: MaterialReactTableProps<TData>["onGlobalFilterChange"];
+  state?: MaterialReactTableProps<TData>["state"];
+  ToolbarButtons?: FunctionComponent<
+    { table: MRT_TableInstance<TData> } & unknown
+  >;
+};
+
+const StaticTable = <TData extends DefaultMaterialReactTableData>({
+  columns,
+  data,
+  getRowId,
+  hasError,
+  initialState,
+  onGlobalFilterChange,
+  state,
+  ToolbarButtons,
+}: StaticTableProps<TData>) => {
+  const { t } = useTranslation();
+
+  const rowVirtualizerInstanceRef =
+    useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);
+
+  const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(
+    []
+  );
+
+  const [globalFilter, setGlobalFilter] = useState<string>();
+
+  useEffect(() => {
+    if (globalFilter) {
+      onGlobalFilterChange?.(globalFilter);
+    }
+  }, [globalFilter, onGlobalFilterChange]);
+
+  const renderTopToolbarCustomActions = useCallback<
+    Exclude<
+      MaterialReactTableProps<TData>["renderTopToolbarCustomActions"],
+      undefined
+    >
+  >(
+    ({ table }) => <>{ToolbarButtons && <ToolbarButtons table={table} />}</>,
+    [ToolbarButtons]
+  );
+
+  useEffect(() => {
+    try {
+      // Scroll to top of table when sorting or filters change.
+      rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);
+    } catch (error) {
+      console.error(error);
+    }
+  }, [columnFilters, globalFilter]);
+
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      enableBottomToolbar={false}
+      enablePagination={false}
+      enableRowVirtualization={data.length > 50}
+      enableSorting={false}
+      getRowId={getRowId}
+      initialState={initialState}
+      muiToolbarAlertBannerProps={
+        hasError
+          ? {
+              children: t("table.error"),
+              color: "error",
+            }
+          : undefined
+      }
+      onColumnFiltersChange={setColumnFilters}
+      onGlobalFilterChange={setGlobalFilter}
+      renderTopToolbarCustomActions={renderTopToolbarCustomActions}
+      rowVirtualizerInstanceRef={rowVirtualizerInstanceRef}
+      rowVirtualizerProps={{ overscan: 4 }}
+      state={state}
+    />
+  );
+};
+
+const MemoizedStaticTable = memo(StaticTable) as typeof StaticTable;
+
+export { MemoizedStaticTable as StaticTable };

package/src/labs/datePickerTheme.tsx

@@ -0,0 +1,341 @@
+/*!
+ * 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.
+ */
+
+import { CSSInterpolation } from "@mui/material/styles";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  CalendarIcon,
+  ChevronDownIcon,
+} from "../icons.generated";
+import { createOdysseyMuiTheme } from "../theme";
+import { ThemeOptions } from "@mui/material";
+import * as Tokens from "@okta/odyssey-design-tokens";
+
+const popupSpacingValue = 5;
+
+const odysseyTheme = createOdysseyMuiTheme(Tokens);
+
+type ThemeStyles = ({
+  theme,
+}: {
+  theme: typeof odysseyTheme;
+}) => CSSInterpolation;
+
+type StateStyles = Record<string, ThemeStyles>;
+
+const dateStyles: StateStyles = {
+  default: ({ theme }) => ({
+    color: theme.palette.text.primary,
+  }),
+  disabled: ({ theme }) => ({
+    backgroundColor: "transparent",
+    color: theme.palette.text.disabled,
+  }),
+  hover: ({ theme }) => ({
+    backgroundColor: theme.palette.grey[100],
+  }),
+  hoverSelected: ({ theme }) => ({
+    backgroundColor: theme.palette.primary.dark,
+    color: theme.palette.primary.contrastText,
+  }),
+  outsideOfMonth: ({ theme }) => ({
+    backgroundColor: "transparent",
+    color: theme.palette.text.secondary,
+  }),
+  selected: ({ theme }) => ({
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText,
+  }),
+  today: ({ theme }) => ({
+    backgroundColor: "transparent",
+    color: theme.palette.primary.main,
+  }),
+};
+
+const todayDotStyles: StateStyles = {
+  default: ({ theme }) => ({
+    backgroundColor: theme.palette.primary.main,
+    borderRadius: "50%",
+    bottom: theme.spacing(1),
+    content: '" "',
+    height: `${2 / theme.typography.fontSize}em`,
+    position: "absolute",
+    transform: "translateY(-50%)",
+    width: `${2 / theme.typography.fontSize}em`,
+  }),
+  hover: ({ theme }) => ({
+    backgroundColor: theme.palette.primary.main,
+  }),
+  selected: ({ theme }) => ({
+    backgroundColor: theme.palette.primary.contrastText,
+  }),
+};
+
+const yearStyles: StateStyles = {
+  default: ({ theme }) => ({
+    backgroundColor: "transparent",
+    color: theme.palette.text.primary,
+  }),
+  disabled: ({ theme }) => ({
+    backgroundColor: "transparent",
+    color: theme.palette.text.disabled,
+  }),
+  hover: ({ theme }) => ({
+    backgroundColor: theme.palette.grey[100],
+  }),
+  hoverSelected: ({ theme }) => ({
+    backgroundColor: theme.palette.primary.lighter,
+    color: theme.palette.primary.main,
+  }),
+  outsideOfMonth: ({ theme }) => ({
+    backgroundColor: "transparent",
+    color: theme.palette.text.secondary,
+  }),
+  selected: ({ theme }) => ({
+    backgroundColor: "transparent",
+    color: theme.palette.primary.main,
+    fontWeight: theme.typography.fontWeightBold,
+  }),
+};
+
+const yearCheckStyles: StateStyles = {
+  default: ({ theme }) => ({
+    backgroundColor: theme.palette.primary.main,
+    content: '""',
+    height: theme.typography.h6.fontSize,
+    maskImage:
+      "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M14.3536 4.35355L6.35355 12.3536C6.15829 12.5488 5.84171 12.5488 5.64645 12.3536L1.64645 8.35355L2.35355 7.64645L6 11.2929L13.6464 3.64645L14.3536 4.35355Z' fill='currentColor' /%3E%3C/svg%3E%0A\")",
+    maskPosition: "50% 50%",
+    maskRepeat: "no-repeat",
+    position: "absolute",
+    right: theme.spacing(4),
+    width: theme.typography.h6.fontSize,
+  }),
+};
+
+export const datePickerTheme: ThemeOptions = {
+  components: {
+    MuiCalendarPicker: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          borderColor: theme.palette.divider,
+          borderStyle: theme.mixins.borderStyle,
+          borderWidth: theme.mixins.borderWidth,
+          borderRadius: theme.mixins.borderRadius,
+          paddingBottom: theme.spacing(popupSpacingValue),
+          paddingTop: theme.spacing(4),
+          width: "100%",
+        }),
+      },
+    },
+    MuiCalendarOrClockPicker: {
+      styleOverrides: {
+        root: () => ({
+          "& > div": {
+            width: `${(296 / 16) * (16 / 14)}rem`,
+          },
+        }),
+      },
+      defaultProps: {
+        components: {
+          LeftArrowIcon: ArrowLeftIcon,
+          RightArrowIcon: ArrowRightIcon,
+          SwitchViewIcon: ChevronDownIcon,
+        },
+      },
+    },
+    MuiDesktopDatePicker: {
+      defaultProps: {
+        components: {
+          OpenPickerIcon: CalendarIcon,
+        },
+      },
+    },
+    MuiDayPicker: {
+      styleOverrides: {
+        header: ({ theme }) => ({
+          gap: theme.spacing(1),
+          justifyContent: "space-between",
+          paddingLeft: theme.spacing(popupSpacingValue),
+          paddingRight: theme.spacing(popupSpacingValue),
+        }),
+        slideTransition: () => ({
+          minHeight: `${(214 / 16) * (16 / 14)}rem`,
+        }),
+        weekContainer: ({ theme }) => ({
+          gap: theme.spacing(1),
+          justifyContent: "space-between",
+          marginBottom: theme.spacing(1),
+          marginLeft: 0,
+          marginRight: 0,
+          paddingLeft: theme.spacing(popupSpacingValue),
+          paddingRight: theme.spacing(popupSpacingValue),
+
+          "&:last-child": {
+            marginBottom: 0,
+          },
+        }),
+        weekDayLabel: ({ theme }) => ({
+          color: theme.palette.grey[900],
+          flexBasis: theme.spacing(6),
+          flexShrink: 0,
+          fontSize: theme.typography.subtitle1.fontSize,
+          fontWeight: theme.typography.fontWeightBold,
+          height: theme.spacing(6),
+          marginBottom: theme.spacing(2),
+          marginLeft: 0,
+          marginRight: 0,
+          width: theme.spacing(6),
+        }),
+      },
+    },
+    MuiDatePicker: {
+      defaultProps: {
+        PopperProps: {
+          popperOptions: {
+            placement: "auto-start",
+          },
+        },
+        showDaysOutsideCurrentMonth: true,
+        views: ["year", "day"],
+      },
+    },
+    MuiPickersCalendarHeader: {
+      styleOverrides: {
+        label: ({ theme }) => ({
+          fontSize: theme.typography.h6.fontSize,
+          fontWeight: theme.typography.fontWeightBold,
+        }),
+        root: ({ theme }) => ({
+          marginBottom: theme.spacing(1),
+          marginTop: 0,
+          paddingLeft: `calc(${theme.spacing(
+            popupSpacingValue
+          )} + ${theme.spacing(2)})`,
+          paddingRight: theme.spacing(popupSpacingValue),
+          width: "auto",
+        }),
+      },
+    },
+    MuiPickersDay: {
+      styleOverrides: {
+        dayWithMargin: () => ({
+          marginLeft: 0,
+          marginRight: 0,
+        }),
+        root: ({ theme }) => [
+          dateStyles.default({ theme }),
+          {
+            border: "none",
+            borderRadius: theme.mixins.borderRadius,
+            flexBasis: theme.spacing(6),
+            flexShrink: 0,
+            fontSize: theme.typography.body1.fontSize,
+            height: theme.spacing(6),
+            width: theme.spacing(6),
+
+            "&.MuiPickersDay-today": [
+              dateStyles.today({ theme }),
+              {
+                fontWeight: theme.typography.fontWeightBold,
+              },
+            ],
+
+            "&.MuiPickersDay-today::after": todayDotStyles.default({ theme }),
+            "&.MuiPickersDay-today.Mui-selected::after":
+              todayDotStyles.selected({ theme }),
+            "&.MuiPickersDay-dayOutsideMonth": dateStyles.outsideOfMonth({
+              theme,
+            }),
+            "&:hover": dateStyles.hover({ theme }),
+
+            "&:not(.Mui-selected)": {
+              border: "none",
+            },
+
+            "&.Mui-selected, &.Mui-selected:focus": dateStyles.selected({
+              theme,
+            }),
+            "&.Mui-selected:hover": dateStyles.hoverSelected({ theme }),
+            "&.Mui-disabled": dateStyles.disabled({ theme }),
+          },
+        ],
+      },
+    },
+    MuiPickersPopper: {
+      styleOverrides: {
+        paper: ({ theme }) => ({
+          boxShadow: `0 ${(1 / 16) * (16 / 14)}rem ${
+            (4 / 16) * (16 / 14)
+          }rem rgba(29, 29, 33, 0.08), 0 ${(4 / 16) * (16 / 14)}rem ${
+            (10 / 16) * (16 / 14)
+          }rem rgba(29, 29, 33, 0.08), 0 ${(8 / 16) * (16 / 14)}rem ${
+            (30 / 16) * (16 / 14)
+          }rem rgba(29, 29, 33, 0.1)`,
+          marginTop: theme.spacing(1),
+        }),
+      },
+    },
+    MuiYearPicker: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          alignItems: "flex-start",
+          flexDirection: "column",
+          flexWrap: "nowrap",
+          marginBottom: `-${theme.spacing(popupSpacingValue)}`,
+          marginInlineEnd: 0,
+          maxHeight: `${(284 / 16) * (16 / 14)}rem`,
+          paddingLeft: 0,
+          paddingRight: 0,
+        }),
+      },
+    },
+    PrivatePickersYear: {
+      styleOverrides: {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error TEMP. Arrays are valid styles return values for Emotion.
+        button: ({ theme }) => [
+          yearStyles.default({ theme }),
+          {
+            alignItems: "center",
+            borderRadius: 0,
+            display: "flex",
+            fontSize: theme.typography.body1.fontSize,
+            justifyContent: "flex-start",
+            marginBottom: 0,
+            marginTop: 0,
+            paddingLeft: theme.spacing(7),
+            position: "relative",
+            width: "100%",
+
+            "&:hover": yearStyles.hover({ theme }),
+
+            "&:not(.Mui-selected)": {
+              border: "none",
+            },
+
+            "&.Mui-disabled": yearStyles.disabled({ theme }),
+          },
+        ],
+        root: () => ({
+          width: "100%",
+        }),
+        selected: ({ theme }) => ({
+          "&, &:focus": yearStyles.selected({ theme }),
+          "&:hover": yearStyles.hoverSelected({ theme }),
+          "&::after": yearCheckStyles.default({ theme }),
+        }),
+      },
+    },
+  },
+};

package/src/labs/index.ts

@@ -0,0 +1,24 @@
+/*!
+ * 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 { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+export { LocalizationProvider } from "@mui/x-date-pickers";
+export type { LocalizationProviderProps } from "@mui/x-date-pickers";
+
+export type { MRT_ColumnDef as TableColumn } from "material-react-table";
+
+export * from "./DatePicker";
+export * from "./datePickerTheme";
+
+export * from "./materialReactTableTypes";
+export * from "./PaginatedTable";
+export * from "./StaticTable";

package/{dist/theme/useTheme.js → src/labs/materialReactTableTypes.ts}

@@ -10,8 +10,10 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { useTheme as useMuiTheme } from "@mui/material/styles";
-export const useTheme = function () {
-  return useMuiTheme(...arguments);
-};
-//# sourceMappingURL=useTheme.js.map
+import MaterialReactTable from "material-react-table";
+
+export type DefaultMaterialReactTableData = Record<string, unknown>;
+
+export type MaterialReactTableProps<
+  TData extends DefaultMaterialReactTableData
+> = Parameters<typeof MaterialReactTable<TData>>[0];

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

@@ -1,8 +1,13 @@
 fielderror.screenreader.text = Error
 fieldlabel.optional.text = Optional
 fieldlabel.required.text = Required
+severity.error = error
+severity.info = info
 severity.success = success
 severity.warning = warning
-severity.info = info
-severity.error = error
+table.error = Error loading data.
+table.fetchedrows.text = Fetched {{totalRows}} row
+table.fetchedrows.text_plural = Fetched {{totalRows}} total rows
+table.rows.text = {{totalRows}} row
+table.rows.text_plural = {{totalRows}} rows
 toast.close.text = close

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

@@ -0,0 +1,14 @@
+fielderror.screenreader.text = Chyba
+fieldlabel.optional.text = Voliteln\u00E9
+fieldlabel.required.text = Povinn\u00E9
+severity.error = chyba
+severity.info = informace
+severity.success = \u00FAsp\u011Bch
+severity.warning = upozorn\u011Bn\u00ED
+table.error = Chyba p\u0159i na\u010D\u00EDt\u00E1n\u00ED dat
+table.fetchedrows.text = Byl na\u010Dten {{totalRows}} \u0159\u00E1dek
+table.fetchedrows.text_plural = Celkem na\u010Dteno \u0159\u00E1dk\u016F: {{totalRows}}
+table.rows.text = {{totalRows}} \u0159\u00E1dek
+table.rows.text_plural = Po\u010Det \u0159\u00E1dk\u016F: {{totalRows}}
+toast.close.text = zav\u0159\u00EDt
+

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

@@ -0,0 +1,14 @@
+fielderror.screenreader.text = Fejl
+fieldlabel.optional.text = Valgfrit
+fieldlabel.required.text = P\u00E5kr\u00E6vet
+severity.error = fejl
+severity.info = oplysninger
+severity.success = fuldf\u00F8rt
+severity.warning = advarsel
+table.error = Fejl ved indl\u00E6sning af data.
+table.fetchedrows.text = Hentet {{totalRows}} r\u00E6kke
+table.fetchedrows.text_plural = Hentet {{totalRows}} total antal r\u00E6kker
+table.rows.text = {{totalRows}} r\u00E6kke
+table.rows.text_plural = {{totalRows}} r\u00E6kker
+toast.close.text = luk
+

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

@@ -0,0 +1,14 @@
+fielderror.screenreader.text = Fehler
+fieldlabel.optional.text = Optional
+fieldlabel.required.text = Erforderlich
+severity.error = Fehler
+severity.info = Infos
+severity.success = Erfolg
+severity.warning = Warnung
+table.error = Fehler beim Laden der Daten.
+table.fetchedrows.text = {{totalRows}} Zeile abgerufen
+table.fetchedrows.text_plural = {{totalRows}} Zeilen insgesamt abgerufen
+table.rows.text = {{totalRows}} Zeile
+table.rows.text_plural = {{totalRows}} Zeilen
+toast.close.text = schlie\u00DFen
+

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

@@ -0,0 +1,14 @@
+fielderror.screenreader.text = \u03A3\u03C6\u03AC\u03BB\u03BC\u03B1
+fieldlabel.optional.text = \u03A0\u03C1\u03BF\u03B1\u03B9\u03C1\u03B5\u03C4\u03B9\u03BA\u03CC
+fieldlabel.required.text = \u0391\u03C0\u03B1\u03B9\u03C4\u03B5\u03AF\u03C4\u03B1\u03B9
+severity.error = \u03C3\u03C6\u03AC\u03BB\u03BC\u03B1
+severity.info = \u03C0\u03BB\u03B7\u03C1\u03BF\u03C6\u03BF\u03C1\u03AF\u03B5\u03C2
+severity.success = \u03B5\u03C0\u03B9\u03C4\u03C5\u03C7\u03AF\u03B1
+severity.warning = \u03C0\u03C1\u03BF\u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03AF\u03B7\u03C3\u03B7
+table.error = \u03A3\u03C6\u03AC\u03BB\u03BC\u03B1 \u03BA\u03B1\u03C4\u03AC \u03C4\u03B7 \u03C6\u03CC\u03C1\u03C4\u03C9\u03C3\u03B7 \u03B4\u03B5\u03B4\u03BF\u03BC\u03AD\u03BD\u03C9\u03BD.
+table.fetchedrows.text = \u0391\u03BD\u03B1\u03BA\u03C4\u03AE\u03B8\u03B7\u03BA\u03B5 {{totalRows}} \u03C3\u03B5\u03B9\u03C1\u03AC
+table.fetchedrows.text_plural = \u0391\u03BD\u03B1\u03BA\u03C4\u03AE\u03B8\u03B7\u03BA\u03B1\u03BD \u03C3\u03C5\u03BD\u03BF\u03BB\u03B9\u03BA\u03AC {{totalRows}} \u03C3\u03B5\u03B9\u03C1\u03AD\u03C2
+table.rows.text = {{totalRows}} \u03C3\u03B5\u03B9\u03C1\u03AC
+table.rows.text_plural = {{totalRows}} \u03C3\u03B5\u03B9\u03C1\u03AD\u03C2
+toast.close.text = \u03BA\u03BB\u03B5\u03AF\u03C3\u03B9\u03BC\u03BF
+

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

@@ -0,0 +1,14 @@
+fielderror.screenreader.text = Error
+fieldlabel.optional.text = Opcional
+fieldlabel.required.text = Obligatorio
+severity.error = error
+severity.info = informaci\u00F3n
+severity.success = correcto
+severity.warning = advertencia
+table.error = Error al cargar datos.
+table.fetchedrows.text = Se ha recuperado {{totalRows}} fila
+table.fetchedrows.text_plural = Se ha recuperado un total de {{totalRows}} filas
+table.rows.text = {{totalRows}} fila
+table.rows.text_plural = {{totalRows}} filas
+toast.close.text = cerrar
+

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

@@ -0,0 +1,14 @@
+fielderror.screenreader.text = Virhe
+fieldlabel.optional.text = Valinnainen
+fieldlabel.required.text = Pakollinen
+severity.error = virhe
+severity.info = tietoa
+severity.success = onnistui
+severity.warning = varoitus
+table.error = Virhe tietojen lataamisessa.
+table.fetchedrows.text = Haettu {{totalRows}} rivi
+table.fetchedrows.text_plural = Haettu yhteens\u00E4 {{totalRows}} rivi\u00E4
+table.rows.text = {{totalRows}} rivi
+table.rows.text_plural = {{totalRows}} rivi\u00E4
+toast.close.text = sulje
+

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

@@ -0,0 +1,14 @@
+fielderror.screenreader.text = Erreur
+fieldlabel.optional.text = Facultatif
+fieldlabel.required.text = Obligatoire
+severity.error = erreur
+severity.info = informations
+severity.success = op\u00E9ration r\u00E9ussie
+severity.warning = avertissement
+table.error = Erreur lors du chargement des donn\u00E9es.
+table.fetchedrows.text = {{totalRows}}\u00A0ligne extraite
+table.fetchedrows.text_plural = {{totalRows}}\u00A0lignes extraites au total
+table.rows.text = {{totalRows}}\u00A0ligne
+table.rows.text_plural = {{totalRows}}\u00A0lignes
+toast.close.text = fermer
+

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

@@ -0,0 +1,14 @@
+fielderror.screenreader.text = Hiba
+fieldlabel.optional.text = Nem k\u00F6telez\u0151
+fieldlabel.required.text = K\u00F6telez\u0151
+severity.error = hiba
+severity.info = inform\u00E1ci\u00F3
+severity.success = sikeres
+severity.warning = figyelmeztet\u00E9s
+table.error = Hiba t\u00F6rt\u00E9nt az adatok bet\u00F6lt\u00E9sekor.
+table.fetchedrows.text = {{totalRows}} sor beolvasva
+table.fetchedrows.text_plural = \u00D6sszesen {{totalRows}} sor beolvasva
+table.rows.text = {{totalRows}} sor
+table.rows.text_plural = {{totalRows}} sor
+toast.close.text = bez\u00E1r\u00E1s
+

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

@@ -0,0 +1,14 @@
+fielderror.screenreader.text = Kesalahan
+fieldlabel.optional.text = Opsional
+fieldlabel.required.text = Wajib diisi
+severity.error = kesalahan
+severity.info = info
+severity.success = berhasil
+severity.warning = peringatan
+table.error = Terjadi kesalahan saat memuat data.
+table.fetchedrows.text = Mendapatkan {{totalRows}} baris
+table.fetchedrows.text_plural = Mendapatkan total {{totalRows}} baris
+table.rows.text = {{totalRows}} baris
+table.rows.text_plural = {{totalRows}} baris
+toast.close.text = tutup
+

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

@@ -0,0 +1,14 @@
+fielderror.screenreader.text = Errore
+fieldlabel.optional.text = Facoltativo
+fieldlabel.required.text = Obbligatorio
+severity.error = errore
+severity.info = info
+severity.success = operazione riuscita
+severity.warning = avviso
+table.error = Errore durante il caricamento dei dati.
+table.fetchedrows.text = Recuperata {{totalRows}} riga
+table.fetchedrows.text_plural = Recuperate {{totalRows}} righe in totale
+table.rows.text = {{totalRows}} riga
+table.rows.text_plural = {{totalRows}} righe
+toast.close.text = chiudi
+