@okta/odyssey-react-mui 1.15.9 → 1.20.0

package/src/labs/datePickerTheme.tsx

@@ -11,12 +11,6 @@
  */
 
 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 odysseyTokens from "@okta/odyssey-design-tokens";
@@ -44,21 +38,33 @@ const dateStyles: StateStyles = {
   hover: ({ theme }) => ({
     backgroundColor: theme.palette.grey[100],
   }),
+  focus: ({ theme }) => ({
+    backgroundColor: "transparent",
+    boxShadow: `0 0 0 2px ${theme.palette.common.white}, 0 0 0 4px ${theme.palette.primary.main}`,
+    outline: "2px solid transparent",
+    outlineOffset: "1px",
+  }),
   hoverSelected: ({ theme }) => ({
     backgroundColor: theme.palette.primary.dark,
     color: theme.palette.primary.contrastText,
+
+    "@media (pointer: fine)": {
+      backgroundColor: theme.palette.primary.main,
+    },
   }),
   outsideOfMonth: ({ theme }) => ({
     backgroundColor: "transparent",
-    color: theme.palette.text.secondary,
+    color: theme.palette.grey[400],
   }),
   selected: ({ theme }) => ({
     backgroundColor: theme.palette.primary.main,
     color: theme.palette.primary.contrastText,
+    border: "none",
   }),
   today: ({ theme }) => ({
     backgroundColor: "transparent",
     color: theme.palette.primary.main,
+    border: "none",
   }),
 };
 
@@ -85,6 +91,10 @@ const yearStyles: StateStyles = {
   default: ({ theme }) => ({
     backgroundColor: "transparent",
     color: theme.palette.text.primary,
+    paddingBlock: theme.spacing(3),
+    paddingInline: theme.spacing(4),
+    width: "auto",
+    height: "auto",
   }),
   disabled: ({ theme }) => ({
     backgroundColor: "transparent",
@@ -104,7 +114,6 @@ const yearStyles: StateStyles = {
   selected: ({ theme }) => ({
     backgroundColor: "transparent",
     color: theme.palette.primary.main,
-    fontWeight: theme.typography.fontWeightBold,
   }),
 };
 
@@ -119,67 +128,71 @@ const yearCheckStyles: StateStyles = {
     maskRepeat: "no-repeat",
     position: "absolute",
     right: theme.spacing(4),
-    width: theme.typography.h6.fontSize,
+    width: theme.spacing(4),
   }),
 };
 
 export const datePickerTheme: ThemeOptions = {
   components: {
-    MuiCalendarPicker: {
+    MuiDateCalendar: {
       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),
+        root: () => ({
           width: "100%",
         }),
       },
     },
-    MuiCalendarOrClockPicker: {
+    MuiPickersLayout: {
       styleOverrides: {
-        root: () => ({
-          "& > div": {
-            width: `${(296 / 16) * (16 / 14)}rem`,
+        root: {
+          display: "block",
+        },
+        contentWrapper: ({ theme }) => ({
+          width: `${352 / 14}rem`,
+          paddingInline: theme.spacing(3),
+
+          "@media (pointer: fine)": {
+            width: `${352 / 14}rem`,
+            borderColor: theme.palette.divider,
+            borderStyle: theme.mixins.borderStyle,
+            borderWidth: theme.mixins.borderWidth,
+            borderRadius: theme.mixins.borderRadius,
+            paddingBlock: theme.spacing(3),
+            paddingInline: theme.spacing(3),
           },
         }),
       },
-      defaultProps: {
-        components: {
-          LeftArrowIcon: ArrowLeftIcon,
-          RightArrowIcon: ArrowRightIcon,
-          SwitchViewIcon: ChevronDownIcon,
-        },
-      },
     },
-    MuiDesktopDatePicker: {
-      defaultProps: {
-        components: {
-          OpenPickerIcon: CalendarIcon,
-        },
+    MuiDatePickerToolbar: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          paddingInline: theme.spacing(4),
+          paddingBlock: theme.spacing(4),
+        }),
+        title: ({ theme }) => ({
+          marginBlockStart: theme.spacing(1),
+          marginBlockEnd: 0,
+        }),
       },
     },
-    MuiDayPicker: {
+    MuiDayCalendar: {
       styleOverrides: {
         header: ({ theme }) => ({
-          gap: theme.spacing(1),
           justifyContent: "space-between",
-          paddingLeft: theme.spacing(popupSpacingValue),
-          paddingRight: theme.spacing(popupSpacingValue),
+          marginBlockStart: theme.spacing(5),
+          paddingInline: theme.spacing(1),
         }),
-        slideTransition: () => ({
-          minHeight: `${(214 / 16) * (16 / 14)}rem`,
+        monthContainer: ({ theme }) => ({
+          // padding needed to be able to show focus state for calendar days
+          paddingBlock: theme.spacing(1),
+          paddingInline: theme.spacing(1),
         }),
         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),
+          padding: 0,
+          gap: theme.spacing(1),
 
           "&:last-child": {
             marginBottom: 0,
@@ -187,23 +200,27 @@ export const datePickerTheme: ThemeOptions = {
         }),
         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),
+          height: "auto",
+          fontSize: theme.typography.overline.fontSize,
+          fontWeight: theme.typography.overline.fontWeight,
+          lineHeight: theme.typography.overline.lineHeight,
+          letterSpacing: theme.typography.overline.letterSpacing,
+          textTransform: theme.typography.overline.textTransform,
         }),
       },
     },
     MuiDatePicker: {
       defaultProps: {
-        PopperProps: {
-          popperOptions: {
-            placement: "auto-start",
+        slotProps: {
+          popper: {
+            popperOptions: {
+              placement: "bottom-start",
+            },
           },
         },
         showDaysOutsideCurrentMonth: true,
@@ -213,17 +230,27 @@ export const datePickerTheme: ThemeOptions = {
     MuiPickersCalendarHeader: {
       styleOverrides: {
         label: ({ theme }) => ({
-          fontSize: theme.typography.h6.fontSize,
-          fontWeight: theme.typography.fontWeightBold,
+          ...theme.typography.h5,
+          margin: 0,
         }),
         root: ({ theme }) => ({
-          marginBottom: theme.spacing(1),
-          marginTop: 0,
-          paddingLeft: `calc(${theme.spacing(
-            popupSpacingValue,
-          )} + ${theme.spacing(2)})`,
-          paddingRight: theme.spacing(popupSpacingValue),
+          justifyContent: "space-between",
+          marginBlockEnd: 0,
+          marginBlockStart: 0,
+          maxHeight: theme.spacing(8),
+          minHeight: theme.spacing(8),
+          paddingInline: theme.spacing(1),
+          paddingBlockStart: theme.spacing(1),
+          paddingBlockEnd: theme.spacing(4),
           width: "auto",
+          borderBottom: `1px solid ${theme.palette.grey[100]}`,
+        }),
+        labelContainer: {
+          marginRight: 0,
+          overflow: "visible",
+        },
+        switchViewButton: ({ theme }) => ({
+          marginInlineStart: theme.spacing(1),
         }),
       },
     },
@@ -258,15 +285,13 @@ export const datePickerTheme: ThemeOptions = {
               theme,
             }),
             "&:hover": dateStyles.hover({ theme }),
-
-            "&:not(.Mui-selected)": {
-              border: "none",
-            },
+            "&:focus": dateStyles.focus({ theme }),
 
             "&.Mui-selected, &.Mui-selected:focus": dateStyles.selected({
               theme,
             }),
             "&.Mui-selected:hover": dateStyles.hoverSelected({ theme }),
+
             "&.Mui-disabled": dateStyles.disabled({ theme }),
           },
         ],
@@ -286,39 +311,38 @@ export const datePickerTheme: ThemeOptions = {
         }),
       },
     },
-    MuiYearPicker: {
+    MuiYearCalendar: {
       styleOverrides: {
         root: ({ theme }) => ({
-          alignItems: "flex-start",
-          flexDirection: "column",
-          flexWrap: "nowrap",
+          display: "block",
+          width: "auto",
+          maxHeight: `${284 / 14}rem`,
           marginBottom: `-${theme.spacing(popupSpacingValue)}`,
           marginInlineEnd: 0,
-          maxHeight: `${(284 / 16) * (16 / 14)}rem`,
-          paddingLeft: 0,
-          paddingRight: 0,
+          paddingInline: 0,
         }),
       },
     },
-    PrivatePickersYear: {
+    MuiPickersYear: {
       styleOverrides: {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore TEMP. Arrays are valid styles return values for Emotion.
-        button: ({ theme }) => [
+        root: () => ({
+          width: "100%",
+          justifyContent: "flex-start",
+        }),
+        yearButton: ({ theme }) => [
           yearStyles.default({ theme }),
           {
-            alignItems: "center",
-            borderRadius: 0,
+            position: "relative",
             display: "flex",
-            // @ts-expect-error TEMP. This broken when upgrading MUI.
-            fontSize: theme.typography.body1.fontSize,
+            alignItems: "center",
             justifyContent: "flex-start",
+            width: "100%",
             marginBottom: 0,
             marginTop: 0,
-            // @ts-expect-error TEMP. This broken when upgrading MUI.
-            paddingLeft: theme.spacing(7),
-            position: "relative",
-            width: "100%",
+            paddingBlock: theme.spacing(3),
+            paddingInline: theme.spacing(4),
+            borderRadius: theme.shape.borderRadius,
+            fontSize: theme.typography.body1.fontSize,
 
             "&:hover": yearStyles.hover({ theme }),
 
@@ -329,9 +353,6 @@ export const datePickerTheme: ThemeOptions = {
             "&.Mui-disabled": yearStyles.disabled({ theme }),
           },
         ],
-        root: () => ({
-          width: "100%",
-        }),
         selected: ({ theme }) => ({
           "&, &:focus": yearStyles.selected({ theme }),
           "&:hover": yearStyles.hoverSelected({ theme }),
@@ -339,5 +360,20 @@ export const datePickerTheme: ThemeOptions = {
         }),
       },
     },
+    MuiPickersArrowSwitcher: {
+      styleOverrides: {
+        root: {
+          ":dir(rtl)": {
+            flexDirection: "row-reverse",
+          },
+        },
+        spacer: ({ theme }) => ({
+          width: theme.spacing(3),
+        }),
+        button: {
+          margin: 0,
+        },
+      },
+    },
   },
 };

package/src/labs/index.ts

@@ -17,17 +17,23 @@ export type { LocalizationProviderProps } from "@mui/x-date-pickers";
 export * from "./DatePicker";
 export * from "./datePickerTheme";
 
+export * from "./DataComponents";
+
 /** @deprecated Will be removed in a future Odyssey version in lieu of the one shipping with DataTable */
 export * from "./DataTablePagination";
 export * from "./DataFilters";
-export * from "./Drawer";
 export * from "./FileUpload";
+export * from "./Layout";
 export * from "./materialReactTableTypes";
 /** @deprecated Will be removed in a future Odyssey version in lieu of DataTable */
 export * from "./StaticTable";
+export * from "./PageTemplate";
 /** @deprecated Will be removed in a future Odyssey version in lieu of DataTable */
 export * from "./PaginatedTable";
 
 export * from "./GroupPicker";
 
 export * from "./Switch";
+
+export * from "./NavAccordion";
+export * from "./SideNav";

package/src/labs/useDatePickerTranslations.ts

@@ -0,0 +1,92 @@
+/*!
+ * 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 { PickersLocaleText } from "@mui/x-date-pickers";
+import { DateTime } from "luxon";
+import { useTranslation } from "react-i18next";
+
+export const useDatePickerTranslations = (): PickersLocaleText<DateTime> => {
+  const { t } = useTranslation();
+
+  return {
+    calendarViewSwitchingButtonAriaLabel: (view) =>
+      view === "year"
+        ? `${t("picker.view.navigation.switch.calendarview")}`
+        : `${t("picker.view.navigation.switch.yearview")}`,
+    // not translated because we aren't using it
+    calendarWeekNumberHeaderLabel: "",
+    calendarWeekNumberHeaderText: "",
+    calendarWeekNumberAriaLabelText: () => "",
+    calendarWeekNumberText: () => "",
+
+    cancelButtonLabel: `${t("picker.labels.action.cancel")}`,
+    clearButtonLabel: `${t("clear.text")}`,
+    clockLabelText: (view, time, adapter) =>
+      `${t("picker.labels.select")} ${view}. ${
+        time === null
+          ? `${t("picker.labels.clock.empty")}`
+          : `${t("picker.labels.clock.selected")} ${adapter.format(time, "fullTime")}`
+      }`,
+    datePickerToolbarTitle: `${t("picker.date.toolbar.title")}`,
+    dateRangePickerToolbarTitle: `${t("picker.daterange.toolbar.title")}`,
+    dateTableLabel: `${t("picker.labels.table.date")}`,
+    dateTimePickerToolbarTitle: `${t("picker.datetime.toolbar.title")}`,
+    day: `${t("picker.view.name.day")}`,
+    empty: `${t("picker.labels.empty")}`,
+    end: `${t("picker.labels.range.end")}`,
+    endDate: `${t("picker.labels.range.enddate")}`,
+    endTime: `${t("picker.labels.range.endTime")}`,
+    fieldClearLabel: `${t("picker.labels.field.clear")}`,
+    fieldDayPlaceholder: () => `${t("picker.field.placeholder.day")}`,
+    fieldMonthPlaceholder: () => `${t("picker.field.placeholder.month")}`,
+    fieldYearPlaceholder: () => `${t("picker.field.placeholder.year")}`,
+    fieldHoursPlaceholder: () => `${t("picker.field.placeholder.hours")}`,
+    fieldMinutesPlaceholder: () => `${t("picker.field.placeholder.minutes")}`,
+    fieldSecondsPlaceholder: () => `${t("picker.field.placeholder.seconds")}`,
+    fieldMeridiemPlaceholder: () => `${t("picker.field.placeholder.meridiem")}`,
+    // not translated because we aren't using it
+    fieldWeekDayPlaceholder: () => "",
+    hours: `${t("picker.view.name.hours")}`,
+    hoursClockNumberText: (hours) =>
+      `${hours} ${t("picker.labels.clock.hours")}`,
+    meridiem: `${t("picker.view.name.meridiem")}`,
+    minutes: `${t("picker.view.name.minutes")}`,
+    minutesClockNumberText: (minutes) =>
+      `${minutes} ${t("picker.labels.clock.minutes")}`,
+    month: `${t("picker.view.name.month")}`,
+    nextMonth: `${t("picker.calendar.navigation.nextmonth")}`,
+    okButtonLabel: `${t("picker.labels.action.apply")}`,
+    openDatePickerDialogue: (value, utils) =>
+      value !== null && utils.isValid(value)
+        ? `${t("picker.labels.date.choose")}, ${t("picker.labels.date.selected")} ${utils.format(value, "fullDate")}`
+        : `${t("picker.labels.date.choose")}`,
+    openNextView: `${t("picker.view.navigation.open.nextview")}`,
+    openPreviousView: `${t("picker.view.navigation.open.previousview")}`,
+    openTimePickerDialogue: (value, utils) =>
+      value !== null && utils.isValid(value)
+        ? `${t("picker.labels.time.choose")}, ${t("picker.labels.time.selected")} ${utils.format(value, "fullTime")}`
+        : `${t("picker.labels.time.choose")}`,
+    previousMonth: `${t("picker.calendar.navigation.previousmonth")}`,
+    seconds: `${t("picker.view.name.seconds")}`,
+    secondsClockNumberText: (seconds) =>
+      `${seconds} ${t("picker.labels.clock.seconds")}`,
+    selectViewText: (view) => `${t("picker.labels.select")} ${view}`,
+    start: `${t("picker.labels.range.start")}`,
+    startDate: `${t("picker.labels.range.startdate")}`,
+    startTime: `${t("picker.labels.range.starttime")}`,
+    todayButtonLabel: `${t("picker.labels.action.today")}`,
+    timePickerToolbarTitle: `${t("picker.time.toolbar.title")}`,
+    timeTableLabel: `${t("picker.labels.table.time")}`,
+    weekDay: `${t("picker.view.name.weekday")}`,
+    year: `${t("picker.view.name.year")}`,
+  };
+};

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

@@ -1,6 +1,63 @@
 breadcrumbs.home.text = Home
 breadcrumbs.label.text = Breadcrumbs
-close.text = close
+close.text = Close
+clear.text = Clear
+open.text = Open
+picker.calendar.navigation.nextmonth = Next month
+picker.calendar.navigation.previousmonth = Previous month
+picker.date.toolbar.title = Selected date
+picker.daterange.toolbar.title = Select date range
+picker.datetime.toolbar.title = Select date & time
+# placeholder text in date field
+picker.field.placeholder.day = DD
+# placeholder text in date/time field
+picker.field.placeholder.hours = hh
+# placeholder text in date field
+picker.field.placeholder.meridiem = aa
+# placeholder text in date/time field
+picker.field.placeholder.minutes = mm
+# placeholder text in date field
+picker.field.placeholder.month = MM
+# placeholder text in date/time field
+picker.field.placeholder.seconds = ss
+# placeholder text in date field
+picker.field.placeholder.year = YYYY
+picker.labels.action.apply = Apply
+picker.labels.action.cancel = Cancel
+picker.labels.action.today = Today
+picker.labels.clock.empty = No time selected
+picker.labels.clock.hours = hours
+picker.labels.clock.minutes = minutes
+picker.labels.clock.minutes = seconds
+picker.labels.clock.selected = Selected time is
+picker.labels.date.choose = Choose date
+picker.labels.date.selected = Selected date is
+picker.labels.empty = Empty
+picker.labels.field.clear = Clear value
+picker.labels.range.end = End
+picker.labels.range.enddate = End date
+picker.labels.range.endtime = End time
+picker.labels.range.start = Start
+picker.labels.range.startdate = Start date
+picker.labels.range.starttime = Start time
+picker.labels.select = Select
+picker.labels.table.date = pick date
+picker.labels.table.time = pick time
+picker.labels.time.choose = Choose time
+picker.time.toolbar.title = Select time
+picker.view.name.day = Day
+picker.view.name.hours = Hours
+picker.view.name.meridiem = Meridiem
+picker.view.name.minutes = Minutes
+picker.view.name.month = Month
+picker.view.name.seconds = Seconds
+picker.view.name.weekday = Week day
+picker.view.name.year = Year
+picker.view.navigation.open.nextview = Open next view
+picker.view.navigation.open.previousview = Open previous view
+picker.view.navigation.switch.calendarview = year view is open, switch to calendar view
+picker.view.navigation.switch.yearview = calendar view is open, switch to year view
+
 fielderror.screenreader.text = Error
 fieldlabel.optional.text = Optional
 fieldlabel.required.text = Required
@@ -23,7 +80,6 @@ severity.success = success
 severity.warning = warning
 switch.active = Active
 switch.inactive = Inactive
-table.actions = Actions
 table.columnvisibility.arialabel = Show/hide columns
 table.density.arialabel = Table density
 table.draghandle.arialabel = Drag row to reorder. Or, press space or enter to start and stop reordering and esc to cancel.
@@ -39,16 +95,26 @@ table.fetchedrows.text_plural = Fetched {{totalRows}} total rows
 table.moreactions.arialabel = More actions
 table.noresults.heading = There are no results.
 table.noresults.text = Try a different query.
-table.pagination.loadmore = Show more
-table.pagination.next = Next page
-table.pagination.previous = Previous page
-table.pagination.page = Page
-table.pagination.rowsperpage = Rows per page
-table.pagination.rowswithtotal = {{firstRow}}-{{lastRow}} of {{totalRows}} rows
-table.pagination.rowswithouttotal = {{firstRow}}-{{lastRow}} rows
 table.reorder.backward = Send backward
 table.reorder.forward = Bring forward
 table.reorder.toback = Send to back
 table.reorder.tofront = Bring to front
 table.rows.text = {{totalRows}} row
-table.rows.text_plural = {{totalRows}} rows
+table.rows.text_plural = {{totalRows}} rows
+pagination.loadmore = Show more
+pagination.next = Next page
+pagination.previous = Previous page
+pagination.page = Page
+pagination.rowsperpage = Rows per page
+pagination.rowswithtotal = {{firstRow}}-{{lastRow}} of {{totalRows}} rows
+pagination.rowswithouttotal = {{firstRow}}-{{lastRow}} rows
+table.actions.selectall = Select all
+table.actions.selectnone = Select none
+table.actions.selectsome = {{selectedRowCount}} selected
+table.rowexpansion.expand = Expand
+table.rowexpansion.expandall = Expand all
+table.rowexpansion.collapse = Collapse
+table.rowexpansion.collapseall = Collapse all
+dataview.layout.table = Table
+dataview.layout.grid = Grid
+dataview.layout.list = List

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

@@ -1,6 +1,62 @@
 breadcrumbs.home.text = Domovsk\u00E1 str\u00E1nka
 breadcrumbs.label.text = Drobe\u010Dkov\u00E1 navigace
 close.text = zav\u0159\u00EDt
+clear.text = Vymazat
+picker.calendar.navigation.nextmonth = Dal\u0161\u00ED m\u011Bs\u00EDc
+picker.calendar.navigation.previousmonth = P\u0159edchoz\u00ED m\u011Bs\u00EDc
+picker.date.toolbar.title = Vybran\u00E9 datum
+picker.daterange.toolbar.title = Vybrat rozmez\u00ED dat
+picker.datetime.toolbar.title = Vybrat datum a \u010Das
+# placeholder text in date field
+picker.field.placeholder.day = DD
+# placeholder text in date/time field
+picker.field.placeholder.hours = hh
+# placeholder text in date field
+picker.field.placeholder.meridiem = dop./odp.
+# placeholder text in date/time field
+picker.field.placeholder.minutes = mm
+# placeholder text in date field
+picker.field.placeholder.month = MM
+# placeholder text in date/time field
+picker.field.placeholder.seconds = ss
+# placeholder text in date field
+picker.field.placeholder.year = RRRR
+picker.labels.action.apply = Pou\u017E\u00EDt
+picker.labels.action.cancel = Zru\u0161it
+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.selected = Vybran\u00FD \u010Das je
+picker.labels.date.choose = Zvolit datum
+picker.labels.date.selected = Vybran\u00E9 datum je
+picker.labels.empty = Pr\u00E1zdn\u00E9
+picker.labels.field.clear = Vymazat hodnotu
+picker.labels.range.end = Konec
+picker.labels.range.enddate = Koncov\u00E9 datum
+picker.labels.range.endtime = Koncov\u00FD \u010Das
+picker.labels.range.start = Za\u010D\u00E1tek
+picker.labels.range.startdate = Po\u010D\u00E1te\u010Dn\u00ED datum
+picker.labels.range.starttime = Po\u010D\u00E1te\u010Dn\u00ED \u010Das
+picker.labels.select = Vybrat
+picker.labels.table.date = vybrat datum
+picker.labels.table.time = vybrat \u010Das
+picker.labels.time.choose = Zvolit \u010Das
+picker.time.toolbar.title = Vybrat \u010Das
+picker.view.name.day = Den
+picker.view.name.hours = Hodiny
+picker.view.name.meridiem = Dopoledne/odpoledne
+picker.view.name.minutes = Minuty
+picker.view.name.month = M\u011Bs\u00EDc
+picker.view.name.seconds = Sekundy
+picker.view.name.weekday = Den v t\u00FDdnu
+picker.view.name.year = Rok
+picker.view.navigation.open.nextview = Otev\u0159\u00EDt dal\u0161\u00ED zobrazen\u00ED
+picker.view.navigation.open.previousview = Otev\u0159\u00EDt p\u0159edchoz\u00ED zobrazen\u00ED
+picker.view.navigation.switch.calendarview = je otev\u0159eno zobrazen\u00ED roku, m\u016F\u017Eete p\u0159epnout do zobrazen\u00ED kalend\u00E1\u0159e
+picker.view.navigation.switch.yearview = je otev\u0159eno zobrazen\u00ED kalend\u00E1\u0159e, m\u016F\u017Eete p\u0159epnout do zobrazen\u00ED roku
+
 fielderror.screenreader.text = Chyba
 fieldlabel.optional.text = Voliteln\u00E9
 fieldlabel.required.text = Povinn\u00E9
@@ -39,16 +95,17 @@ table.fetchedrows.text_plural = Celkem na\u010Dteno \u0159\u00E1dk\u016F: {{tota
 table.moreactions.arialabel = Dal\u0161\u00ED akce
 table.noresults.heading = Nejsou k dispozici \u017E\u00E1dn\u00E9 v\u00FDsledky.
 table.noresults.text = Zkuste zadat jin\u00FD dotaz.
-table.pagination.loadmore = Zobrazit v\u00EDce
-table.pagination.next = Dal\u0161\u00ED str\u00E1nka
-table.pagination.previous = P\u0159edchoz\u00ED str\u00E1nka
-table.pagination.page = Str\u00E1nka
-table.pagination.rowsperpage = Po\u010Det \u0159\u00E1dk\u016F na str\u00E1nku
-table.pagination.rowswithtotal = \u0158\u00E1dky {{firstRow}}\u2013{{lastRow}} z {{totalRows}}
-table.pagination.rowswithouttotal = \u0158\u00E1dky {{firstRow}}\u2013{{lastRow}}
 table.reorder.backward = Odeslat dozadu
 table.reorder.forward = P\u0159en\u00E9st dop\u0159edu
 table.reorder.toback = Odeslat na pozad\u00ED
 table.reorder.tofront = P\u0159en\u00E9st do pop\u0159ed\u00ED
 table.rows.text = {{totalRows}} \u0159\u00E1dek
 table.rows.text_plural = Po\u010Det \u0159\u00E1dk\u016F: {{totalRows}}
+pagination.loadmore = Zobrazit v\u00EDce
+pagination.next = Dal\u0161\u00ED str\u00E1nka
+pagination.previous = P\u0159edchoz\u00ED str\u00E1nka
+pagination.page = Str\u00E1nka
+pagination.rowsperpage = Po\u010Det \u0159\u00E1dk\u016F na str\u00E1nku
+pagination.rowswithtotal = \u0158\u00E1dky {{firstRow}}\u2013{{lastRow}} z {{totalRows}}
+pagination.rowswithouttotal = \u0158\u00E1dky {{firstRow}}\u2013{{lastRow}}
+