@okta/odyssey-react-mui 1.21.2 → 1.23.0

package/src/labs/SideNav/SideNavHeader.tsx

@@ -0,0 +1,88 @@
+/*!
+ * 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, ReactNode, useMemo } from "react";
+import {
+  type DesignTokens,
+  useOdysseyDesignTokens,
+} from "../../OdysseyDesignTokensContext";
+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",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  paddingLeft: odysseyDesignTokens.Spacing4,
+  paddingRight: odysseyDesignTokens.Spacing4,
+  paddingTop: odysseyDesignTokens.Spacing3,
+  paddingBottom: odysseyDesignTokens.Spacing3,
+}));
+
+const SideNavHeader = ({
+  navHeaderText,
+  isCollapsible,
+  onCollapse,
+  logo,
+}: Pick<
+  SideNavProps,
+  "navHeaderText" | "isCollapsible" | "onCollapse" | "logo"
+>): ReactNode => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const sideNavHeaderStyles = useMemo(
+    () => ({
+      marginTop: odysseyDesignTokens.Spacing2,
+    }),
+    [odysseyDesignTokens],
+  );
+
+  return (
+    <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);
+MemoizedSideNavHeader.displayName = "SideNavHeader";
+
+export { MemoizedSideNavHeader as SideNavHeader };

package/src/labs/SideNav/SideNavItemContent.tsx

@@ -0,0 +1,216 @@
+/*!
+ * 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 {
+  useRef,
+  useImperativeHandle,
+  useCallback,
+  memo,
+  KeyboardEvent,
+} from "react";
+import { Link } from "../../Link";
+import {
+  type DesignTokens,
+  useOdysseyDesignTokens,
+} from "../../OdysseyDesignTokensContext";
+import { SideNavItemLinkContent } from "./SideNavItemLinkContent";
+import type { SideNavItem } from "./types";
+
+export const SideNavListItemContainer = styled("li", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" &&
+    prop !== "isSelected" &&
+    prop !== "isDisabled",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  isSelected?: boolean;
+  disabled?: boolean;
+  isDisabled?: boolean;
+}>(({ odysseyDesignTokens, isSelected, isDisabled }) => ({
+  display: "flex",
+  alignItems: "center",
+  cursor: isDisabled ? "default" : "pointer",
+  pointerEvents: isDisabled ? "none" : "auto",
+  backgroundColor: isSelected ? odysseyDesignTokens.HueNeutral50 : "unset",
+  margin: `${odysseyDesignTokens.Spacing1} 0`,
+  "&:last-child": {
+    marginBottom: odysseyDesignTokens.Spacing2,
+  },
+  "& a": {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    minHeight: "48px",
+    padding: `${odysseyDesignTokens.Spacing3} ${odysseyDesignTokens.Spacing4}`,
+    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
+    pointerEvents: isDisabled ? "none" : "auto",
+  },
+  "& a:hover": {
+    textDecoration: "none",
+    cursor: isDisabled ? "default" : "pointer",
+    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
+  },
+  "& a:focus-visible": {
+    outlineOffset: 0,
+    borderRadius: 0,
+    outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,
+    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
+  },
+}));
+
+const scrollToNode = (node: HTMLElement | null) => {
+  if (node) {
+    node?.scrollIntoView({
+      behavior: "instant",
+      block: "center",
+      inline: "nearest",
+    });
+  }
+};
+
+type ScrollIntoViewHandle = {
+  scrollIntoView: () => void;
+};
+
+const SideNavItemContent = ({
+  id,
+  label,
+  href,
+  target,
+  startIcon,
+  severity,
+  statusLabel,
+  endIcon,
+  onClick,
+  isSelected,
+  isDisabled,
+  scrollRef,
+}: Pick<
+  SideNavItem,
+  | "id"
+  | "label"
+  | "href"
+  | "target"
+  | "startIcon"
+  | "severity"
+  | "statusLabel"
+  | "endIcon"
+  | "onClick"
+  | "isSelected"
+  | "isDisabled"
+> & {
+  /**
+   * The ref used to scroll to this item
+   */
+  scrollRef?: React.RefObject<ScrollIntoViewHandle>;
+}) => {
+  const localScrollRef = useRef<HTMLLIElement>(null);
+  useImperativeHandle(
+    scrollRef,
+    () => {
+      return {
+        scrollIntoView: () => {
+          scrollToNode(localScrollRef.current);
+        },
+      };
+    },
+    [],
+  );
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const NavItemContentClickContainer = styled("div", {
+    shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+  })(() => ({
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    minHeight: "48px",
+    padding: `${odysseyDesignTokens.Spacing3} ${odysseyDesignTokens.Spacing4}`,
+    color: `${isDisabled ? odysseyDesignTokens.TypographyColorDisabled : odysseyDesignTokens.TypographyColorHeading} !important`,
+    "&:focus-visible": {
+      borderRadius: 0,
+      outlineColor: odysseyDesignTokens.FocusOutlineColorPrimary,
+      outlineStyle: odysseyDesignTokens.FocusOutlineStyle,
+      outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,
+      backgroundColor: odysseyDesignTokens.HueNeutral50,
+      textDecoration: "none",
+    },
+  }));
+
+  const sideNavItemContentKeyHandler = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (event?.key === "Enter") {
+        event.preventDefault();
+        onClick?.();
+      }
+    },
+    [onClick],
+  );
+
+  return (
+    <SideNavListItemContainer
+      ref={localScrollRef}
+      id={id}
+      key={id}
+      disabled={isDisabled}
+      aria-disabled={isDisabled}
+      isDisabled={isDisabled}
+      isSelected={isSelected}
+      odysseyDesignTokens={odysseyDesignTokens}
+    >
+      {
+        // Use Link for nav items with links and div for disabled or non-link items
+        isDisabled ? (
+          <NavItemContentClickContainer>
+            <SideNavItemLinkContent
+              label={label}
+              startIcon={startIcon}
+              endIcon={endIcon}
+              statusLabel={statusLabel}
+              severity={severity}
+            />
+          </NavItemContentClickContainer>
+        ) : !href ? (
+          <NavItemContentClickContainer
+            role="button"
+            tabIndex={0}
+            onClick={onClick}
+            onKeyDown={sideNavItemContentKeyHandler}
+          >
+            <SideNavItemLinkContent
+              label={label}
+              startIcon={startIcon}
+              endIcon={endIcon}
+              statusLabel={statusLabel}
+              severity={severity}
+            />
+          </NavItemContentClickContainer>
+        ) : (
+          <Link href={href} target={target} onClick={onClick}>
+            <SideNavItemLinkContent
+              label={label}
+              startIcon={startIcon}
+              endIcon={endIcon}
+              statusLabel={statusLabel}
+              severity={severity}
+            />
+          </Link>
+        )
+      }
+    </SideNavListItemContainer>
+  );
+};
+const MemoizedSideNavItemContent = memo(SideNavItemContent);
+MemoizedSideNavItemContent.displayName = "SideNavItemContent";
+
+export { MemoizedSideNavItemContent as SideNavItemContent };

package/src/labs/SideNav/SideNavItemLinkContent.tsx

@@ -0,0 +1,87 @@
+/*!
+ * 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, ReactNode, useMemo } from "react";
+import {
+  type DesignTokens,
+  useOdysseyDesignTokens,
+} from "../../OdysseyDesignTokensContext";
+import { Box } from "../../Box";
+import { Status } from "../../Status";
+import type { SideNavItem } from "./types";
+
+const SideNavItemLabelContainer = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "isIconVisible",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  isIconVisible: boolean;
+}>(({ odysseyDesignTokens, isIconVisible }) => ({
+  width: "100%",
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  fontSize: odysseyDesignTokens.TypographyScale0,
+  fontWeight: odysseyDesignTokens.TypographyWeightHeading,
+  marginLeft: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,
+  "& a": {
+    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
+    fontSize: odysseyDesignTokens.TypographyScale0,
+  },
+  "& a:hover": {
+    textDecoration: "none",
+    cursor: "pointer",
+  },
+}));
+
+const SideNavItemLinkContent = ({
+  label,
+  startIcon,
+  endIcon,
+  severity,
+  statusLabel,
+}: Pick<
+  SideNavItem,
+  "label" | "startIcon" | "endIcon" | "severity" | "statusLabel"
+>): ReactNode => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const sideNavItemContentStyles = useMemo(
+    () => ({
+      marginLeft: odysseyDesignTokens.Spacing2,
+    }),
+    [odysseyDesignTokens],
+  );
+
+  return (
+    <>
+      {startIcon && startIcon}
+      <SideNavItemLabelContainer
+        odysseyDesignTokens={odysseyDesignTokens}
+        isIconVisible={Boolean(startIcon)}
+      >
+        {label}
+        {severity && (
+          <Box sx={sideNavItemContentStyles}>
+            <Status severity={severity} label={statusLabel || ""} />
+          </Box>
+        )}
+      </SideNavItemLabelContainer>
+      {endIcon && endIcon}
+    </>
+  );
+};
+const MemoizedSideNavItemLinkContent = memo(SideNavItemLinkContent);
+MemoizedSideNavItemLinkContent.displayName = "SideNavItemLinkContent";
+
+export { MemoizedSideNavItemLinkContent as SideNavItemLinkContent };

package/src/labs/SideNav/index.ts

@@ -0,0 +1,15 @@
+/*!
+ * 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 { SideNav } from "./SideNav";
+
+export * from "./types";

package/src/labs/SideNav/types.ts

@@ -0,0 +1,152 @@
+/*!
+ * 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 type { ReactElement } from "react";
+import type { HtmlProps } from "../../HtmlProps";
+import type { statusSeverityValues } from "../../Status";
+
+export type SideNavProps = {
+  /**
+   * Side Nav header text that is usually reserved to show the App name
+   */
+  navHeaderText: string;
+  /**
+   *  Determines whether the side nav is collapsible
+   */
+  isCollapsible?: boolean;
+  /**
+   *  Triggers when the side nav is collapsed
+   */
+  onCollapse?(): void;
+  /**
+   *  Triggers when the side nav is expanded
+   */
+  onExpand?(): void;
+  /**
+   * Nav items in the side nav
+   */
+  sideNavItems: SideNavItem[];
+  /**
+   * 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;
+  label: string;
+  /**
+   * The icon element to display at the end of the Nav Item
+   */
+  endIcon?: ReactElement;
+  /**
+   * Whether the item is disabled. When set to true the nav item is set to Disabled color,
+   * the link/item is not clickable, and item with children is not expandable.
+   */
+  isDisabled?: boolean;
+  /**
+   * Whether the item is active/selected
+   */
+  isSelected?: boolean;
+  /**
+   * Event fired when the nav item is clicked
+   */
+  onClick?(): void;
+  /**
+   * The status element to display after the label
+   */
+  severity?: (typeof statusSeverityValues)[number];
+  /**
+   * The icon element to display at the start of the Nav Item
+   */
+  startIcon?: ReactElement;
+  /**
+   * The label to display inside the status
+   */
+  statusLabel?: string;
+  /**
+   * The link target prop. e.g., "_blank"
+   */
+  target?: string;
+} & (
+  | {
+      /**
+       * Determines if the side nav item is a section header
+       */
+      isSectionHeader: true;
+      href?: never;
+      children?: never;
+      isDefaultExpanded?: never;
+      isExpanded?: never;
+    }
+  | {
+      /**
+       * link added to the nav item. if it is undefined, static text will be displayed.
+       * fires onClick event when it is passed
+       */
+      href: string;
+      children?: never;
+      isSectionHeader?: never;
+      isDefaultExpanded?: never;
+      isExpanded?: never;
+    }
+  | {
+      /**
+       * An array of side nav items to be displayed as children within Accordion
+       */
+      children?: SideNavItem[];
+      /**
+       * Whether the accordion (nav item with children) is expanded by default
+       */
+      isDefaultExpanded?: boolean;
+      /**
+       * If true, expands the accordion, otherwise collapse it.
+       * Setting this prop enables control over the accordion.
+       */
+      isExpanded?: boolean;
+      isSectionHeader?: never;
+      href?: never;
+    }
+);
+
+export type SideNavFooterItem = {
+  href?: string;
+  id: string;
+  label: 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

@@ -14,15 +14,16 @@ export { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 export { LocalizationProvider } from "@mui/x-date-pickers";
 export type { LocalizationProviderProps } from "@mui/x-date-pickers";
 
+export * from "./AppTile";
+
 export * from "./DatePicker";
 export * from "./datePickerTheme";
 
-export * from "./DataComponents";
+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 */
@@ -33,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/translations/odyssey-react-mui_cs.properties

@@ -1,12 +1,16 @@
 breadcrumbs.home.text = Domovsk\u00E1 str\u00E1nka
 breadcrumbs.label.text = Drobe\u010Dkov\u00E1 navigace
-close.text = zav\u0159\u00EDt
+close.text = Zav\u0159\u00EDt
 clear.text = Vymazat
+open.text = Otev\u0159\u00EDt
 picker.calendar.navigation.nextmonth = Dal\u0161\u00ED m\u011Bs\u00EDc
 picker.calendar.navigation.previousmonth = P\u0159edchoz\u00ED m\u011Bs\u00EDc
 picker.date.toolbar.title = Vybran\u00E9 datum
 picker.daterange.toolbar.title = Vybrat rozmez\u00ED dat
 picker.datetime.toolbar.title = Vybrat datum a \u010Das
+picker.error.invalid = Opravte form\u00E1t data nebo vyberte datum z kalend\u00E1\u0159e.
+picker.error.mindate = Zadan\u00E9 datum je d\u0159\u00EDv\u011Bj\u0161\u00ED, ne\u017E je povoleno. Vyberte datum v rozmez\u00ED dostupn\u00E9m v kalend\u00E1\u0159i.
+picker.error.maxdate = Zadan\u00E9 datum je pozd\u011Bj\u0161\u00ED, ne\u017E je povoleno. Vyberte datum v rozmez\u00ED dostupn\u00E9m v kalend\u00E1\u0159i.
 # placeholder text in date field
 picker.field.placeholder.day = DD
 # placeholder text in date/time field
@@ -79,7 +83,6 @@ severity.success = \u00FAsp\u011Bch
 severity.warning = upozorn\u011Bn\u00ED
 switch.active = Aktivn\u00ED
 switch.inactive = Neaktivn\u00ED
-table.actions = Akce
 table.columnvisibility.arialabel = Zobrazit nebo skr\u00FDt sloupce
 table.density.arialabel = Hustota tabulky
 table.draghandle.arialabel = Po\u0159ad\u00ED \u0159\u00E1dk\u016F m\u016F\u017Eete zm\u011Bnit p\u0159eta\u017Een\u00EDm. Zm\u011Bny po\u0159ad\u00ED m\u016F\u017Eete tak\u00E9 zah\u00E1jit a dokon\u010Dit stisknut\u00EDm mezern\u00EDku nebo kl\u00E1vesy Enter a zru\u0161it stisknut\u00EDm kl\u00E1vesy Esc.
@@ -108,4 +111,13 @@ pagination.page = Str\u00E1nka
 pagination.rowsperpage = Po\u010Det \u0159\u00E1dk\u016F na str\u00E1nku
 pagination.rowswithtotal = \u0158\u00E1dky {{firstRow}}\u2013{{lastRow}} z {{totalRows}}
 pagination.rowswithouttotal = \u0158\u00E1dky {{firstRow}}\u2013{{lastRow}}
-
+table.actions.selectall = Vybrat v\u0161e
+table.actions.selectnone = Zru\u0161it v\u00FDb\u011Br
+table.actions.selectsome = Vybr\u00E1no: {{selectedRowCount}}
+table.rowexpansion.expand = Rozbalit
+table.rowexpansion.expandall = Rozbalit v\u0161e
+table.rowexpansion.collapse = Sbalit
+table.rowexpansion.collapseall = Sbalit v\u0161e
+dataview.layout.table = Tabulka
+dataview.layout.grid = M\u0159\u00ED\u017Eka
+dataview.layout.list = Seznam