@okta/odyssey-react-mui 1.28.1 → 1.32.0

package/src/labs/PageTemplate/PageTemplate.tsx

@@ -0,0 +1,234 @@
+/*!
+ * 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 styled from "@emotion/styled";
+import { memo, ReactElement, ReactNode } from "react";
+
+import { DrawerProps } from "../../Drawer.js";
+import { DocumentationIcon } from "../../icons.generated/index.js";
+import { Link } from "../../Link.js";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../../OdysseyDesignTokensContext.js";
+import { Heading4, Subordinate } from "../../Typography.js";
+import { useHasUiShell } from "../../ui-shell/useHasUiShell.js";
+
+export type PageTemplateProps = {
+  /**
+   * The title of the layout to be situated in the layout header
+   */
+  title?: string;
+  /**
+   * A supplementary description to be situated in the layout header
+   */
+  description?: string;
+  /**
+   * The destination for a documentation `Link` to be situated in the layout header
+   */
+  documentationLink?: string;
+  /**
+   * The text for a documentation `Link` to be situated in the layout header
+   */
+  documentationText?: string;
+  /**
+   * An optional `Drawer` object. Can be of variant 'temporary' or 'persistent'.
+   */
+  drawer?: ReactElement<DrawerProps>;
+  /**
+   * An optional `Button` object to be situated in the layout header. Should almost always be of variant `primary`.
+   */
+  primaryCallToActionComponent?: ReactElement;
+  /**
+   * An optional `Button` object to be situated in the layout header, alongside the `callToActionPrimaryComponent`.
+   */
+  secondaryCallToActionComponent?: ReactElement;
+  /**
+   * An optional `Button` object to be situated in the layout header, alongside the other two `callToAction` components.
+   */
+  tertiaryCallToActionComponent?: ReactElement;
+  /**
+   * The content of the layout. May be a `string` or any other `ReactNode` or array of `ReactNode`s. Will often be `Grid` objects.
+   */
+  children?: ReactNode;
+  /**
+   * When set to `true`, the layout expands past its max width of 1440px and spans the entire available screen width.
+   */
+  isFullWidth?: boolean;
+};
+
+type TemplateContentProps = {
+  odysseyDesignTokens: DesignTokens;
+  isDrawerOpen?: boolean;
+  drawerVariant?: string;
+};
+
+const TemplateContainer = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" &&
+    prop !== "hasUiShell" &&
+    prop !== "isFullWidth",
+})<{
+  hasUiShell: boolean;
+  isFullWidth: boolean;
+  odysseyDesignTokens: DesignTokens;
+}>(({ hasUiShell, isFullWidth, odysseyDesignTokens }) => ({
+  maxWidth: isFullWidth
+    ? "100%"
+    : `calc(1440px + ${odysseyDesignTokens.Spacing6} + ${odysseyDesignTokens.Spacing6})`,
+  marginInline:
+    isFullWidth && !hasUiShell ? odysseyDesignTokens.Spacing6 : "auto",
+  padding: hasUiShell ? 0 : odysseyDesignTokens.Spacing6,
+}));
+
+const TemplateHeader = styled("div")(() => ({
+  display: "flex",
+  alignItems: "flex-end",
+  justifyContent: "space-between",
+}));
+
+const TemplateHeaderPrimaryContent = styled("div")(() => ({
+  [".MuiTypography-root:last-child"]: {
+    marginBlockEnd: "0",
+  },
+}));
+
+const TemplateHeaderSecondaryContent = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  alignItems: "flex-end",
+  display: "flex",
+  flexDirection: "column",
+  gap: odysseyDesignTokens.Spacing2,
+  minHeight: odysseyDesignTokens.Spacing7,
+  justifyContent: "center",
+}));
+
+const TemplateHeaderButtons = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing2,
+}));
+
+const TemplateContent = styled("div", {
+  shouldForwardProp: (prop) =>
+    !["odysseyDesignTokens", "isDrawerOpen", "drawerVariant"].includes(prop),
+})<TemplateContentProps>(
+  ({ odysseyDesignTokens, isDrawerOpen, drawerVariant }) => ({
+    "@keyframes animate-drawer-open": {
+      "0%": {
+        gridTemplateColumns: "minmax(0, 1fr) 0",
+      },
+      "100%": {
+        gridTemplateColumns: "minmax(0, 1fr) 360px",
+      },
+    },
+    "@keyframes animate-drawer-close": {
+      "0%": {
+        gridTemplateColumns: "minmax(0, 1fr) 360px",
+      },
+      "100%": {
+        gridTemplateColumns: "minmax(0, 1fr) 0",
+      },
+    },
+    display: "grid",
+    gridGap:
+      drawerVariant === "persistent" && !isDrawerOpen
+        ? 0
+        : odysseyDesignTokens.Spacing4,
+    gap:
+      drawerVariant === "persistent" && !isDrawerOpen
+        ? 0
+        : odysseyDesignTokens.Spacing4,
+    marginBlock: odysseyDesignTokens.Spacing4,
+    gridTemplateColumns:
+      drawerVariant === "persistent"
+        ? isDrawerOpen
+          ? "minmax(0, 1fr) 360px"
+          : "minmax(0, 1fr) 0"
+        : "minmax(0, 1fr)",
+    animation:
+      drawerVariant === "persistent" && isDrawerOpen
+        ? "animate-drawer-open 225ms cubic-bezier(0, 0, 0.2, 1)"
+        : "animate-drawer-close 225ms cubic-bezier(0, 0, 0.2, 1)",
+  }),
+);
+
+const PageTemplate = ({
+  children,
+  description,
+  documentationLink,
+  documentationText,
+  drawer,
+  isFullWidth = false,
+  primaryCallToActionComponent,
+  secondaryCallToActionComponent,
+  tertiaryCallToActionComponent,
+  title,
+}: PageTemplateProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { isOpen: isDrawerOpen, variant: drawerVariant } = drawer?.props ?? {};
+
+  const hasUiShell = useHasUiShell();
+
+  return (
+    <TemplateContainer
+      hasUiShell={hasUiShell}
+      isFullWidth={isFullWidth}
+      odysseyDesignTokens={odysseyDesignTokens}
+    >
+      <TemplateHeader>
+        <TemplateHeaderPrimaryContent>
+          {title && <Heading4>{title}</Heading4>}
+          {description && <Subordinate>{description}</Subordinate>}
+        </TemplateHeaderPrimaryContent>
+
+        <TemplateHeaderSecondaryContent
+          odysseyDesignTokens={odysseyDesignTokens}
+        >
+          {documentationLink && (
+            <Link href={documentationLink} icon={<DocumentationIcon />}>
+              {documentationText}
+            </Link>
+          )}
+          {(primaryCallToActionComponent ||
+            secondaryCallToActionComponent ||
+            tertiaryCallToActionComponent) && (
+            <TemplateHeaderButtons odysseyDesignTokens={odysseyDesignTokens}>
+              {tertiaryCallToActionComponent}
+              {secondaryCallToActionComponent}
+              {primaryCallToActionComponent}
+            </TemplateHeaderButtons>
+          )}
+        </TemplateHeaderSecondaryContent>
+      </TemplateHeader>
+      <TemplateContent
+        odysseyDesignTokens={odysseyDesignTokens}
+        isDrawerOpen={isDrawerOpen}
+        drawerVariant={drawerVariant}
+      >
+        {children}
+        {drawer}
+      </TemplateContent>
+    </TemplateContainer>
+  );
+};
+
+const MemoizedPageTemplate = memo(PageTemplate);
+MemoizedPageTemplate.displayName = "PageTemplate";
+
+export { MemoizedPageTemplate as PageTemplate };

package/src/labs/PageTemplate/index.ts

@@ -0,0 +1,14 @@
+/*!
+ * 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.
+ */
+
+export * from "./Layout.js";
+export * from "./PageTemplate.js";

package/src/labs/PaginatedTable.tsx

@@ -10,8 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { AlertProps } from "@mui/material";
-import { Typography } from "../Typography";
+import { AlertProps, CheckboxProps } from "@mui/material";
+import { Typography } from "../Typography.js";
 import {
   MRT_PaginationState,
   type MRT_ColumnFiltersState,
@@ -35,7 +35,7 @@ import { Trans, useTranslation } from "react-i18next";
 import type {
   DefaultMaterialReactTableData,
   MaterialReactTableProps,
-} from "./materialReactTableTypes";
+} from "./materialReactTableTypes.js";
 
 export type PaginatedTableProps<TData extends DefaultMaterialReactTableData> = {
   columns: MaterialReactTableProps<TData>["columns"];
@@ -51,9 +51,7 @@ export type PaginatedTableProps<TData extends DefaultMaterialReactTableData> = {
   onRowSelectionChange?: MaterialReactTableProps<TData>["onRowSelectionChange"];
   rowsPerPage?: number;
   state?: MaterialReactTableProps<TData>["state"];
-  ToolbarButtons?: FunctionComponent<
-    { table: MRT_TableInstance<TData> } & unknown
-  >;
+  ToolbarButtons?: FunctionComponent<{ table: MRT_TableInstance<TData> }>;
 };
 
 const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
@@ -153,12 +151,17 @@ const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
 
   const dataLengthRef = useRef(data.length);
 
-  const updatePagination = useCallback(
-    // @ts-expect-error TEMP: This type aren't working after the upgrade, but they need to be fixed.
+  const updatePagination = useCallback<
+    Required<MaterialReactTableProps<TData>>["onPaginationChange"]
+  >(
     (paginationFunction) => {
       if (data.length === dataLengthRef.current) {
         setPagination((previousPagination) => {
+          // @ts-expect-error This broke in the upgrade, but this component is legacy and replaced by `DataView`.
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
           const nextPagination = paginationFunction(previousPagination);
+
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-return
           return nextPagination;
         });
       } else {
@@ -238,8 +241,10 @@ const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
     [],
   );
 
-  const muiCheckboxStyles = useCallback(
-    // @ts-expect-error TEMP: This type aren't working after the upgrade, but they need to be fixed.
+  const muiCheckboxStyles = useCallback<
+    // @ts-expect-error This breaks after the upgrade, but it doesn't matter as this is a legacy function and internal type.
+    NonNullable<Required<CheckboxProps>["sx"]>
+  >(
     (theme) =>
       typeof theme.components?.MuiCheckbox?.styleOverrides?.root === "function"
         ? theme.components?.MuiCheckbox?.styleOverrides?.root?.({

package/src/labs/StaticTable.tsx

@@ -31,7 +31,7 @@ import { useTranslation } from "react-i18next";
 import type {
   DefaultMaterialReactTableData,
   MaterialReactTableProps,
-} from "./materialReactTableTypes";
+} from "./materialReactTableTypes.js";
 
 export type StaticTableProps<TData extends DefaultMaterialReactTableData> = {
   columns: MaterialReactTableProps<TData>["columns"];
@@ -41,9 +41,7 @@ export type StaticTableProps<TData extends DefaultMaterialReactTableData> = {
   initialState?: MaterialReactTableProps<TData>["initialState"];
   onGlobalFilterChange?: MaterialReactTableProps<TData>["onGlobalFilterChange"];
   state?: MaterialReactTableProps<TData>["state"];
-  ToolbarButtons?: FunctionComponent<
-    { table: MRT_TableInstance<TData> } & unknown
-  >;
+  ToolbarButtons?: FunctionComponent<{ table: MRT_TableInstance<TData> }>;
 };
 
 const StaticTable = <TData extends DefaultMaterialReactTableData>({

package/src/labs/UserProfile.tsx

@@ -0,0 +1,104 @@
+/*!
+ * 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 styled from "@emotion/styled";
+import { memo, type ReactElement } from "react";
+
+import { Box } from "../Box.js";
+import { HtmlProps } from "../HtmlProps.js";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../OdysseyDesignTokensContext.js";
+import { Subordinate } from "../Typography.js";
+
+const UserProfileContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{ odysseyDesignTokens: DesignTokens }>({
+  display: "flex",
+  alignItems: "center",
+});
+
+const UserProfileIconContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
+  display: "flex",
+  paddingInlineEnd: odysseyDesignTokens.Spacing2,
+}));
+
+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;
+  /**
+   * The icon element to display after the username
+   */
+  userNameEndIcon?: ReactElement;
+} & Pick<HtmlProps, "translate">;
+
+const UserProfile = ({
+  profileIcon,
+  userName,
+  orgName,
+  translate,
+  userNameEndIcon,
+}: UserProfileProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  return (
+    <UserProfileContainer odysseyDesignTokens={odysseyDesignTokens}>
+      {profileIcon && (
+        <UserProfileIconContainer odysseyDesignTokens={odysseyDesignTokens}>
+          {profileIcon}
+        </UserProfileIconContainer>
+      )}
+
+      <div>
+        {userNameEndIcon ? (
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              gap: odysseyDesignTokens.Spacing2,
+            }}
+          >
+            <Subordinate color="textPrimary" translate={translate}>
+              {userName}
+            </Subordinate>
+            {userNameEndIcon}
+          </Box>
+        ) : (
+          <Subordinate color="textPrimary" translate={translate}>
+            {userName}
+          </Subordinate>
+        )}
+        <Subordinate color="textSecondary" translate={translate}>
+          {orgName}
+        </Subordinate>
+      </div>
+    </UserProfileContainer>
+  );
+};
+
+const MemoizedUserProfile = memo(UserProfile);
+MemoizedUserProfile.displayName = "UserProfile";
+
+export { MemoizedUserProfile as UserProfile };

package/src/labs/UserProfileMenuButton.tsx

@@ -0,0 +1,86 @@
+/*!
+ * 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 { memo } from "react";
+import styled from "@emotion/styled";
+
+import { ChevronDownIcon } from "../icons.generated/index.js";
+import {
+  AdditionalBaseMenuButtonProps,
+  BaseMenuButton,
+  BaseMenuButtonProps,
+} from "../Buttons/BaseMenuButton.js";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../OdysseyDesignTokensContext.js";
+import { UserProfile, UserProfileProps } from "./UserProfile.js";
+
+const StyledUnsetButtonHeightContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  button: {
+    height: "unset",
+    paddingBlock: odysseyDesignTokens.Spacing2,
+    textAlign: "unset",
+  },
+}));
+
+export type UserProfileMenuButtonProps = Omit<
+  BaseMenuButtonProps,
+  "endIcon" | "variant"
+> &
+  AdditionalBaseMenuButtonProps &
+  UserProfileProps & {
+    /**
+     *
+     * NOTE: In this case, attribute only applies to user name and org name
+     */
+    translate?: string;
+  };
+
+const UserProfileMenuButton = ({
+  profileIcon,
+  orgName,
+  translate,
+  userNameEndIcon,
+  userName,
+  ...menuButtonProps
+}: UserProfileMenuButtonProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  return (
+    <StyledUnsetButtonHeightContainer odysseyDesignTokens={odysseyDesignTokens}>
+      <BaseMenuButton
+        {...menuButtonProps}
+        buttonVariant="floating"
+        omitEndIcon={true}
+        buttonChildren={
+          <UserProfile
+            profileIcon={profileIcon}
+            userName={userName}
+            orgName={orgName}
+            translate={translate}
+            userNameEndIcon={userNameEndIcon ?? <ChevronDownIcon />}
+          />
+        }
+      />
+    </StyledUnsetButtonHeightContainer>
+  );
+};
+
+const MemoizedUserProfileMenuButton = memo(UserProfileMenuButton);
+MemoizedUserProfileMenuButton.displayName = "UserProfileMenuButton";
+
+export { MemoizedUserProfileMenuButton as UserProfileMenuButton };

package/src/labs/index.ts

@@ -15,33 +15,33 @@ export { LocalizationProvider } from "@mui/x-date-pickers";
 export type { LocalizationProviderProps } from "@mui/x-date-pickers";
 
 // export * from "./AdaptablePicker";
-export * from "./AppTile";
-export * from "./DatePicker";
-export * from "./datePickerTheme";
-
-export * from "./DataView";
-
+export * from "./AppTile.js";
+export * from "./DatePickers/index.js";
+export * from "./DataView/index.js";
 /** @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 "./Layout";
-export * from "./materialReactTableTypes";
+export * from "./DataTablePagination.js";
+export * from "./DataFilters.js";
+export * from "./materialReactTableTypes.js";
 /** @deprecated Will be removed in a future Odyssey version in lieu of DataTable */
-export * from "./StaticTable";
-export * from "./OdysseyPickers";
-export * from "./PageTemplate";
+export * from "./StaticTable.js";
+export * from "./OdysseyPickers/index.js";
+export * from "./PageTemplate/index.js";
 /** @deprecated Will be removed in a future Odyssey version in lieu of DataTable */
-export * from "./PaginatedTable";
+export * from "./PaginatedTable.js";
+export * from "./UserProfile.js";
+export * from "./UserProfileMenuButton.js";
+/** @deprecated Will be removed in a future Odyssey version. Use the `/ui-shell` export unless your app is running React v17. */
+export * from "../ui-shell/AppSwitcher/index.js";
+/** @deprecated Will be removed in a future Odyssey version. Use the `/ui-shell` export unless your app is running React v17. */
+export * from "../ui-shell/SideNav/index.js";
+/** @deprecated Will be removed in a future Odyssey version. Use the `/ui-shell` export unless your app is running React v17. */
+export * from "../ui-shell/TopNav/index.js";
+/** @deprecated Will be removed in a future Odyssey version. Use the `/ui-shell` export unless your app is running React v17. */
+export * from "../ui-shell/UiShell.js";
 
 export {
   /** @deprecated Will be removed in a future Odyssey version. Use `PickerWithOptionAdornment` */
   GroupPicker,
   type GroupPickerOptionType,
   type GroupPickerProps,
-} from "./GroupPicker";
-
-export * from "./AppSwitcher";
-export * from "./SideNav/NavAccordion";
-export * from "./SideNav";
-export * from "./TopNav";
-export * from "./UiShell";
+} from "./GroupPicker.js";

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/translations/odyssey-react-mui_cs.properties

@@ -1,3 +1,13 @@
+navigation.label = Hlavn\u00ED navigace
+navigation.footer = Sekund\u00E1rn\u00ED odkazy navigace
+navigation.drag.handle = \u00DAchop pro p\u0159eta\u017Een\u00ED
+sortable.list.drag.start = Byla vybr\u00E1na polo\u017Eka {{activeId}}, kterou lze p\u0159et\u00E1hnout
+sortable.list.drag.moved.over = Polo\u017Eka {{activeId}}, kterou lze p\u0159et\u00E1hnout, byla p\u0159esunuta nad oblast umo\u017E\u0148uj\u00EDc\u00ED p\u0159esun {{overId}}
+sortable.list.drag.nolonger.over = Polo\u017Eka {{activeId}}, kterou lze p\u0159et\u00E1hnout, ji\u017E nen\u00ED nad oblast\u00ED umo\u017E\u0148uj\u00EDc\u00ED p\u0159esun
+sortable.list.drag.end.dropped.over = Polo\u017Eka {{activeId}}, kterou lze p\u0159et\u00E1hnout, byla uvoln\u011Bna nad oblast\u00ED umo\u017E\u0148uj\u00EDc\u00ED p\u0159esun {{overId}}
+sortable.list.drag.end.dropped = Polo\u017Eka {{activeId}}, kterou lze p\u0159et\u00E1hnout, byla uvoln\u011Bna
+sortable.list.drag.cancel = P\u0159etahov\u00E1n\u00ED bylo zru\u0161eno. Polo\u017Eka {{activeId}}, kterou lze p\u0159et\u00E1hnout, byla uvoln\u011Bna
+
 breadcrumbs.home.text = Domovsk\u00E1 str\u00E1nka
 breadcrumbs.label.text = Drobe\u010Dkov\u00E1 navigace
 close.text = Zav\u0159\u00EDt
@@ -66,6 +76,7 @@ fielderror.screenreader.text = Chyba
 fieldlabel.optional.text = Voliteln\u00E9
 fieldlabel.required.text = Povinn\u00E9
 filters.clear.label = Vymazat filtry
+filters.submit.label = Odeslat
 filters.filter.any = Libovoln\u00E9
 filters.filter.clear = Vymazat filtr
 filters.filters.arialabel = Filtry
@@ -82,6 +93,8 @@ severity.error = chyba
 severity.info = informace
 severity.success = \u00FAsp\u011Bch
 severity.warning = upozorn\u011Bn\u00ED
+sidenav.toggle.expand = Otev\u0159\u00EDt navigaci
+sidenav.toggle.collapse = Zav\u0159\u00EDt navigaci
 switch.active = Aktivn\u00ED
 switch.inactive = Neaktivn\u00ED
 table.columnvisibility.arialabel = Zobrazit nebo skr\u00FDt sloupce
@@ -105,6 +118,7 @@ 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.label = Str\u00E1nkov\u00E1n\u00ED
 pagination.loadmore = Zobrazit v\u00EDce
 pagination.next = Dal\u0161\u00ED str\u00E1nka
 pagination.previous = P\u0159edchoz\u00ED str\u00E1nka
@@ -122,3 +136,5 @@ table.rowexpansion.collapseall = Sbalit v\u0161e
 dataview.layout.table = Tabulka
 dataview.layout.grid = M\u0159\u00ED\u017Eka
 dataview.layout.list = Seznam
+topnav.helpicon = str\u00E1nka n\u00E1pov\u011Bdy
+topnav.settingsicon = str\u00E1nka nastaven\u00ED

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

@@ -1,3 +1,13 @@
+navigation.label = Hovednavigation
+navigation.footer = Sekund\u00E6re links i navigation
+navigation.drag.handle = Tr\u00E6k handle
+sortable.list.drag.start = Opsamlede tr\u00E6kbart element {{activeId}}
+sortable.list.drag.moved.over = Det tr\u00E6kbare element {{activeId}} blev flyttet over slipbart omr\u00E5de {{overId}}
+sortable.list.drag.nolonger.over = Det tr\u00E6kbare element {{activeId}} er ikke l\u00E6ngere over et slipbart omr\u00E5de
+sortable.list.drag.end.dropped.over = Det tr\u00E6kbare element {{activeId}} blev sluppet over slipbart omr\u00E5de {{overId}}
+sortable.list.drag.end.dropped = Det tr\u00E6kbare element {{activeId}} blev sluppet
+sortable.list.drag.cancel = Tr\u00E6kning blev annulleret. Det tr\u00E6kbare element {{activeId}} blev sluppet
+
 breadcrumbs.home.text = Start
 breadcrumbs.label.text = Rasp
 close.text = Luk
@@ -66,6 +76,7 @@ fielderror.screenreader.text = Fejl
 fieldlabel.optional.text = Valgfrit
 fieldlabel.required.text = P\u00E5kr\u00E6vet
 filters.clear.label = Ryd filtre
+filters.submit.label = Sende
 filters.filter.any = Hvilket som helst
 filters.filter.clear = Ryd filter
 filters.filters.arialabel = Filter
@@ -82,6 +93,8 @@ severity.error = fejl
 severity.info = oplysninger
 severity.success = fuldf\u00F8rt
 severity.warning = advarsel
+sidenav.toggle.expand = \u00C5bn navigation
+sidenav.toggle.collapse = Luk navigation
 switch.active = Aktiv
 switch.inactive = Inaktiv
 table.columnvisibility.arialabel = Vis/skjul kolonner
@@ -105,6 +118,7 @@ table.reorder.toback = Placer bagerst
 table.reorder.tofront = Placer forrest
 table.rows.text = {{totalRows}} r\u00E6kke
 table.rows.text_plural = {{totalRows}} r\u00E6kker
+pagination.label = Sideinddeling
 pagination.loadmore = Vis mere
 pagination.next = N\u00E6ste side
 pagination.previous = Forrige side
@@ -122,3 +136,5 @@ table.rowexpansion.collapseall = Skjul alle
 dataview.layout.table = Tabel
 dataview.layout.grid = Gitter
 dataview.layout.list = Liste
+topnav.helpicon = hj\u00E6lpeside
+topnav.settingsicon = indstillingsside