@okta/odyssey-react-mui 1.28.1 → 1.29.0

package/src/labs/{useOdysseyDateFields.ts → DatePickers/useOdysseyDateFields.ts}

@@ -10,12 +10,26 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  FocusEventHandler,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { DateTime } from "luxon";
 import { useTranslation } from "react-i18next";
 
-import { FieldComponentProps } from "../FieldComponentProps";
-import { ComponentControlledState, getControlState } from "../inputUtils";
+import { FieldComponentProps } from "../../FieldComponentProps";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  CalendarIcon,
+  ChevronDownIcon,
+} from "../../icons.generated";
+import { ComponentControlledState, getControlState } from "../../inputUtils";
+import { TimeZoneOption, TimeZonePickerProps } from "../TimeZonePicker";
 import { useDateFieldsTranslations } from "./useDateFieldsTranslations";
 
 const { CONTROLLED } = ComponentControlledState;
@@ -25,11 +39,6 @@ const isValidDateTime = (dateTime: DateTime) => dateTime.isValid;
 const utcDateTimeFromIsoString = (dateString: string) =>
   DateTime.fromISO(dateString).toUTC();
 
-export type TimeZoneOption = {
-  label: string;
-  value: string;
-};
-
 export type OdysseyDateFieldProps = {
   /**
    * default value when uncontrolled.
@@ -51,6 +60,10 @@ export type OdysseyDateFieldProps = {
    * Disable specific year(s).
    */
   isYearEnabled?: (date: Date) => boolean;
+  /**
+   * The label for the `input` element.
+   */
+  label: string;
   /**
    * Minimum date allowed.
    *
@@ -63,7 +76,36 @@ export type OdysseyDateFieldProps = {
    * NOTE: If not a valid date string in ISO format, `maxDate` will not apply
    */
   maxDate?: string;
+  /**
+   * Callback fired when the a date field loses focus
+   */
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  /**
+   * Callback fired when the a date is selected with the calendar.
+   */
+  onCalendarDateChange?: ({
+    value,
+    timeZone,
+  }: {
+    value: string | undefined;
+    timeZone: string;
+  }) => void;
+  /**
+   * Callback fired when the date/text input changes.
+   */
+  onInputChange?: (value: string) => void;
+  /**
+   * a default timezone for the picker
+   */
   timeZone?: string;
+  /**
+   * If provided, a `TimeZonePicker` will be rendered below the DatePicker. These options will populate as the Autocomplete options
+   */
+  timeZoneOptions?: TimeZoneOption[];
+  /**
+   * label for `TimeZonePicker`
+   */
+  timeZonePickerLabel?: TimeZonePickerProps["label"];
   /**
    * value when controlled.
    *
@@ -86,12 +128,28 @@ export const useOdysseyDateFields = ({
   isYearEnabled = () => true,
   minDate: minDateProp,
   maxDate: maxDateProp,
+  onInputChange: onInputChangeProp,
   timeZone = "system",
   value,
-}: OdysseyDateFieldProps & Pick<FieldComponentProps, "errorMessage">) => {
-  const internalValueRef = useRef<DateTime | null>(null);
+}: Pick<
+  OdysseyDateFieldProps,
+  | "defaultValue"
+  | "isDateEnabled"
+  | "isMonthEnabled"
+  | "isYearEnabled"
+  | "minDate"
+  | "maxDate"
+  | "onInputChange"
+  | "timeZone"
+  | "value"
+> &
+  Pick<FieldComponentProps, "errorMessage">) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [popperElement, setPopperElement] = useState<HTMLInputElement | null>();
   const [internalTimeZone, setInternalTimeZone] = useState(timeZone);
 
+  const internalValueRef = useRef<DateTime | null>(null);
+
   const [validationDateRanges, setValidationDateRanges] =
     useState<ValidationDateRanges>({
       minDate: undefined,
@@ -183,19 +241,63 @@ export const useOdysseyDateFields = ({
     return null;
   }, [defaultValue, validationDateRanges, value]);
 
+  const onTimeZoneChange = useCallback(
+    (timeZone: string | undefined) => {
+      if (timeZone && isValidTimeZone(timeZone)) {
+        setInternalTimeZone(timeZone);
+      }
+    },
+    [isValidTimeZone, setInternalTimeZone],
+  );
+
+  const toggleCalendarVisibility = useCallback(
+    () => setIsOpen(!isOpen),
+    [isOpen, setIsOpen],
+  );
+
+  const closeCalendar = useCallback(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
+
+  const formatDayOfWeek = (date: DateTime) => date.toFormat("EEE");
+
+  const onInputChange = useCallback<(value: string) => void>(
+    (value) => {
+      onInputChangeProp?.(value);
+    },
+    [onInputChangeProp],
+  );
+
+  const commonIcons = {
+    ArrowLeftIcon: ArrowLeftIcon,
+    ArrowRightIcon: ArrowRightIcon,
+    CalendarIcon: CalendarIcon,
+    ChevronDownIcon: ChevronDownIcon,
+  };
+
   return {
+    closeCalendar,
+    commonIcons,
     defaultedLanguageCode,
     formatDateTimeToUtcIsoDateString,
+    formatDayOfWeek,
     inputValues,
     internalTimeZone,
     internalValueRef,
+    isOpen,
     isValidTimeZone,
     localeText,
     maxDate: validationDateRanges.maxDate,
     minDate: validationDateRanges.minDate,
+    popperElement,
+    onInputChange,
+    onTimeZoneChange,
     setInternalTimeZone,
+    setIsOpen,
+    setPopperElement,
     shouldDisableDate,
     shouldDisableMonth,
     shouldDisableYear,
+    toggleCalendarVisibility,
   };
 };

package/src/labs/PageTemplate.tsx

@@ -20,7 +20,7 @@ import {
 import { DocumentationIcon } from "../icons.generated";
 import { Heading4, Subordinate } from "../Typography";
 import { Link } from "../Link";
-import { useHasUiShell } from "./UiShell";
+import { useHasUiShell } from "../ui-shell/UiShell/useHasUiShell";
 
 export type PageTemplateProps = {
   /**

package/src/labs/SideNav/SideNav.tsx

@@ -39,6 +39,7 @@ import { SideNavFooterContent } from "./SideNavFooterContent";
 import { SideNavItemContentContext } from "./SideNavItemContentContext";
 import { SideNavToggleButton } from "./SideNavToggleButton";
 import { SortableList } from "./SortableList/SortableList";
+import { Overline } from "../../Typography";
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { arrayMove } from "@dnd-kit/sortable";
 
@@ -62,7 +63,6 @@ const StyledCollapsibleContent = styled("div", {
     position: "relative",
     display: "inline-grid",
     gridTemplateColumns: DEFAULT_SIDE_NAV_WIDTH,
-    // gridTemplateRows: "max-content 1fr max-content",
     height: "100%",
     transition: `grid-template-columns ${odysseyDesignTokens.TransitionDurationMain}, opacity 300ms`,
     transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
@@ -129,7 +129,7 @@ const StyledSideNav = styled("nav", {
       zIndex: 2,
     },
 
-    "&:has([data-sidenav-toggle='true']:hover), &:has([data-sidenav-toggle='true']:focus)":
+    "&:has([data-sidenav-toggle='true']:hover), &:has([data-sidenav-toggle='true']:focus-visible)":
       {
         ...(isSideNavCollapsed && {
           "&::after": {
@@ -177,13 +177,16 @@ const SideNavListContainer = styled("ul")(() => ({
   padding: 0,
   listStyle: "none",
   listStyleType: "none",
+  margin: 0,
 }));
 
 const SideNavScrollableContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  display: "grid",
+  gridTemplateRows: "1fr max-content",
   flex: "1 1 100%",
-  overflowY: "auto",
+  overflowY: "scroll",
   paddingInline: odysseyDesignTokens.Spacing2,
 }));
 
@@ -192,19 +195,19 @@ const SectionHeaderContainer = styled("li", {
 })(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
   paddingBlock: odysseyDesignTokens.Spacing1,
   paddingInline: odysseyDesignTokens.Spacing4,
+  marginBlock: `${odysseyDesignTokens.Spacing3}`,
+  color: odysseyDesignTokens.HueNeutral600,
 }));
 
-const SectionHeader = styled("h3", {
+const SideNavFooter = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
-  fontFamily: odysseyDesignTokens.TypographyFamilyHeading,
-  fontSize: odysseyDesignTokens.TypographySizeOverline,
-  fontWeight: odysseyDesignTokens.TypographyWeightHeadingBold,
-  color: odysseyDesignTokens.HueNeutral600,
-  textTransform: "uppercase",
+  flexShrink: 0,
+  padding: odysseyDesignTokens.Spacing4,
+  backgroundColor: odysseyDesignTokens.HueNeutralWhite,
 }));
 
-const SideNavFooter = styled("div", {
+const PersistentSideNavFooter = styled(SideNavFooter, {
   shouldForwardProp: (prop) =>
     prop !== "isContentScrollable" && prop !== "odysseyDesignTokens",
 })(
@@ -215,11 +218,10 @@ const SideNavFooter = styled("div", {
     isContentScrollable: boolean;
     odysseyDesignTokens: DesignTokens;
   }) => ({
-    flexShrink: 0,
     transitionProperty: "box-shadow",
     transitionDuration: odysseyDesignTokens.TransitionDurationMain,
     transitionTiming: odysseyDesignTokens.TransitionTimingMain,
-    backgroundColor: odysseyDesignTokens.HueNeutralWhite,
+    zIndex: 2,
     // The box shadow should appear above the footer only if the scrollable region has overflow
     ...(isContentScrollable && {
       boxShadow: "0px -8px 8px -8px rgba(39, 39, 39, 0.08)",
@@ -230,22 +232,22 @@ const SideNavFooter = styled("div", {
 const SideNavFooterItemsContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
-  paddingBlock: odysseyDesignTokens.Spacing4,
-  // paddingBlockEnd: odysseyDesignTokens.Spacing4,
-  paddingInline: odysseyDesignTokens.Spacing5,
   display: "flex",
   flexWrap: "wrap",
   alignItems: "center",
   fontSize: odysseyDesignTokens.TypographySizeOverline,
 
-  a: {
-    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
+  "a, span": {
+    color: odysseyDesignTokens.HueNeutral600,
+    transition: `color ${odysseyDesignTokens.TransitionDurationMain}`,
+
+    "&:visited": {
+      color: odysseyDesignTokens.HueNeutral600,
+    },
 
     "&:hover": {
       textDecoration: "none",
-    },
-    "&:visited": {
-      color: odysseyDesignTokens.TypographyColorHeading,
+      color: odysseyDesignTokens.HueNeutral900,
     },
   },
 }));
@@ -292,8 +294,8 @@ const SideNav = ({
   sideNavItems,
 }: SideNavProps) => {
   const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);
-  const [isContentScrollable, setIsContentScrollable] = useState(false);
   const [hasContentScrolled, setHasContentScrolled] = useState(false);
+  const [isContentScrollable, setIsContentScrollable] = useState(false);
   const scrollableContentRef = useRef<HTMLUListElement>(null);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
   const intersectionObserverRef = useRef<IntersectionObserver | null>(null);
@@ -596,11 +598,7 @@ const SideNav = ({
                             key={id}
                             odysseyDesignTokens={odysseyDesignTokens}
                           >
-                            <SectionHeader
-                              odysseyDesignTokens={odysseyDesignTokens}
-                            >
-                              {label}
-                            </SectionHeader>
+                            <Overline component="h3">{label}</Overline>
                           </SectionHeaderContainer>
                         );
                       } else if (childNavItems) {
@@ -662,22 +660,23 @@ const SideNav = ({
                       }
                     })}
               </SideNavListContainer>
+              {!isLoading && footerItems && !hasCustomFooter && (
+                <SideNavFooter odysseyDesignTokens={odysseyDesignTokens}>
+                  <SideNavFooterItemsContainer
+                    odysseyDesignTokens={odysseyDesignTokens}
+                  >
+                    <SideNavFooterContent footerItems={footerItems} />
+                  </SideNavFooterItemsContainer>
+                </SideNavFooter>
+              )}
             </SideNavScrollableContainer>
-            {!isLoading && (footerItems || hasCustomFooter) && (
-              <SideNavFooter
-                odysseyDesignTokens={odysseyDesignTokens}
+            {!isLoading && !footerItems && hasCustomFooter && (
+              <PersistentSideNavFooter
                 isContentScrollable={isContentScrollable}
+                odysseyDesignTokens={odysseyDesignTokens}
               >
-                {hasCustomFooter
-                  ? footerComponent
-                  : footerItems && (
-                      <SideNavFooterItemsContainer
-                        odysseyDesignTokens={odysseyDesignTokens}
-                      >
-                        <SideNavFooterContent footerItems={footerItems} />
-                      </SideNavFooterItemsContainer>
-                    )}
-              </SideNavFooter>
+                {footerComponent}
+              </PersistentSideNavFooter>
             )}
           </StyledOpacityTransitionContainer>
         </StyledCollapsibleContent>

package/src/labs/SideNav/SideNavHeader.tsx

@@ -20,7 +20,7 @@ import {
 } from "../../OdysseyDesignTokensContext";
 import { SideNavLogo } from "./SideNavLogo";
 import { SideNavProps } from "./types";
-import { Heading6 } from "../../Typography";
+import { Heading5 } from "../../Typography";
 import { TOP_NAV_HEIGHT } from "../TopNav";
 
 const SideNavHeaderContainer = styled("div", {
@@ -39,7 +39,8 @@ const SideNavLogoContainer = styled("div", {
   display: "flex",
   alignItems: "center",
   height: TOP_NAV_HEIGHT,
-  padding: odysseyDesignTokens.Spacing4,
+  paddingBlock: odysseyDesignTokens.Spacing4,
+  paddingInline: odysseyDesignTokens.Spacing5,
 
   "svg, img": {
     maxHeight: "100%",
@@ -54,7 +55,8 @@ const SideNavHeadingContainer = styled("div", {
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center",
-  padding: odysseyDesignTokens.Spacing4,
+  paddingBlock: odysseyDesignTokens.Spacing4,
+  paddingInline: odysseyDesignTokens.Spacing5,
   width: "100%",
 
   ["& .MuiTypography-root"]: {
@@ -93,7 +95,7 @@ const SideNavHeader = ({
       </SideNavLogoContainer>
 
       <SideNavHeadingContainer odysseyDesignTokens={odysseyDesignTokens}>
-        <Heading6 component="h2">{isLoading ? <Skeleton /> : appName}</Heading6>
+        <Heading5 component="h2">{isLoading ? <Skeleton /> : appName}</Heading5>
       </SideNavHeadingContainer>
     </SideNavHeaderContainer>
   );

package/src/labs/SideNav/SideNavItemContent.tsx

@@ -12,12 +12,13 @@
 
 import styled from "@emotion/styled";
 import {
-  useRef,
-  useImperativeHandle,
-  useCallback,
+  KeyboardEventHandler,
   memo,
-  KeyboardEvent,
+  MouseEventHandler,
+  useCallback,
+  useImperativeHandle,
   useMemo,
+  useRef,
 } from "react";
 import { Link as NavItemLink } from "@mui/material";
 import {
@@ -113,7 +114,7 @@ export const getBaseNavItemContentStyles = ({
     color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,
   }),
 
-  "&:focus-visible, &:focus": {
+  "&:focus-visible": {
     outline: "none",
     boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,
   },
@@ -241,25 +242,29 @@ const SideNavItemContent = ({
     [],
   );
 
-  const itemClickHandler = useCallback(
-    (id: string) => {
+  const itemClickHandler = useCallback<
+    MouseEventHandler<HTMLDivElement | HTMLAnchorElement>
+  >(
+    (event) => {
       return () => {
         onItemSelected?.(id);
-        onClick?.();
+        onClick?.(event);
       };
     },
-    [onClick, onItemSelected],
+    [id, onClick, onItemSelected],
   );
 
-  const sideNavItemContentKeyHandler = useCallback(
-    (id: string, event: KeyboardEvent<HTMLDivElement>) => {
+  const sideNavItemContentKeyHandler = useCallback<
+    KeyboardEventHandler<HTMLDivElement>
+  >(
+    (event) => {
       if (event?.key === "Enter") {
         event.preventDefault();
         onItemSelected?.(id);
-        onClick?.();
+        onClick?.(event);
       }
     },
-    [onClick, onItemSelected],
+    [id, onClick, onItemSelected],
   );
 
   return (
@@ -298,10 +303,8 @@ const SideNavItemContent = ({
             isDisabled={isDisabled}
             tabIndex={0}
             role="button"
-            onClick={itemClickHandler(id)}
-            onKeyDown={(event: KeyboardEvent<HTMLDivElement>) =>
-              sideNavItemContentKeyHandler(id, event)
-            }
+            onClick={itemClickHandler}
+            onKeyDown={sideNavItemContentKeyHandler}
             isSelected={isSelected}
           >
             <SideNavItemLinkContent
@@ -321,7 +324,7 @@ const SideNavItemContent = ({
             isSelected={isSelected}
             href={href}
             target={target}
-            onClick={itemClickHandler(id)}
+            onClick={itemClickHandler}
           >
             <SideNavItemLinkContent
               count={count}

package/src/labs/SideNav/SideNavToggleButton.tsx

@@ -54,7 +54,7 @@ const StyledToggleButton = styled(MuiButton, {
       outline: "none",
     },
 
-    "&:hover, &:focus": {
+    "&:hover, &:focus-visible": {
       backgroundColor: "transparent",
 
       "#lineOne": {

package/src/labs/SideNav/types.ts

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import type { ReactElement } from "react";
+import type { ReactElement, SyntheticEvent } from "react";
 import type { HtmlProps } from "../../HtmlProps";
 import type { statusSeverityValues } from "../../Status";
 
@@ -129,7 +129,7 @@ export type SideNavItem = {
   /**
    * Event fired when the nav item is clicked
    */
-  onClick?(): void;
+  onClick?: (event: SyntheticEvent) => void;
   /**
    * The status element to display after the label
    */

package/src/labs/TimeZonePicker.tsx

@@ -13,7 +13,11 @@
 import { memo, useCallback } from "react";
 
 import { Autocomplete, AutocompleteProps } from "../Autocomplete";
-import { TimeZoneOption } from "./useOdysseyDateFields";
+
+export type TimeZoneOption = {
+  label: string;
+  value: string;
+};
 
 export type TimeZonePickerProps = {
   label: string;

package/src/labs/index.ts

@@ -16,8 +16,8 @@ export type { LocalizationProviderProps } from "@mui/x-date-pickers";
 
 // export * from "./AdaptablePicker";
 export * from "./AppTile";
-export * from "./DatePicker";
-export * from "./datePickerTheme";
+
+export * from "./DatePickers";
 
 export * from "./DataView";
 
@@ -44,4 +44,3 @@ export * from "./AppSwitcher";
 export * from "./SideNav/NavAccordion";
 export * from "./SideNav";
 export * from "./TopNav";
-export * from "./UiShell";

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

@@ -76,6 +76,7 @@ fielderror.screenreader.text = Error
 fieldlabel.optional.text = Optional
 fieldlabel.required.text = Required
 filters.clear.label = Clear filters
+filters.submit.label = Submit
 filters.filter.any = Any
 filters.filter.clear = Clear filter
 filters.filters.arialabel = Filters
@@ -117,6 +118,7 @@ table.reorder.toback = Send to back
 table.reorder.tofront = Bring to front
 table.rows.text = {{totalRows}} row
 table.rows.text_plural = {{totalRows}} rows
+pagination.label = Pagination
 pagination.loadmore = Show more
 pagination.next = Next page
 pagination.previous = Previous page

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

@@ -1 +1 @@
-export const translation = {"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","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","picker.error.invalid":"Correct the date format or select the date from the calendar.","picker.error.mindate":"Date entered is earlier than allowed dates. Select a date from the range available in the calendar.","picker.error.maxdate":"Date entered is later than the allowed dates. Select a date from the range available in the calendar.","picker.field.placeholder.day":"DD","picker.field.placeholder.hours":"hh","picker.field.placeholder.meridiem":"aa","picker.field.placeholder.minutes":"mm","picker.field.placeholder.month":"MM","picker.field.placeholder.seconds":"ss","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.seconds":"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.labels.time.selected":"selected time is","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","filters.clear.label":"Clear filters","filters.filter.any":"Any","filters.filter.clear":"Clear filter","filters.filters.arialabel":"Filters","filters.menuitem.any":"Any {{label}}","filters.menuitem.selected":"{{selected}} selected","filters.search.label":"Search","fileupload.button.text":"Add files","fileupload.prompt.text":"Drag and drop files here or click to add files","fileupload.removefile.text":"Remove file","passwordfield.icon.label.hide":"Hide password","passwordfield.icon.label.show":"Show password","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","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.","table.draghandle.tooltip":"Drag row or press space/enter key to start and stop reordering","table.actions":"Actions","table.error":"Error loading data.","table.fetchedrows.text":"Fetched {{totalRows}} row","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.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","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","topnav.helpicon":"help page","topnav.settingsicon":"settings page"};
+export const translation = {"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","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","picker.error.invalid":"Correct the date format or select the date from the calendar.","picker.error.mindate":"Date entered is earlier than allowed dates. Select a date from the range available in the calendar.","picker.error.maxdate":"Date entered is later than the allowed dates. Select a date from the range available in the calendar.","picker.field.placeholder.day":"DD","picker.field.placeholder.hours":"hh","picker.field.placeholder.meridiem":"aa","picker.field.placeholder.minutes":"mm","picker.field.placeholder.month":"MM","picker.field.placeholder.seconds":"ss","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.seconds":"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.labels.time.selected":"selected time is","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","filters.clear.label":"Clear filters","filters.submit.label":"Submit","filters.filter.any":"Any","filters.filter.clear":"Clear filter","filters.filters.arialabel":"Filters","filters.menuitem.any":"Any {{label}}","filters.menuitem.selected":"{{selected}} selected","filters.search.label":"Search","fileupload.button.text":"Add files","fileupload.prompt.text":"Drag and drop files here or click to add files","fileupload.removefile.text":"Remove file","passwordfield.icon.label.hide":"Hide password","passwordfield.icon.label.show":"Show password","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","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.","table.draghandle.tooltip":"Drag row or press space/enter key to start and stop reordering","table.actions":"Actions","table.error":"Error loading data.","table.fetchedrows.text":"Fetched {{totalRows}} row","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.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","pagination.label":"Pagination","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","topnav.helpicon":"help page","topnav.settingsicon":"settings page"};