@geotab/zenith 3.1.1-beta.5 → 3.2.0-beta.0

package/esm/dataGrid/dataGrid.js

@@ -1,3 +1,4 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
@@ -9,132 +10,236 @@ import { useResize } from "../commonHelpers/hooks/useResize";
 import { useResizeObserver } from "../commonHelpers/hooks/useResizeObserver";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { getRowClassName } from "./getRowClassName";
+injectString("cs", "Action", "Akce");
+injectString("da-DK", "Action", "Handling");
+injectString("de", "Action", "Aktion");
+injectString("en", "Action", "Action");
+injectString("es", "Action", "Acci\xF3n");
+injectString("fi-FI", "Action", "Toiminto");
+injectString("fr", "Action", "Action");
+injectString("fr-FR", "Action", "Action");
+injectString("hu-HU", "Action", "M\u0171velet");
+injectString("id", "Action", "Tindakan");
+injectString("it", "Action", "Azione");
+injectString("ja", "Action", "\u30A2\u30AF\u30B7\u30E7\u30F3");
+injectString("ko-KR", "Action", "\uC870\uCE58");
+injectString("ms", "Action", "Tindakan");
+injectString("nb-NO", "Action", "Handling");
+injectString("nl", "Action", "Actie");
+injectString("pl", "Action", "Dzia\u0142anie");
+injectString("pt-BR", "Action", "A\xE7\xE3o");
+injectString("sk-SK", "Action", "Akcia");
+injectString("sv", "Action", "\xC5tg\xE4rd");
+injectString("th", "Action", "\u0E01\u0E32\u0E23\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23");
+injectString("tr", "Action", "Eylem");
+injectString("zh-Hans", "Action", "\u64CD\u4F5C");
+injectString("zh-TW", "Action", "\u52D5\u4F5C");
 export const NOT_INTERACTIVE_MODIFIER = "zen-data-grid--not-interactive";
 export const DRAGGING_MODIFIER = "zen-data-grid--dragging";
 export const HORIZONTAL_SCROLL_MODIFIER = "zen-data-grid--horizontal-scroll";
 export const VERTICAL_SCROLL_MODIFIER = "zen-data-grid--vertical-scroll";
 export const MIN_CELL_WIDTH = 100;
 const renderHeaderWrappers = (wrappers, value) => wrappers.reduce((result, wrapper) => wrapper.renderHeader(result), value);
-const getColumnWidth = (defaultWidth) => Math.floor(Math.max(defaultWidth, MIN_CELL_WIDTH));
-export const EmptyList = ({ children }) => _jsx("div", { className: "zen-data-grid__empty", children: children });
-export const Footer = ({ children }) => _jsx("div", { className: "zen-data-grid__footer", children: children });
+const getColumnWidth = defaultWidth => Math.floor(Math.max(defaultWidth, MIN_CELL_WIDTH));
+export const EmptyList = ({
+  children
+}) => _jsx("div", {
+  className: "zen-data-grid__empty",
+  children: children
+});
+export const Footer = ({
+  children
+}) => _jsx("div", {
+  className: "zen-data-grid__footer",
+  children: children
+});
 const FIRST_RENDERED_ROWS = 100;
-const DataGridInner = ({ entities, columns, className = "", description, emptyCellTitle, children, rowClassName, expandedRows, onExpandedChange }, ref) => {
-    const { translate } = useLanguage();
-    const emptyCellTitleValue = emptyCellTitle || translate("Action");
-    // States
-    const columnsList = useMemo(() => columns.map(toBasicColumn), [columns]);
-    const initialVisibleRows = useMemo(() => entities.slice(0, FIRST_RENDERED_ROWS).map(r => r.id), [entities]);
-    const [visibleRows, setVisibleRows] = useState(new Set(initialVisibleRows));
-    const [horizontalScrollApplied, setHorizontalScrollApplied] = useState(false);
-    const [verticalScrollApplied, setVerticalScrollApplied] = useState(false);
-    // Refs
-    const gridRef = useRef(null);
-    const bodyRef = useRef(null);
-    const lazyRenderTimerRef = useRef(0);
-    const rowsMap = useMemo(() => new Map(entities.map(entity => [entity.id, entity])), [entities]);
-    const emptyList = useMemo(() => Children.toArray(children).find(child => child.type === EmptyList), [children]);
-    const footer = useMemo(() => Children.toArray(children).find(child => child.type === Footer), [children]);
-    useImperativeHandle(ref, () => gridRef.current, []);
-    const getVisibleRows = () => {
-        if (!gridRef.current || !bodyRef.current) {
-            return [];
-        }
-        const { top, bottom } = gridRef.current.getBoundingClientRect();
-        return findVisibleRows([...bodyRef.current.children], top, bottom);
+const DataGridInner = ({
+  entities,
+  columns,
+  className = "",
+  description,
+  emptyCellTitle,
+  children,
+  rowClassName,
+  expandedRows,
+  onExpandedChange
+}, ref) => {
+  const {
+    translate
+  } = useLanguage();
+  const emptyCellTitleValue = emptyCellTitle || translate("Action");
+  // States
+  const columnsList = useMemo(() => columns.map(toBasicColumn), [columns]);
+  const initialVisibleRows = useMemo(() => entities.slice(0, FIRST_RENDERED_ROWS).map(r => r.id), [entities]);
+  const [visibleRows, setVisibleRows] = useState(new Set(initialVisibleRows));
+  const [horizontalScrollApplied, setHorizontalScrollApplied] = useState(false);
+  const [verticalScrollApplied, setVerticalScrollApplied] = useState(false);
+  // Refs
+  const gridRef = useRef(null);
+  const bodyRef = useRef(null);
+  const lazyRenderTimerRef = useRef(0);
+  const rowsMap = useMemo(() => new Map(entities.map(entity => [entity.id, entity])), [entities]);
+  const emptyList = useMemo(() => Children.toArray(children).find(child => child.type === EmptyList), [children]);
+  const footer = useMemo(() => Children.toArray(children).find(child => child.type === Footer), [children]);
+  useImperativeHandle(ref, () => gridRef.current, []);
+  const getVisibleRows = () => {
+    if (!gridRef.current || !bodyRef.current) {
+      return [];
+    }
+    const {
+      top,
+      bottom
+    } = gridRef.current.getBoundingClientRect();
+    return findVisibleRows([...bodyRef.current.children], top, bottom);
+  };
+  const scheduleVisibleChanges = useCallback(() => requestAnimationFrame(() => {
+    const visible = getVisibleRows();
+    const newVisibleRows = visible.filter(row => {
+      const id = row.dataset.rowId;
+      if (id === undefined) {
+        return false;
+      }
+      const entity = rowsMap.get(id);
+      if (entity === undefined) {
+        return false;
+      }
+      return row;
+    }).map(row => row.dataset.rowId);
+    const hasNewRows = newVisibleRows.some(id => !visibleRows.has(id));
+    if (hasNewRows) {
+      const newRowsSet = new Set(visibleRows);
+      newVisibleRows.forEach(row => newRowsSet.add(row));
+      setVisibleRows(newRowsSet);
+    }
+  }), [rowsMap, setVisibleRows, visibleRows]);
+  const scheduleLazyRender = useCallback(() => {
+    cancelAnimationFrame(lazyRenderTimerRef.current);
+    lazyRenderTimerRef.current = scheduleVisibleChanges();
+  }, [scheduleVisibleChanges]);
+  useEffect(() => {
+    const visible = new Set(entities.slice(0, FIRST_RENDERED_ROWS).map(r => r.id));
+    const currentlyVisibleRows = getVisibleRows();
+    currentlyVisibleRows.forEach(row => {
+      const id = row.dataset.rowId;
+      if (id) {
+        visible.add(id);
+      }
+    });
+    setVisibleRows(visible);
+  }, [entities]);
+  const listOfDefaultWidthColumns = useMemo(() => columnsList.map(column => column.meta.defaultWidth), [columnsList]);
+  const {
+    result: observerResult
+  } = useResizeObserver({
+    target: gridRef.current
+  });
+  const allocatedSpace = listOfDefaultWidthColumns.reduce((acc, width) => acc + (width === undefined ? 0 : getColumnWidth(width)), 0);
+  const unallocatedSpace = observerResult && observerResult.contentRect.width - allocatedSpace || 0;
+  const flexibleColumnsQty = listOfDefaultWidthColumns.filter(width => width === undefined).length;
+  const flexibleColumnWidth = getColumnWidth(unallocatedSpace / flexibleColumnsQty);
+  const updateScroll = useCallback(() => {
+    if (!gridRef.current) {
+      return;
+    }
+    const scrollLeft = gridRef.current.scrollLeft;
+    const scrollTop = gridRef.current.scrollTop;
+    if (horizontalScrollApplied !== scrollLeft > 0) {
+      setHorizontalScrollApplied(scrollLeft > 0);
+    }
+    if (verticalScrollApplied !== scrollTop > 0) {
+      setVerticalScrollApplied(scrollTop > 0);
+    }
+  }, [horizontalScrollApplied, setHorizontalScrollApplied, verticalScrollApplied, setVerticalScrollApplied]);
+  const handleScroll = useCallback(() => {
+    updateScroll();
+    scheduleLazyRender();
+  }, [updateScroll, scheduleLazyRender]);
+  const getCellParams = useCallback(columnIndex => {
+    const defaultWidth = listOfDefaultWidthColumns[columnIndex];
+    const limited = !!defaultWidth && defaultWidth > 0;
+    const isFirst = columnIndex === 0;
+    const isLast = columnIndex === listOfDefaultWidthColumns.length - 1;
+    // If the column is the last one or doesn't have a default width, it should be limited to the remaining space
+    const width = getColumnWidth(defaultWidth || flexibleColumnWidth);
+    return {
+      limited,
+      isFirst,
+      isLast,
+      width
     };
-    const scheduleVisibleChanges = useCallback(() => requestAnimationFrame(() => {
-        const visible = getVisibleRows();
-        const newVisibleRows = visible.filter(row => {
-            const id = row.dataset.rowId;
-            if (id === undefined) {
-                return false;
-            }
-            const entity = rowsMap.get(id);
-            if (entity === undefined) {
-                return false;
-            }
-            return row;
-        }).map(row => row.dataset.rowId);
-        const hasNewRows = newVisibleRows.some(id => !visibleRows.has(id));
-        if (hasNewRows) {
-            const newRowsSet = new Set(visibleRows);
-            newVisibleRows.forEach(row => newRowsSet.add(row));
-            setVisibleRows(newRowsSet);
-        }
-    }), [rowsMap, setVisibleRows, visibleRows]);
-    const scheduleLazyRender = useCallback(() => {
-        cancelAnimationFrame(lazyRenderTimerRef.current);
-        lazyRenderTimerRef.current = scheduleVisibleChanges();
-    }, [scheduleVisibleChanges]);
-    useEffect(() => {
-        const visible = new Set(entities.slice(0, FIRST_RENDERED_ROWS).map(r => r.id));
-        const currentlyVisibleRows = getVisibleRows();
-        currentlyVisibleRows.forEach(row => {
-            const id = row.dataset.rowId;
-            if (id) {
-                visible.add(id);
-            }
-        });
-        setVisibleRows(visible);
-    }, [entities]);
-    const listOfDefaultWidthColumns = useMemo(() => columnsList.map(column => column.meta.defaultWidth), [columnsList]);
-    const { result: observerResult } = useResizeObserver({ target: gridRef.current });
-    const allocatedSpace = listOfDefaultWidthColumns.reduce((acc, width) => acc + (width === undefined ? 0 : getColumnWidth(width)), 0);
-    const unallocatedSpace = observerResult && (observerResult.contentRect.width - allocatedSpace) || 0;
-    const flexibleColumnsQty = listOfDefaultWidthColumns.filter(width => width === undefined).length;
-    const flexibleColumnWidth = getColumnWidth(unallocatedSpace / flexibleColumnsQty);
-    const updateScroll = useCallback(() => {
-        if (!gridRef.current) {
-            return;
-        }
-        const scrollLeft = gridRef.current.scrollLeft;
-        const scrollTop = gridRef.current.scrollTop;
-        if (horizontalScrollApplied !== scrollLeft > 0) {
-            setHorizontalScrollApplied(scrollLeft > 0);
-        }
-        if (verticalScrollApplied !== scrollTop > 0) {
-            setVerticalScrollApplied(scrollTop > 0);
-        }
-    }, [horizontalScrollApplied, setHorizontalScrollApplied, verticalScrollApplied, setVerticalScrollApplied]);
-    const handleScroll = useCallback(() => {
-        updateScroll();
-        scheduleLazyRender();
-    }, [updateScroll, scheduleLazyRender]);
-    const getCellParams = useCallback((columnIndex) => {
-        const defaultWidth = listOfDefaultWidthColumns[columnIndex];
-        const limited = !!defaultWidth && defaultWidth > 0;
-        const isFirst = columnIndex === 0;
-        const isLast = columnIndex === listOfDefaultWidthColumns.length - 1;
-        // If the column is the last one or doesn't have a default width, it should be limited to the remaining space
-        const width = getColumnWidth(defaultWidth || flexibleColumnWidth);
-        return { limited, isFirst, isLast, width };
-    }, [listOfDefaultWidthColumns, flexibleColumnWidth]);
-    const renderHeaderCell = useCallback((column, columnIndex) => {
-        var _a;
-        const { isFirst, isLast, width } = getCellParams(columnIndex);
-        const text = ((_a = column.columnComponent.renderHeader) === null || _a === void 0 ? void 0 : _a.bind(column.columnComponent)) ? column.columnComponent.renderHeader(column.title) : column.title;
-        return _jsx(DataGridHeaderCell, { id: column.id, isFirst: isFirst, isLast: isLast, name: column.name, width: width, hidden: !text, children: _jsx("div", { className: "zen-data-grid__header-cell-content", children: renderHeaderWrappers(column.wrappers, _jsx("div", { className: classNames(["zen-data-grid-header", column.title ? "" : "zen-visually-hidden"]), children: column.title ? text : emptyCellTitleValue })) }) }, `header_${column.name}`);
-    }, [getCellParams, emptyCellTitleValue]);
-    const isTreeGrid = useMemo(() => !!entities.find(e => e.children && e.children.length > 0), [entities]);
-    const renderRow = useCallback((entity, entityIndex, total) => _jsx(DataGridRow, { id: entity.id, isLastRow: entityIndex === total - 1, columns: columnsList, entity: entity, visibleRows: visibleRows, flexibleColumnWidth: flexibleColumnWidth, className: getRowClassName(rowClassName, entity), expanded: expandedRows && expandedRows.indexOf(entity.id) > -1, onExpandedChange: entity.children && entity.children.length > 0 ? (isExpanded) => onExpandedChange && onExpandedChange(entity.id, isExpanded) : undefined, isTreeGrid: isTreeGrid, ariaPosinset: entityIndex + 1, ariaSetsize: total }, entity.id), [columnsList, expandedRows, flexibleColumnWidth, onExpandedChange, rowClassName, visibleRows, isTreeGrid]);
-    const body = useMemo(() => entities.map((entity, entityIndex) => renderRow(entity, entityIndex, entities.length)), [entities, renderRow]);
-    const headerContent = useMemo(() => columnsList.map((column, index) => renderHeaderCell(column, index)), [columnsList, renderHeaderCell]);
-    useResize(() => {
-        handleScroll();
-    }, true);
-    const gridClasses = classNames([
-        "zen-data-grid",
-        className,
-        horizontalScrollApplied ? HORIZONTAL_SCROLL_MODIFIER : "",
-        verticalScrollApplied ? VERTICAL_SCROLL_MODIFIER : ""
-    ]);
-    return _jsx("div", { className: "zen-data-grid-wrapper", children: _jsxs("div", { className: gridClasses, ref: gridRef, onScroll: handleScroll, children: [_jsxs("table", { className: "zen-data-grid__table", "aria-label": description, role: isTreeGrid ? "treegrid" : undefined, children: [_jsx("thead", { className: "zen-data-grid__header", children: _jsx("tr", { className: "zen-data-grid__header-row", children: headerContent }) }), _jsx("tbody", { ref: bodyRef, children: body })] }), emptyList && entities.length === 0 ? emptyList : null, footer] }) });
+  }, [listOfDefaultWidthColumns, flexibleColumnWidth]);
+  const renderHeaderCell = useCallback((column, columnIndex) => {
+    var _a;
+    const {
+      isFirst,
+      isLast,
+      width
+    } = getCellParams(columnIndex);
+    const text = ((_a = column.columnComponent.renderHeader) === null || _a === void 0 ? void 0 : _a.bind(column.columnComponent)) ? column.columnComponent.renderHeader(column.title) : column.title;
+    return _jsx(DataGridHeaderCell, {
+      id: column.id,
+      isFirst: isFirst,
+      isLast: isLast,
+      name: column.name,
+      width: width,
+      hidden: !text,
+      children: _jsx("div", {
+        className: "zen-data-grid__header-cell-content",
+        children: renderHeaderWrappers(column.wrappers, _jsx("div", {
+          className: classNames(["zen-data-grid-header", column.title ? "" : "zen-visually-hidden"]),
+          children: column.title ? text : emptyCellTitleValue
+        }))
+      })
+    }, `header_${column.name}`);
+  }, [getCellParams, emptyCellTitleValue]);
+  const isTreeGrid = useMemo(() => !!entities.find(e => e.children && e.children.length > 0), [entities]);
+  const renderRow = useCallback((entity, entityIndex, total) => _jsx(DataGridRow, {
+    id: entity.id,
+    isLastRow: entityIndex === total - 1,
+    columns: columnsList,
+    entity: entity,
+    visibleRows: visibleRows,
+    flexibleColumnWidth: flexibleColumnWidth,
+    className: getRowClassName(rowClassName, entity),
+    expanded: expandedRows && expandedRows.indexOf(entity.id) > -1,
+    onExpandedChange: entity.children && entity.children.length > 0 ? isExpanded => onExpandedChange && onExpandedChange(entity.id, isExpanded) : undefined,
+    isTreeGrid: isTreeGrid,
+    ariaPosinset: entityIndex + 1,
+    ariaSetsize: total
+  }, entity.id), [columnsList, expandedRows, flexibleColumnWidth, onExpandedChange, rowClassName, visibleRows, isTreeGrid]);
+  const body = useMemo(() => entities.map((entity, entityIndex) => renderRow(entity, entityIndex, entities.length)), [entities, renderRow]);
+  const headerContent = useMemo(() => columnsList.map((column, index) => renderHeaderCell(column, index)), [columnsList, renderHeaderCell]);
+  useResize(() => {
+    handleScroll();
+  }, true);
+  const gridClasses = classNames(["zen-data-grid", className, horizontalScrollApplied ? HORIZONTAL_SCROLL_MODIFIER : "", verticalScrollApplied ? VERTICAL_SCROLL_MODIFIER : ""]);
+  return _jsx("div", {
+    className: "zen-data-grid-wrapper",
+    children: _jsxs("div", {
+      className: gridClasses,
+      ref: gridRef,
+      onScroll: handleScroll,
+      children: [_jsxs("table", {
+        className: "zen-data-grid__table",
+        "aria-label": description,
+        role: isTreeGrid ? "treegrid" : undefined,
+        children: [_jsx("thead", {
+          className: "zen-data-grid__header",
+          children: _jsx("tr", {
+            className: "zen-data-grid__header-row",
+            children: headerContent
+          })
+        }), _jsx("tbody", {
+          ref: bodyRef,
+          children: body
+        })]
+      }), emptyList && entities.length === 0 ? emptyList : null, footer]
+    })
+  });
 };
 const DataGrid = forwardRef(DataGridInner);
 DataGrid.EmptyList = EmptyList;
 DataGrid.Footer = Footer;
 export { DataGrid };
-export const TRANSLATIONS = [
-    "Action"
-];
+export const TRANSLATIONS = ["Action"];

package/esm/dataGrid/emptySearchList/emptySearchList.js

@@ -1,13 +1,55 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { ImageNothingFound } from "../../images/imageNothingFound";
 import { useLanguage } from "../../utils/localization/useLanguage";
-export const EmptySearchList = ({ className, children, description, image }) => {
-    const { translate } = useLanguage();
-    return _jsxs("div", { className: classNames(["zen-empty-list-search", className || ""]), children: [image
-                ? _jsx("div", { className: "zen-empty-list-search__image", children: image })
-                : _jsx(ImageNothingFound, { className: "zen-empty-list-search__image" }), _jsx("h2", { className: "zen-empty-list-search__header", children: children }), _jsx("div", { className: "zen-empty-list-search__description", children: description || translate("Try adjusting your search or filter.") })] });
+injectString("cs", "Try adjusting your search or filter.", "Zkuste upravit sv\xE9 vyhled\xE1v\xE1n\xED nebo filtr.");
+injectString("da-DK", "Try adjusting your search or filter.", "Pr\xF8v at justere din s\xF8gning eller dit filter.");
+injectString("de", "Try adjusting your search or filter.", "Versuchen Sie, die Suche oder Filter anzupassen.");
+injectString("en", "Try adjusting your search or filter.", "Try adjusting your search or filter.");
+injectString("es", "Try adjusting your search or filter.", "Pruebe ajustar la b\xFAsqueda o el filtro.");
+injectString("fi-FI", "Try adjusting your search or filter.", "Yrit\xE4 s\xE4\xE4t\xE4\xE4 hakua tai suodatinta.");
+injectString("fr", "Try adjusting your search or filter.", "Essayez d\u2019ajuster votre recherche ou votre filtre.");
+injectString("fr-FR", "Try adjusting your search or filter.", "Essayez d\u2019ajuster votre recherche ou votre filtre.");
+injectString("hu-HU", "Try adjusting your search or filter.", "Pr\xF3b\xE1ld meg m\xF3dos\xEDtani a keres\xE9st vagy a sz\u0171r\u0151t.");
+injectString("id", "Try adjusting your search or filter.", "Coba sesuaikan pencarian atau filter Anda.");
+injectString("it", "Try adjusting your search or filter.", "Provare a modificare la ricerca o a regolare i filtri.");
+injectString("ja", "Try adjusting your search or filter.", "\u691C\u7D22\u307E\u305F\u306F\u30D5\u30A3\u30EB\u30BF\u30FC\u3092\u8ABF\u6574\u3057\u3066\u307F\u3066\u304F\u3060\u3055\u3044\u3002");
+injectString("ko-KR", "Try adjusting your search or filter.", "\uAC80\uC0C9 \uB610\uB294 \uD544\uD130\uB97C \uC870\uC815\uD574 \uBCF4\uC2ED\uC2DC\uC624.");
+injectString("ms", "Try adjusting your search or filter.", "Cuba laraskan carian atau penyaring anda.");
+injectString("nb-NO", "Try adjusting your search or filter.", "Pr\xF8v \xE5 justere s\xF8ket eller filteret.");
+injectString("nl", "Try adjusting your search or filter.", "Probeer uw zoekopdracht of filter aan te passen.");
+injectString("pl", "Try adjusting your search or filter.", "Spr\xF3buj dostosowa\u0107 wyszukiwanie lub filtr.");
+injectString("pt-BR", "Try adjusting your search or filter.", "Tente ajustar sua pesquisa ou filtro.");
+injectString("sk-SK", "Try adjusting your search or filter.", "Sk\xFAs upravi\u0165 svoje vyh\u013Ead\xE1vanie alebo filter.");
+injectString("sv", "Try adjusting your search or filter.", "Prova att justera s\xF6kningen eller filtret.");
+injectString("th", "Try adjusting your search or filter.", "\u0E25\u0E2D\u0E07\u0E1B\u0E23\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E2B\u0E23\u0E37\u0E2D\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13");
+injectString("tr", "Try adjusting your search or filter.", "Araman\u0131z\u0131 veya filtrenizi ayarlamay\u0131 deneyin.");
+injectString("zh-Hans", "Try adjusting your search or filter.", "\u5C1D\u8BD5\u8C03\u6574\u60A8\u7684\u641C\u7D22\u6216\u7B5B\u9009\u6761\u4EF6\u3002");
+injectString("zh-TW", "Try adjusting your search or filter.", "\u8ACB\u5617\u8A66\u8ABF\u6574\u60A8\u7684\u641C\u5C0B\u6216\u7BE9\u9078\u689D\u4EF6\u3002");
+export const EmptySearchList = ({
+  className,
+  children,
+  description,
+  image
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  return _jsxs("div", {
+    className: classNames(["zen-empty-list-search", className || ""]),
+    children: [image ? _jsx("div", {
+      className: "zen-empty-list-search__image",
+      children: image
+    }) : _jsx(ImageNothingFound, {
+      className: "zen-empty-list-search__image"
+    }), _jsx("h2", {
+      className: "zen-empty-list-search__header",
+      children: children
+    }), _jsx("div", {
+      className: "zen-empty-list-search__description",
+      children: description || translate("Try adjusting your search or filter.")
+    })]
+  });
 };
-EmptySearchList.translations = [
-    "Try adjusting your search or filter."
-];
+EmptySearchList.translations = ["Try adjusting your search or filter."];

package/esm/dataGrid/entitiesListActions/actions/columnsListButton.js

@@ -1,13 +1,52 @@
+import { injectString } from "../../../utils/localization/translationsDictionary";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SvgIconSize } from "../../../svgIcon/svgIconSize";
 import { ButtonIconPosition, TextIconButton } from "../../../textIconButton/textIconButton";
 import { ButtonType } from "../../../button/buttonType";
 import { IconSettings3 } from "../../../icons/iconSettings3";
 import { useLanguage } from "../../../utils/localization/useLanguage";
-const ColumnsListButtonInner = ({ onClick, ref }) => {
-    const { translate } = useLanguage();
-    return _jsx(TextIconButton, { ref: ref, icon: IconSettings3, iconSize: SvgIconSize.Large, iconPosition: ButtonIconPosition.Start, "aria-label": translate("Column Settings"), title: translate("Column Settings"), onClick: onClick, type: ButtonType.TertiaryBlack });
+injectString("cs", "Column Settings", "Nastaven\xED sloupc\u016F");
+injectString("da-DK", "Column Settings", "Kolonneindstillinger");
+injectString("de", "Column Settings", "Spalteneinstellungen");
+injectString("en", "Column Settings", "Column Settings");
+injectString("es", "Column Settings", "Configuraci\xF3n de columnas");
+injectString("fi-FI", "Column Settings", "Sarakkeiden asetukset");
+injectString("fr", "Column Settings", "Param\xE8tres des colonnes");
+injectString("fr-FR", "Column Settings", "Param\xE8tres des colonnes");
+injectString("hu-HU", "Column Settings", "Oszlopbe\xE1ll\xEDt\xE1sok");
+injectString("id", "Column Settings", "Pengaturan Kolom");
+injectString("it", "Column Settings", "Impostazioni colonna");
+injectString("ja", "Column Settings", "\u5217\u306E\u8A2D\u5B9A");
+injectString("ko-KR", "Column Settings", "\uC5F4 \uC124\uC815");
+injectString("ms", "Column Settings", "Tetapan Lajur");
+injectString("nb-NO", "Column Settings", "Kolonneinnstillinger");
+injectString("nl", "Column Settings", "Kolominstellingen");
+injectString("pl", "Column Settings", "Ustawienia kolumn");
+injectString("pt-BR", "Column Settings", "Configura\xE7\xF5es da coluna");
+injectString("sk-SK", "Column Settings", "Nastavenia st\u013Apcov");
+injectString("sv", "Column Settings", "Kolumninst\xE4llningar");
+injectString("th", "Column Settings", "\u0E01\u0E32\u0E23\u0E15\u0E31\u0E49\u0E07\u0E04\u0E48\u0E32\u0E04\u0E2D\u0E25\u0E31\u0E21\u0E19\u0E4C");
+injectString("tr", "Column Settings", "S\xFCtun Ayarlar\u0131");
+injectString("zh-Hans", "Column Settings", "\u5217\u8BBE\u7F6E");
+injectString("zh-TW", "Column Settings", "\u6B04\u8A2D\u5B9A");
+const ColumnsListButtonInner = ({
+  onClick,
+  ref
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  return _jsx(TextIconButton, {
+    ref: ref,
+    icon: IconSettings3,
+    iconSize: SvgIconSize.Large,
+    iconPosition: ButtonIconPosition.Start,
+    "aria-label": translate("Column Settings"),
+    title: translate("Column Settings"),
+    onClick: onClick,
+    type: ButtonType.TertiaryBlack
+  });
 };
-export const ColumnsListButton = Object.assign(ColumnsListButtonInner, { translations: [
-        "Column Settings"
-    ] });
+export const ColumnsListButton = Object.assign(ColumnsListButtonInner, {
+  translations: ["Column Settings"]
+});

package/esm/dataGrid/entitiesListActions/actions/fullscreenButton.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../../utils/localization/translationsDictionary";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ButtonIconPosition, TextIconButton } from "../../../textIconButton/textIconButton";
 import { SvgIconSize } from "../../../svgIcon/svgIconSize";
@@ -8,21 +9,61 @@ import { IconMinimize } from "../../../icons/iconMinimize";
 import { useLayoutFullScreenElement } from "../../../layout/layoutFullScreenElementProvider";
 import { useLayoutFullScreen } from "../../../layout/layoutFullScreenProvider";
 import { useCallback } from "react";
-export const FullScreenButton = ({ fullScreen, title, onClick }) => {
-    const { translate } = useLanguage();
-    const { fullScreenElement } = useLayoutFullScreen();
-    const { elementId, setFullScreenElement } = useLayoutFullScreenElement();
-    const getFullScreen = useCallback(() => fullScreen !== undefined ? fullScreen : fullScreenElement === elementId, [fullScreen, fullScreenElement, elementId]);
-    const handleClick = useCallback(() => {
-        const currentFullScreenValue = getFullScreen();
-        if (onClick) {
-            onClick(!currentFullScreenValue);
-            return;
-        }
-        setFullScreenElement(currentFullScreenValue ? undefined : elementId);
-    }, [getFullScreen, onClick, setFullScreenElement, elementId]);
-    return _jsx(TextIconButton, { icon: getFullScreen() ? IconMinimize : IconExpand, iconPosition: ButtonIconPosition.Start, iconSize: SvgIconSize.Large, title: title ? title : translate("Convert table to full screen"), type: ButtonType.TertiaryBlack, onClick: handleClick });
+injectString("cs", "Convert table to full screen", "Konvertovat tabulku do re\u017Eimu pln\xE9ho zobrazen\xED");
+injectString("da-DK", "Convert table to full screen", "Konverter tabel til fuld sk\xE6rm");
+injectString("de", "Convert table to full screen", "Tabelle in Vollbild umwandeln");
+injectString("en", "Convert table to full screen", "Convert table to full screen");
+injectString("es", "Convert table to full screen", "Convertir la tabla en pantalla completa");
+injectString("fi-FI", "Convert table to full screen", "Muunna taulukko t\xE4yteen ruutuun");
+injectString("fr", "Convert table to full screen", "Convertir le tableau en plein \xE9cran");
+injectString("fr-FR", "Convert table to full screen", "Afficher le tableau en plein \xE9cran");
+injectString("hu-HU", "Convert table to full screen", "Kapcsold teljes k\xE9perny\u0151re a t\xE1bl\xE1zatot.");
+injectString("id", "Convert table to full screen", "Konversi tabel ke layar penuh");
+injectString("it", "Convert table to full screen", "Convertire la tabella a schermo intero");
+injectString("ja", "Convert table to full screen", "\u8868\u3092\u5168\u753B\u9762\u8868\u793A\u306B\u5909\u63DB");
+injectString("ko-KR", "Convert table to full screen", "\uD45C\uB97C \uC804\uCCB4 \uD654\uBA74\uC73C\uB85C \uBCC0\uD658");
+injectString("ms", "Convert table to full screen", "Tukarkan jadual kepada skrin penuh");
+injectString("nb-NO", "Convert table to full screen", "Konverter tabellen til full skjerm");
+injectString("nl", "Convert table to full screen", "Tabel converteren naar volledig scherm");
+injectString("pl", "Convert table to full screen", "Konwertuj tabel\u0119 na pe\u0142ny ekran");
+injectString("pt-BR", "Convert table to full screen", "Converter tabela para tela cheia");
+injectString("sk-SK", "Convert table to full screen", "Previes\u0165 tabu\u013Eku na cel\xFA obrazovku");
+injectString("sv", "Convert table to full screen", "Konvertera tabell till helsk\xE4rm");
+injectString("th", "Convert table to full screen", "\u0E41\u0E1B\u0E25\u0E07\u0E15\u0E32\u0E23\u0E32\u0E07\u0E40\u0E1B\u0E47\u0E19\u0E41\u0E1A\u0E1A\u0E40\u0E15\u0E47\u0E21\u0E2B\u0E19\u0E49\u0E32\u0E08\u0E2D");
+injectString("tr", "Convert table to full screen", "Tabloyu tam ekrana d\xF6n\xFC\u015Ft\xFCr");
+injectString("zh-Hans", "Convert table to full screen", "\u5C06\u8868\u683C\u8F6C\u6362\u4E3A\u5168\u5C4F");
+injectString("zh-TW", "Convert table to full screen", "\u5C07\u8868\u683C\u8F49\u63DB\u70BA\u5168\u87A2\u5E55\u986F\u793A");
+export const FullScreenButton = ({
+  fullScreen,
+  title,
+  onClick
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  const {
+    fullScreenElement
+  } = useLayoutFullScreen();
+  const {
+    elementId,
+    setFullScreenElement
+  } = useLayoutFullScreenElement();
+  const getFullScreen = useCallback(() => fullScreen !== undefined ? fullScreen : fullScreenElement === elementId, [fullScreen, fullScreenElement, elementId]);
+  const handleClick = useCallback(() => {
+    const currentFullScreenValue = getFullScreen();
+    if (onClick) {
+      onClick(!currentFullScreenValue);
+      return;
+    }
+    setFullScreenElement(currentFullScreenValue ? undefined : elementId);
+  }, [getFullScreen, onClick, setFullScreenElement, elementId]);
+  return _jsx(TextIconButton, {
+    icon: getFullScreen() ? IconMinimize : IconExpand,
+    iconPosition: ButtonIconPosition.Start,
+    iconSize: SvgIconSize.Large,
+    title: title ? title : translate("Convert table to full screen"),
+    type: ButtonType.TertiaryBlack,
+    onClick: handleClick
+  });
 };
-FullScreenButton.translations = [
-    "Convert table to full screen"
-];
+FullScreenButton.translations = ["Convert table to full screen"];