@okta/odyssey-react-mui 1.22.0 → 1.23.0

package/src/labs/SideNav/SideNav.tsx

@@ -21,7 +21,6 @@ import {
   useEffect,
 } from "react";
 
-import { Box } from "../../Box";
 import { ExpandLeftIcon } from "../../icons.generated";
 import { NavAccordion } from "../NavAccordion";
 import {
@@ -29,6 +28,7 @@ import {
   useOdysseyDesignTokens,
 } from "../../OdysseyDesignTokensContext";
 import type { SideNavProps } from "./types";
+import { OktaLogo } from "./OktaLogo";
 import { SideNavHeader } from "./SideNavHeader";
 import {
   SideNavItemContent,
@@ -36,6 +36,17 @@ import {
 } from "./SideNavItemContent";
 import { SideNavFooterContent } from "./SideNavFooterContent";
 
+export const DEFAULT_SIDE_NAV_WIDTH = "300px";
+
+const SideNavContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "expandedWidth",
+})(({ expandedWidth }: { expandedWidth: SideNavProps["expandedWidth"] }) => ({
+  display: "flex",
+  height: "100%",
+  maxWidth: expandedWidth,
+  overflow: "hidden",
+}));
+
 const SideNavCollapsedContainer = styled("div", {
   shouldForwardProp: (prop) =>
     prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed",
@@ -59,26 +70,51 @@ const SideNavCollapsedContainer = styled("div", {
   }),
 );
 
-const SideNavExpandContainer = styled("div", {
+const SideNavExpandContainer = styled("nav", {
   shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed",
+    prop !== "odysseyDesignTokens" &&
+    prop !== "isSideNavCollapsed" &&
+    prop !== "expandedWidth",
 })(
   ({
     odysseyDesignTokens,
     isSideNavCollapsed,
+    expandedWidth,
   }: {
     odysseyDesignTokens: DesignTokens;
     isSideNavCollapsed: boolean;
+    expandedWidth: string;
   }) => ({
     backgroundColor: odysseyDesignTokens.HueNeutralWhite,
     flexDirection: "column",
     display: "flex",
     opacity: isSideNavCollapsed ? 0 : 1,
     visibility: isSideNavCollapsed ? "hidden" : "visible",
-    width: isSideNavCollapsed ? "0" : "100%",
+    width: isSideNavCollapsed ? "0" : expandedWidth,
     transitionProperty: "opacity, width",
     transitionDuration: odysseyDesignTokens.TransitionDurationMain,
     transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
+    borderRight: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`,
+  }),
+);
+
+const SideNavHeaderContainer = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "hasContentScrolled" && prop !== "odysseyDesignTokens",
+})(
+  ({
+    hasContentScrolled,
+    odysseyDesignTokens,
+  }: {
+    hasContentScrolled: boolean;
+    odysseyDesignTokens: DesignTokens;
+  }) => ({
+    position: "sticky",
+    top: 0,
+    // The bottom border should appear only if the scrollable region has been scrolled
+    ...(hasContentScrolled && {
+      borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`,
+    }),
   }),
 );
 
@@ -88,9 +124,15 @@ const SideNavListContainer = styled.ul({
   listStyleType: "none",
 });
 
+const SideNavScrollableContainer = styled.div({
+  flex: 1,
+  overflowY: "auto",
+});
+
 const SectionHeader = styled("li", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  fontFamily: odysseyDesignTokens.TypographyFamilyHeading,
   fontSize: odysseyDesignTokens.TypographySizeOverline,
   fontWeight: odysseyDesignTokens.TypographyWeightHeadingBold,
   color: odysseyDesignTokens.HueNeutral600,
@@ -100,7 +142,31 @@ const SectionHeader = styled("li", {
   textTransform: "uppercase",
 }));
 
-const SideNavFooterContainer = styled("div", {
+const SideNavFooter = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "isContentScrollable" && prop !== "odysseyDesignTokens",
+})(
+  ({
+    isContentScrollable,
+    odysseyDesignTokens,
+  }: {
+    isContentScrollable: boolean;
+    odysseyDesignTokens: DesignTokens;
+  }) => ({
+    position: "sticky",
+    bottom: 0,
+    paddingTop: odysseyDesignTokens.Spacing2,
+    transitionProperty: "box-shadow",
+    transitionDuration: odysseyDesignTokens.TransitionDurationMain,
+    transitionTiming: odysseyDesignTokens.TransitionTimingMain,
+    // The box shadow should appear above the footer only if the scrollable region has overflow
+    ...(isContentScrollable && {
+      boxShadow: odysseyDesignTokens.DepthHigh,
+    }),
+  }),
+);
+
+const SideNavFooterItemsContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
   paddingTop: odysseyDesignTokens.Spacing2,
@@ -121,16 +187,105 @@ const SideNavFooterContainer = styled("div", {
   },
 }));
 
+const getHasScrollableContent = (scrollableContainer: HTMLElement) =>
+  scrollableContainer.scrollHeight > scrollableContainer.clientHeight;
+
 const SideNav = ({
   navHeaderText,
   isCollapsible,
   onCollapse,
   onExpand,
   sideNavItems,
+  expandedWidth = DEFAULT_SIDE_NAV_WIDTH,
   footerItems,
+  footerComponent,
+  logo,
 }: SideNavProps) => {
   const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);
   const odysseyDesignTokens = useOdysseyDesignTokens();
+  const [isContentScrollable, setIsContentScrollable] = useState(false);
+  const [hasContentScrolled, setHasContentScrolled] = useState(false);
+  const scrollableContentRef = useRef<HTMLUListElement>(null);
+  const resizeObserverRef = useRef<ResizeObserver | null>(null);
+  const intersectionObserverRef = useRef<IntersectionObserver | null>(null);
+
+  useEffect(() => {
+    const updateIsContentScrollable = () => {
+      if (
+        scrollableContentRef.current &&
+        scrollableContentRef.current.parentElement
+      ) {
+        setIsContentScrollable(
+          getHasScrollableContent(scrollableContentRef.current.parentElement),
+        );
+      }
+    };
+
+    // If the window is resized, we may need to re-determine if the scrollable container has overflow
+    // Setup a ResizeObserver to know if the size of the scrollableContent changes
+    let resizeObserverDebounceTimer: ReturnType<typeof requestAnimationFrame>;
+    if (!resizeObserverRef.current) {
+      resizeObserverRef.current = new ResizeObserver(() => {
+        cancelAnimationFrame(resizeObserverDebounceTimer);
+        resizeObserverDebounceTimer = requestAnimationFrame(
+          updateIsContentScrollable,
+        );
+      });
+    }
+
+    if (resizeObserverRef.current && scrollableContentRef.current) {
+      // Observe the <ul> itself (in case it changes size due to the content expanding)
+      resizeObserverRef.current.observe(scrollableContentRef.current);
+      if (scrollableContentRef.current.parentElement) {
+        // ALSO observe the parent (<SideNavScrollableContainer>) in case the window resizes
+        resizeObserverRef.current.observe(
+          scrollableContentRef.current.parentElement,
+        );
+      }
+    }
+
+    // Determine if the scrollable container has overflow or not on load
+    updateIsContentScrollable();
+
+    // Finally, we only want to have the border on the bottom of the header iff the user has scrolled
+    // the scrollable container
+    if (!intersectionObserverRef.current && scrollableContentRef.current) {
+      intersectionObserverRef.current = new IntersectionObserver(
+        (entries) => {
+          // If isIntersecting is true, then we're at the top of the scroll container
+          // If isIntersecting is false, some scrolling has occurred.
+          // The entries must be sorted by time and we only really need to look at the latest one
+          const isIntersecting = entries
+            .slice()
+            .sort((a, b) => a.time - b.time)
+            .at(0)?.isIntersecting;
+          setHasContentScrolled(!isIntersecting);
+        },
+        {
+          root: scrollableContentRef.current.parentElement,
+          threshold: 1.0,
+        },
+      );
+    }
+    if (intersectionObserverRef.current && scrollableContentRef.current) {
+      const ul = scrollableContentRef.current;
+      const li = ul?.firstChild;
+      intersectionObserverRef.current.observe(li as HTMLElement);
+    }
+
+    // Cleanup when unmounted:
+    return () => {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+      if (intersectionObserverRef.current) {
+        intersectionObserverRef.current.disconnect();
+        intersectionObserverRef.current = null;
+      }
+      cancelAnimationFrame(resizeObserverDebounceTimer); // Ensure timer is cleared on component unmount
+    };
+  }, []);
 
   const scrollIntoViewRef = useRef<HTMLLIElement>(null);
   /**
@@ -209,39 +364,6 @@ const SideNav = ({
     [isSideNavCollapsed, setSideNavCollapsed, onExpand],
   );
 
-  const sideNavStyles = useMemo(
-    () => ({
-      display: "flex",
-      height: "100vh",
-    }),
-    [],
-  );
-
-  const sideNavHeaderContainerStyles = useMemo(
-    () => ({
-      position: "sticky",
-      top: 0,
-    }),
-    [],
-  );
-
-  const sideNavListContainerStyles = useMemo(
-    () => ({
-      flex: 1,
-      overflowY: "auto",
-    }),
-    [],
-  );
-
-  const sideNavFooterContainerStyles = useMemo(
-    () => ({
-      position: "sticky",
-      bottom: 0,
-      paddingTop: odysseyDesignTokens.Spacing2,
-    }),
-    [odysseyDesignTokens],
-  );
-
   const expandLeftIconStyles = useMemo(
     () => ({
       fontSize: "1em",
@@ -251,7 +373,7 @@ const SideNav = ({
   );
 
   return (
-    <Box sx={sideNavStyles}>
+    <SideNavContainer expandedWidth={expandedWidth}>
       <SideNavCollapsedContainer
         tabIndex={0}
         role="button"
@@ -268,16 +390,22 @@ const SideNav = ({
         odysseyDesignTokens={odysseyDesignTokens}
         isSideNavCollapsed={isSideNavCollapsed}
         data-se="expanded-region"
+        expandedWidth={expandedWidth}
+        aria-label={navHeaderText}
       >
-        <Box sx={sideNavHeaderContainerStyles}>
+        <SideNavHeaderContainer
+          odysseyDesignTokens={odysseyDesignTokens}
+          hasContentScrolled={hasContentScrolled}
+        >
           <SideNavHeader
+            logo={logo || <OktaLogo />}
             navHeaderText={navHeaderText}
             isCollapsible={isCollapsible}
             onCollapse={sideNavCollapseHandler}
           />
-        </Box>
-        <Box sx={sideNavListContainerStyles} testId="scrollable-region">
-          <SideNavListContainer>
+        </SideNavHeaderContainer>
+        <SideNavScrollableContainer data-se="scrollable-region">
+          <SideNavListContainer ref={scrollableContentRef}>
             {processedSideNavItems?.map((item) => {
               const {
                 id,
@@ -331,16 +459,24 @@ const SideNav = ({
               }
             })}
           </SideNavListContainer>
-        </Box>
-        {footerItems && (
-          <Box sx={sideNavFooterContainerStyles}>
-            <SideNavFooterContainer odysseyDesignTokens={odysseyDesignTokens}>
-              <SideNavFooterContent footerItems={footerItems} />
-            </SideNavFooterContainer>
-          </Box>
+        </SideNavScrollableContainer>
+        {(footerItems || footerComponent) && (
+          <SideNavFooter
+            odysseyDesignTokens={odysseyDesignTokens}
+            isContentScrollable={isContentScrollable}
+          >
+            {footerComponent}
+            {footerItems && !footerComponent && (
+              <SideNavFooterItemsContainer
+                odysseyDesignTokens={odysseyDesignTokens}
+              >
+                <SideNavFooterContent footerItems={footerItems} />
+              </SideNavFooterItemsContainer>
+            )}
+          </SideNavFooter>
         )}
       </SideNavExpandContainer>
-    </Box>
+    </SideNavContainer>
   );
 };
 

package/src/labs/SideNav/SideNavHeader.tsx

@@ -20,6 +20,18 @@ import { Box } from "../../Box";
 import { Heading6 } from "../../Typography";
 import { CollapseIcon } from "./CollapseIcon";
 import type { SideNavProps } from "./types";
+import { TOP_NAV_HEIGHT_TOKEN } from "../TopNav";
+
+const SideNavLogoContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  height: odysseyDesignTokens[TOP_NAV_HEIGHT_TOKEN],
+  padding: odysseyDesignTokens.Spacing3,
+  borderColor: odysseyDesignTokens.HueNeutral50,
+  borderStyle: odysseyDesignTokens.BorderStyleMain,
+  borderWidth: 0,
+  borderBottomWidth: odysseyDesignTokens.BorderWidthMain,
+}));
 
 const SideNavHeaderContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
@@ -37,9 +49,10 @@ const SideNavHeader = ({
   navHeaderText,
   isCollapsible,
   onCollapse,
+  logo,
 }: Pick<
   SideNavProps,
-  "navHeaderText" | "isCollapsible" | "onCollapse"
+  "navHeaderText" | "isCollapsible" | "onCollapse" | "logo"
 >): ReactNode => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
@@ -51,12 +64,22 @@ const SideNavHeader = ({
   );
 
   return (
-    <SideNavHeaderContainer odysseyDesignTokens={odysseyDesignTokens}>
-      <Box sx={sideNavHeaderStyles}>
-        <Heading6>{navHeaderText}</Heading6>
-      </Box>
-      {isCollapsible && <CollapseIcon onClick={onCollapse} />}
-    </SideNavHeaderContainer>
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <SideNavLogoContainer odysseyDesignTokens={odysseyDesignTokens}>
+        {logo}
+      </SideNavLogoContainer>
+      <SideNavHeaderContainer odysseyDesignTokens={odysseyDesignTokens}>
+        <Box sx={sideNavHeaderStyles}>
+          <Heading6>{navHeaderText}</Heading6>
+        </Box>
+        {isCollapsible && <CollapseIcon onClick={onCollapse} />}
+      </SideNavHeaderContainer>
+    </Box>
   );
 };
 const MemoizedSideNavHeader = memo(SideNavHeader);

package/src/labs/SideNav/types.ts

@@ -23,10 +23,6 @@ export type SideNavProps = {
    *  Determines whether the side nav is collapsible
    */
   isCollapsible?: boolean;
-  /**
-   * Footer items in the side nav
-   */
-  footerItems?: SideNavFooterItem[];
   /**
    *  Triggers when the side nav is collapsed
    */
@@ -39,7 +35,38 @@ export type SideNavProps = {
    * Nav items in the side nav
    */
   sideNavItems: SideNavItem[];
-} & Pick<HtmlProps, "testId">;
+  /**
+   * A CSS length string indicating the customizable expanded width of the SideNav container.
+   * (it will be smaller if isCollapsible and collapsed)
+   */
+  expandedWidth?: string;
+  /**
+   * An optional logo to display in the header. If not provided, will default to the Okta logo
+   */
+  logo?: ReactElement;
+} & (
+  | {
+      /**
+       * Footer items in the side nav
+       */
+      footerItems?: SideNavFooterItem[];
+      /**
+       * footerComponent cannot be used if footerItems are defined
+       */
+      footerComponent?: never;
+    }
+  | {
+      /**
+       * footerItems cannot be used if footerComponent is defined
+       */
+      footerItems?: never;
+      /**
+       * The component to display as the footer; if present the `footerItems` are ignored and not rendered.
+       */
+      footerComponent?: ReactElement;
+    }
+) &
+  Pick<HtmlProps, "testId">;
 
 export type SideNavItem = {
   id: string;

package/src/labs/TopNav.tsx

@@ -29,6 +29,8 @@ import {
 } from "../OdysseyDesignTokensContext";
 import { Subordinate } from "../Typography";
 
+export const TOP_NAV_HEIGHT_TOKEN = "Spacing9";
+
 export type TopNavLinkItem = {
   id: string;
   label: string;
@@ -306,7 +308,7 @@ const TopNavContainer = styled("div", {
   display: "flex",
   alignItems: "center",
   backgroundColor: odysseyDesignTokens.HueNeutralWhite,
-  height: odysseyDesignTokens.Spacing9,
+  height: odysseyDesignTokens[TOP_NAV_HEIGHT_TOKEN],
 }));
 
 const SearchFieldContainer = styled("div", {

package/src/labs/index.ts

@@ -24,7 +24,6 @@ export * from "./DataView";
 /** @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 "./FileUpload";
 export * from "./Layout";
 export * from "./materialReactTableTypes";
 /** @deprecated Will be removed in a future Odyssey version in lieu of DataTable */
@@ -35,8 +34,6 @@ export * from "./PaginatedTable";
 
 export * from "./GroupPicker";
 
-export * from "./Switch";
-
 export * from "./NavAccordion";
 export * from "./SideNav";
 export * from "./TopNav";

package/src/labs/useDateFieldsTranslations.ts

@@ -46,7 +46,7 @@ export const useDateFieldsTranslations = (): DateFieldsTranslations => {
     empty: `${t("picker.labels.empty")}`,
     end: `${t("picker.labels.range.end")}`,
     endDate: `${t("picker.labels.range.enddate")}`,
-    endTime: `${t("picker.labels.range.endTime")}`,
+    endTime: `${t("picker.labels.range.endtime")}`,
     fieldClearLabel: `${t("picker.labels.field.clear")}`,
     fieldDayPlaceholder: () => `${t("picker.field.placeholder.day")}`,
     fieldMonthPlaceholder: () => `${t("picker.field.placeholder.month")}`,

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

@@ -31,7 +31,7 @@ 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.seconds = seconds
 picker.labels.clock.selected = Selected time is
 picker.labels.date.choose = Choose date
 picker.labels.date.selected = Selected date is
@@ -47,6 +47,7 @@ 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

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

@@ -1 +1 @@
-export const translation = {"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":"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","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","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"};
+export const translation = {"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","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"};