@okta/odyssey-react-mui 1.20.0 → 1.21.0

package/src/labs/TopNav.tsx

@@ -0,0 +1,394 @@
+/*!
+ * 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 styled from "@emotion/styled";
+import {
+  memo,
+  useMemo,
+  ReactElement,
+  useCallback,
+  MouseEventHandler,
+  KeyboardEventHandler,
+} from "react";
+
+import type { HtmlProps } from "../HtmlProps";
+import { QuestionCircleIcon, SettingsIcon } from "../icons.generated";
+import { Link } from "../Link";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../OdysseyDesignTokensContext";
+import { Subordinate } from "../Typography";
+
+export type TopNavLinkItem = {
+  id: string;
+  label: string;
+  /**
+   * link added to the nav item. if it is undefined, static text will be displayed.
+   * fires onClick event when it is passed
+   */
+  href?: string;
+  /**
+   * determines whether the link item is diabled
+   */
+  isDisabled?: boolean;
+  /**
+   * Event fired when the nav item is clicked
+   */
+  onClick?: MouseEventHandler<HTMLAnchorElement> &
+    MouseEventHandler<HTMLDivElement> &
+    KeyboardEventHandler<HTMLDivElement>;
+  /**
+   * The link target prop. e.g., "_blank"
+   */
+  target?: string;
+};
+
+export type UserProfileProps = {
+  /**
+   * Logged in user profile icon to be displayed in the top nav
+   */
+  profileIcon?: ReactElement;
+  /**
+   * Logged in user info to be displayed in the top nav
+   */
+  userName: string;
+  /**
+   * Org name of the logged in user
+   */
+  orgName: string;
+};
+
+export type TopNavProps = {
+  /**
+   *  Pass in a SearchField component with the variant="filled" prop set
+   */
+  SearchFieldComponent?: ReactElement;
+  /**
+   * Nav links in the top nav
+   */
+  topNavLinkItems: TopNavLinkItem[];
+  /**
+   * Pass in an additional component like `Button` that will be displayed after the nav link items
+   */
+  AdditionalNavItemComponent?: ReactElement;
+  /**
+   * URL to settings page.
+   */
+  settingsPageHref?: string;
+  /**
+   * URL to the help page.
+   */
+  helpPageHref?: string;
+  /**
+   * Displays user account info
+   */
+  userProfile?: UserProfileProps;
+} & Pick<HtmlProps, "testId">;
+
+const UserProfileContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  display: "flex",
+  alignItems: "center",
+  paddingRight: odysseyDesignTokens.Spacing4,
+}));
+
+const UserProfileIconContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  display: "flex",
+  paddingRight: odysseyDesignTokens.Spacing2,
+}));
+
+const UserProfileInfoContainer = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+}));
+
+const UserProfile = ({ profileIcon, userName, orgName }: UserProfileProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  return (
+    <UserProfileContainer odysseyDesignTokens={odysseyDesignTokens}>
+      {profileIcon && (
+        <UserProfileIconContainer odysseyDesignTokens={odysseyDesignTokens}>
+          {profileIcon}
+        </UserProfileIconContainer>
+      )}
+      <UserProfileInfoContainer>
+        <Subordinate color="textPrimary">{userName}</Subordinate>
+        <Subordinate color="textSecondary">{orgName}</Subordinate>
+      </UserProfileInfoContainer>
+    </UserProfileContainer>
+  );
+};
+
+const TopNavListContainer = styled("ul")(() => ({
+  padding: 0,
+  listStyle: "none",
+  listStyleType: "none",
+  display: "flex",
+  alignItems: "center",
+}));
+
+const TopNavItemLabelContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  fontSize: odysseyDesignTokens.TypographyScale0,
+  fontWeight: odysseyDesignTokens.TypographyWeightHeading,
+}));
+
+const TopNavListItemContainer = styled("li", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "isDisabled",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  isDisabled?: boolean;
+}>(({ odysseyDesignTokens, isDisabled }) => ({
+  display: "flex",
+  alignItems: "center",
+  cursor: isDisabled ? "default" : "pointer",
+  pointerEvents: isDisabled ? "none" : "auto",
+  color: `${isDisabled ? odysseyDesignTokens.TypographyColorDisabled : odysseyDesignTokens.TypographyColorHeading} !important`,
+  "& a": {
+    display: "flex",
+    alignItems: "center",
+    padding: `${odysseyDesignTokens.Spacing2} ${odysseyDesignTokens.Spacing4}`,
+    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
+  },
+  "& a:hover": {
+    textDecoration: "none",
+    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
+  },
+  "& div[role='button']:hover": {
+    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
+  },
+  "& a:focus-visible": {
+    outlineOffset: 0,
+    borderRadius: 0,
+    outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,
+    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
+  },
+}));
+
+const NavItemContentClickContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  display: "flex",
+  alignItems: "center",
+  width: "100%",
+  padding: `${odysseyDesignTokens.Spacing2} ${odysseyDesignTokens.Spacing4}`,
+  "&:focus-visible": {
+    borderRadius: 0,
+    outlineColor: odysseyDesignTokens.FocusOutlineColorPrimary,
+    outlineStyle: odysseyDesignTokens.FocusOutlineStyle,
+    outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,
+    backgroundColor: odysseyDesignTokens.HueNeutral50,
+    textDecoration: "none",
+  },
+}));
+
+const TopNavItemContent = ({
+  id,
+  label,
+  href,
+  target,
+  onClick,
+  isDisabled,
+}: TopNavLinkItem) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const topNavItemContentKeyHandler = useCallback<
+    KeyboardEventHandler<HTMLDivElement>
+  >(
+    (event) => {
+      if (event?.key === "Enter") {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick?.(event);
+      }
+    },
+    [onClick],
+  );
+
+  return (
+    <TopNavListItemContainer
+      id={id}
+      key={id}
+      aria-disabled={isDisabled}
+      isDisabled={isDisabled}
+      odysseyDesignTokens={odysseyDesignTokens}
+    >
+      {
+        // Use Link for nav items with links and div for disabled or non-link items
+        isDisabled ? (
+          <NavItemContentClickContainer
+            odysseyDesignTokens={odysseyDesignTokens}
+          >
+            <TopNavItemLabelContainer odysseyDesignTokens={odysseyDesignTokens}>
+              {label}
+            </TopNavItemLabelContainer>
+          </NavItemContentClickContainer>
+        ) : !href ? (
+          <NavItemContentClickContainer
+            odysseyDesignTokens={odysseyDesignTokens}
+            role="button"
+            tabIndex={0}
+            onClick={onClick}
+            onKeyDown={topNavItemContentKeyHandler}
+          >
+            <TopNavItemLabelContainer odysseyDesignTokens={odysseyDesignTokens}>
+              {label}
+            </TopNavItemLabelContainer>
+          </NavItemContentClickContainer>
+        ) : (
+          <Link href={href} target={target} onClick={onClick}>
+            <TopNavItemLabelContainer odysseyDesignTokens={odysseyDesignTokens}>
+              {label}
+            </TopNavItemLabelContainer>
+          </Link>
+        )
+      }
+    </TopNavListItemContainer>
+  );
+};
+
+const LinkAndProfileWrapper = styled("div")(() => ({
+  display: "flex",
+  alignItems: "center",
+  marginLeft: "auto",
+}));
+
+const AdditionalLinkContainerWithBorder = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  display: "flex",
+  alignItems: "center",
+  marginRight: odysseyDesignTokens.Spacing3,
+  borderRight: `${odysseyDesignTokens.BorderWidthMain} solid ${odysseyDesignTokens.HueNeutral200}`,
+}));
+
+const LinkContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  paddingRight: odysseyDesignTokens.Spacing3,
+  "& a": {
+    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
+  },
+}));
+
+const TopNavContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  display: "flex",
+  alignItems: "center",
+  backgroundColor: odysseyDesignTokens.HueNeutralWhite,
+  height: odysseyDesignTokens.Spacing9,
+}));
+
+const SearchFieldContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  width: "350px",
+  padding: `${odysseyDesignTokens.Spacing2} ${odysseyDesignTokens.Spacing3}`,
+}));
+
+const AdditionalNavItemContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  padding: `0 ${odysseyDesignTokens.Spacing3}`,
+}));
+
+const TopNav = ({
+  SearchFieldComponent,
+  topNavLinkItems,
+  AdditionalNavItemComponent,
+  settingsPageHref,
+  helpPageHref,
+  userProfile,
+}: TopNavProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const processedNavItems = useMemo(
+    () =>
+      topNavLinkItems.map((item) => (
+        <TopNavItemContent {...item} key={item.id} />
+      )),
+    [topNavLinkItems],
+  );
+
+  return (
+    <TopNavContainer odysseyDesignTokens={odysseyDesignTokens}>
+      {SearchFieldComponent && (
+        <SearchFieldContainer odysseyDesignTokens={odysseyDesignTokens}>
+          {SearchFieldComponent}
+        </SearchFieldContainer>
+      )}
+      <TopNavListContainer>
+        {processedNavItems?.map((item) => item)}
+      </TopNavListContainer>
+      <LinkAndProfileWrapper>
+        {(AdditionalNavItemComponent || settingsPageHref || helpPageHref) && (
+          <AdditionalLinkContainerWithBorder
+            odysseyDesignTokens={odysseyDesignTokens}
+          >
+            {AdditionalNavItemComponent && (
+              <AdditionalNavItemContainer
+                odysseyDesignTokens={odysseyDesignTokens}
+              >
+                {AdditionalNavItemComponent}
+              </AdditionalNavItemContainer>
+            )}
+            {settingsPageHref && (
+              <LinkContainer odysseyDesignTokens={odysseyDesignTokens}>
+                <Link href={settingsPageHref} ariaLabel="settings page">
+                  <SettingsIcon />
+                </Link>
+              </LinkContainer>
+            )}
+            {helpPageHref && (
+              <LinkContainer odysseyDesignTokens={odysseyDesignTokens}>
+                <Link href={helpPageHref} ariaLabel="help page">
+                  <QuestionCircleIcon />
+                </Link>
+              </LinkContainer>
+            )}
+          </AdditionalLinkContainerWithBorder>
+        )}
+        {userProfile && <UserProfile {...userProfile} />}
+      </LinkAndProfileWrapper>
+    </TopNavContainer>
+  );
+};
+
+const MemoizedTopNav = memo(TopNav);
+MemoizedTopNav.displayName = "TopNav";
+
+export { MemoizedTopNav as TopNav };

package/src/labs/datePickerTheme.tsx

@@ -143,15 +143,17 @@ export const datePickerTheme: ThemeOptions = {
     },
     MuiPickersLayout: {
       styleOverrides: {
-        root: {
+        root: ({ theme }) => ({
           display: "block",
-        },
+          // Matches Popper width
+          width: "calc(100vw - 64px)",
+          maxWidth: theme.mixins.maxWidth,
+        }),
         contentWrapper: ({ theme }) => ({
-          width: `${352 / 14}rem`,
+          width: "100%",
           paddingInline: theme.spacing(3),
 
           "@media (pointer: fine)": {
-            width: `${352 / 14}rem`,
             borderColor: theme.palette.divider,
             borderStyle: theme.mixins.borderStyle,
             borderWidth: theme.mixins.borderWidth,

package/src/labs/index.ts

@@ -37,3 +37,4 @@ export * from "./Switch";
 
 export * from "./NavAccordion";
 export * from "./SideNav";
+export * from "./TopNav";

package/src/labs/{useDatePickerTranslations.ts → useDateFieldsTranslations.ts}

@@ -14,7 +14,9 @@ import { PickersLocaleText } from "@mui/x-date-pickers";
 import { DateTime } from "luxon";
 import { useTranslation } from "react-i18next";
 
-export const useDatePickerTranslations = (): PickersLocaleText<DateTime> => {
+export type DateFieldsTranslations = PickersLocaleText<DateTime>;
+
+export const useDateFieldsTranslations = (): DateFieldsTranslations => {
   const { t } = useTranslation();
 
   return {

package/src/labs/useOdysseyDateFields.ts

@@ -0,0 +1,201 @@
+/*!
+ * 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 { 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 { useDateFieldsTranslations } from "./useDateFieldsTranslations";
+
+const { CONTROLLED } = ComponentControlledState;
+
+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.
+   *
+   * NOTE: Must be a date string in ISO format
+   */
+  defaultValue?: string;
+  /**
+   * Disable specific date(s).
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   */
+  isDateEnabled?: (date: Date) => boolean;
+  /**
+   * Disable specific month(s).
+   */
+  isMonthEnabled?: (date: Date) => boolean;
+  /**
+   * Disable specific year(s).
+   */
+  isYearEnabled?: (date: Date) => boolean;
+  /**
+   * Minimum date allowed.
+   *
+   * NOTE: If not a valid date string in ISO format, `minDate` will not apply
+   */
+  minDate?: string;
+  /**
+   * Maximum date allowed.
+   *
+   * NOTE: If not a valid date string in ISO format, `maxDate` will not apply
+   */
+  maxDate?: string;
+  timeZone?: string;
+  /**
+   * value when controlled.
+   *
+   * NOTE: Must be a date string in ISO format or it will not be applied
+   */
+  value?: string;
+};
+
+type FormatDateTimeToUtcIsoDateString = (value: DateTime) => string | undefined;
+
+type ValidationDateRanges = {
+  minDate?: DateTime;
+  maxDate?: DateTime;
+};
+
+export const useOdysseyDateFields = ({
+  defaultValue,
+  isDateEnabled = () => true,
+  isMonthEnabled = () => true,
+  isYearEnabled = () => true,
+  minDate: minDateProp,
+  maxDate: maxDateProp,
+  timeZone = "system",
+  value,
+}: OdysseyDateFieldProps & Pick<FieldComponentProps, "errorMessage">) => {
+  const internalValueRef = useRef<DateTime | null>(null);
+  const [internalTimeZone, setInternalTimeZone] = useState(timeZone);
+
+  const [validationDateRanges, setValidationDateRanges] =
+    useState<ValidationDateRanges>({
+      minDate: undefined,
+      maxDate: undefined,
+    });
+
+  useEffect(() => {
+    const minDate = minDateProp ? DateTime.fromISO(minDateProp) : undefined;
+    const maxDate = maxDateProp ? DateTime.fromISO(maxDateProp) : undefined;
+
+    setValidationDateRanges({
+      minDate:
+        minDate && isValidDateTime(minDate)
+          ? minDate.startOf("day")
+          : undefined,
+      maxDate:
+        maxDate && isValidDateTime(maxDate)
+          ? maxDate.startOf("day")
+          : undefined,
+    });
+  }, [minDateProp, maxDateProp]);
+
+  const { i18n } = useTranslation();
+  const { language } = i18n;
+
+  const invalidLocales = ["ok_PL", "ok_SK"];
+  // In the Applitools env the language code is `en-us@posix`. Need to check for that
+  const isInvalidLocale =
+    invalidLocales.includes(language) || language.includes("@");
+
+  const localeText = useDateFieldsTranslations();
+
+  const controlledStateRef = useRef(
+    getControlState({
+      controlledValue: value,
+      uncontrolledValue: defaultValue,
+    }),
+  );
+
+  const defaultedLanguageCode = isInvalidLocale
+    ? "en-US"
+    : language.replaceAll("_", "-");
+
+  const isValidTimeZone = (timeZone: string) =>
+    DateTime.local().setZone(timeZone).isValid;
+
+  const formatDateTimeToUtcIsoDateString =
+    useCallback<FormatDateTimeToUtcIsoDateString>(
+      (value) => value.toUTC().toISO() || undefined,
+      [],
+    );
+
+  const shouldDisableDate = useCallback(
+    (date: DateTime) => !isDateEnabled(new Date(date?.toJSDate())) || false,
+    [isDateEnabled],
+  );
+
+  const shouldDisableMonth = useCallback(
+    (date: DateTime) => !isMonthEnabled(new Date(date?.toJSDate())) || false,
+    [isMonthEnabled],
+  );
+
+  const shouldDisableYear = useCallback(
+    (date: DateTime) => !isYearEnabled(new Date(date?.toJSDate())) || false,
+    [isYearEnabled],
+  );
+
+  const inputValues = useMemo(() => {
+    if (value && controlledStateRef.current === CONTROLLED) {
+      const valueAsUTCDateTime = utcDateTimeFromIsoString(value);
+
+      if (isValidDateTime(valueAsUTCDateTime)) {
+        return {
+          value: valueAsUTCDateTime,
+        };
+      }
+    }
+
+    if (defaultValue) {
+      const defaultValueAsUTCDateTime = utcDateTimeFromIsoString(defaultValue);
+
+      if (isValidDateTime(defaultValueAsUTCDateTime)) {
+        return {
+          defaultValue: defaultValueAsUTCDateTime,
+        };
+      }
+    }
+
+    return null;
+  }, [defaultValue, validationDateRanges, value]);
+
+  return {
+    defaultedLanguageCode,
+    formatDateTimeToUtcIsoDateString,
+    inputValues,
+    internalTimeZone,
+    internalValueRef,
+    isValidTimeZone,
+    localeText,
+    maxDate: validationDateRanges.maxDate,
+    minDate: validationDateRanges.minDate,
+    setInternalTimeZone,
+    shouldDisableDate,
+    shouldDisableMonth,
+    shouldDisableYear,
+  };
+};

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

@@ -8,6 +8,9 @@ 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.
 # placeholder text in date field
 picker.field.placeholder.day = DD
 # placeholder text in date/time field

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.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":"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"};