@geotab/zenith 3.1.1-beta.6 → 3.2.0-beta.1

package/dist/dataGrid/dataGrid.js

@@ -1,7 +1,37 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.DataGrid = exports.Footer = exports.EmptyList = exports.MIN_CELL_WIDTH = exports.VERTICAL_SCROLL_MODIFIER = exports.HORIZONTAL_SCROLL_MODIFIER = exports.DRAGGING_MODIFIER = exports.NOT_INTERACTIVE_MODIFIER = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+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");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const row_1 = require("./row/row");
@@ -18,128 +48,208 @@ exports.HORIZONTAL_SCROLL_MODIFIER = "zen-data-grid--horizontal-scroll";
 exports.VERTICAL_SCROLL_MODIFIER = "zen-data-grid--vertical-scroll";
 exports.MIN_CELL_WIDTH = 100;
 const renderHeaderWrappers = (wrappers, value) => wrappers.reduce((result, wrapper) => wrapper.renderHeader(result), value);
-const getColumnWidth = (defaultWidth) => Math.floor(Math.max(defaultWidth, exports.MIN_CELL_WIDTH));
-const EmptyList = ({ children }) => (0, jsx_runtime_1.jsx)("div", { className: "zen-data-grid__empty", children: children });
+const getColumnWidth = defaultWidth => Math.floor(Math.max(defaultWidth, exports.MIN_CELL_WIDTH));
+const EmptyList = ({
+  children
+}) => (0, jsx_runtime_1.jsx)("div", {
+  className: "zen-data-grid__empty",
+  children: children
+});
 exports.EmptyList = EmptyList;
-const Footer = ({ children }) => (0, jsx_runtime_1.jsx)("div", { className: "zen-data-grid__footer", children: children });
+const Footer = ({
+  children
+}) => (0, jsx_runtime_1.jsx)("div", {
+  className: "zen-data-grid__footer",
+  children: children
+});
 exports.Footer = Footer;
 const FIRST_RENDERED_ROWS = 100;
-const DataGridInner = ({ entities, columns, className = "", description, emptyCellTitle, children, rowClassName, expandedRows, onExpandedChange }, ref) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const emptyCellTitleValue = emptyCellTitle || translate("Action");
-    // States
-    const columnsList = (0, react_1.useMemo)(() => columns.map(toBasicColumn_1.toBasicColumn), [columns]);
-    const initialVisibleRows = (0, react_1.useMemo)(() => entities.slice(0, FIRST_RENDERED_ROWS).map(r => r.id), [entities]);
-    const [visibleRows, setVisibleRows] = (0, react_1.useState)(new Set(initialVisibleRows));
-    const [horizontalScrollApplied, setHorizontalScrollApplied] = (0, react_1.useState)(false);
-    const [verticalScrollApplied, setVerticalScrollApplied] = (0, react_1.useState)(false);
-    // Refs
-    const gridRef = (0, react_1.useRef)(null);
-    const bodyRef = (0, react_1.useRef)(null);
-    const lazyRenderTimerRef = (0, react_1.useRef)(0);
-    const rowsMap = (0, react_1.useMemo)(() => new Map(entities.map(entity => [entity.id, entity])), [entities]);
-    const emptyList = (0, react_1.useMemo)(() => react_1.Children.toArray(children).find(child => child.type === exports.EmptyList), [children]);
-    const footer = (0, react_1.useMemo)(() => react_1.Children.toArray(children).find(child => child.type === exports.Footer), [children]);
-    (0, react_1.useImperativeHandle)(ref, () => gridRef.current, []);
-    const getVisibleRows = () => {
-        if (!gridRef.current || !bodyRef.current) {
-            return [];
-        }
-        const { top, bottom } = gridRef.current.getBoundingClientRect();
-        return (0, findVisible_1.findVisibleRows)([...bodyRef.current.children], top, bottom);
+const DataGridInner = ({
+  entities,
+  columns,
+  className = "",
+  description,
+  emptyCellTitle,
+  children,
+  rowClassName,
+  expandedRows,
+  onExpandedChange
+}, ref) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const emptyCellTitleValue = emptyCellTitle || translate("Action");
+  // States
+  const columnsList = (0, react_1.useMemo)(() => columns.map(toBasicColumn_1.toBasicColumn), [columns]);
+  const initialVisibleRows = (0, react_1.useMemo)(() => entities.slice(0, FIRST_RENDERED_ROWS).map(r => r.id), [entities]);
+  const [visibleRows, setVisibleRows] = (0, react_1.useState)(new Set(initialVisibleRows));
+  const [horizontalScrollApplied, setHorizontalScrollApplied] = (0, react_1.useState)(false);
+  const [verticalScrollApplied, setVerticalScrollApplied] = (0, react_1.useState)(false);
+  // Refs
+  const gridRef = (0, react_1.useRef)(null);
+  const bodyRef = (0, react_1.useRef)(null);
+  const lazyRenderTimerRef = (0, react_1.useRef)(0);
+  const rowsMap = (0, react_1.useMemo)(() => new Map(entities.map(entity => [entity.id, entity])), [entities]);
+  const emptyList = (0, react_1.useMemo)(() => react_1.Children.toArray(children).find(child => child.type === exports.EmptyList), [children]);
+  const footer = (0, react_1.useMemo)(() => react_1.Children.toArray(children).find(child => child.type === exports.Footer), [children]);
+  (0, react_1.useImperativeHandle)(ref, () => gridRef.current, []);
+  const getVisibleRows = () => {
+    if (!gridRef.current || !bodyRef.current) {
+      return [];
+    }
+    const {
+      top,
+      bottom
+    } = gridRef.current.getBoundingClientRect();
+    return (0, findVisible_1.findVisibleRows)([...bodyRef.current.children], top, bottom);
+  };
+  const scheduleVisibleChanges = (0, react_1.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 = (0, react_1.useCallback)(() => {
+    cancelAnimationFrame(lazyRenderTimerRef.current);
+    lazyRenderTimerRef.current = scheduleVisibleChanges();
+  }, [scheduleVisibleChanges]);
+  (0, react_1.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 = (0, react_1.useMemo)(() => columnsList.map(column => column.meta.defaultWidth), [columnsList]);
+  const {
+    result: observerResult
+  } = (0, useResizeObserver_1.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 = (0, react_1.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 = (0, react_1.useCallback)(() => {
+    updateScroll();
+    scheduleLazyRender();
+  }, [updateScroll, scheduleLazyRender]);
+  const getCellParams = (0, react_1.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 = (0, react_1.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 = (0, react_1.useCallback)(() => {
-        cancelAnimationFrame(lazyRenderTimerRef.current);
-        lazyRenderTimerRef.current = scheduleVisibleChanges();
-    }, [scheduleVisibleChanges]);
-    (0, react_1.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 = (0, react_1.useMemo)(() => columnsList.map(column => column.meta.defaultWidth), [columnsList]);
-    const { result: observerResult } = (0, useResizeObserver_1.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 = (0, react_1.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 = (0, react_1.useCallback)(() => {
-        updateScroll();
-        scheduleLazyRender();
-    }, [updateScroll, scheduleLazyRender]);
-    const getCellParams = (0, react_1.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 = (0, react_1.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 (0, jsx_runtime_1.jsx)(headerCell_1.DataGridHeaderCell, { id: column.id, isFirst: isFirst, isLast: isLast, name: column.name, width: width, hidden: !text, children: (0, jsx_runtime_1.jsx)("div", { className: "zen-data-grid__header-cell-content", children: renderHeaderWrappers(column.wrappers, (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-data-grid-header", column.title ? "" : "zen-visually-hidden"]), children: column.title ? text : emptyCellTitleValue })) }) }, `header_${column.name}`);
-    }, [getCellParams, emptyCellTitleValue]);
-    const isTreeGrid = (0, react_1.useMemo)(() => !!entities.find(e => e.children && e.children.length > 0), [entities]);
-    const renderRow = (0, react_1.useCallback)((entity, entityIndex, total) => (0, jsx_runtime_1.jsx)(row_1.DataGridRow, { id: entity.id, isLastRow: entityIndex === total - 1, columns: columnsList, entity: entity, visibleRows: visibleRows, flexibleColumnWidth: flexibleColumnWidth, className: (0, getRowClassName_1.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 = (0, react_1.useMemo)(() => entities.map((entity, entityIndex) => renderRow(entity, entityIndex, entities.length)), [entities, renderRow]);
-    const headerContent = (0, react_1.useMemo)(() => columnsList.map((column, index) => renderHeaderCell(column, index)), [columnsList, renderHeaderCell]);
-    (0, useResize_1.useResize)(() => {
-        handleScroll();
-    }, true);
-    const gridClasses = (0, classNames_1.classNames)([
-        "zen-data-grid",
-        className,
-        horizontalScrollApplied ? exports.HORIZONTAL_SCROLL_MODIFIER : "",
-        verticalScrollApplied ? exports.VERTICAL_SCROLL_MODIFIER : ""
-    ]);
-    return (0, jsx_runtime_1.jsx)("div", { className: "zen-data-grid-wrapper", children: (0, jsx_runtime_1.jsxs)("div", { className: gridClasses, ref: gridRef, onScroll: handleScroll, children: [(0, jsx_runtime_1.jsxs)("table", { className: "zen-data-grid__table", "aria-label": description, role: isTreeGrid ? "treegrid" : undefined, children: [(0, jsx_runtime_1.jsx)("thead", { className: "zen-data-grid__header", children: (0, jsx_runtime_1.jsx)("tr", { className: "zen-data-grid__header-row", children: headerContent }) }), (0, jsx_runtime_1.jsx)("tbody", { ref: bodyRef, children: body })] }), emptyList && entities.length === 0 ? emptyList : null, footer] }) });
+  }, [listOfDefaultWidthColumns, flexibleColumnWidth]);
+  const renderHeaderCell = (0, react_1.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 (0, jsx_runtime_1.jsx)(headerCell_1.DataGridHeaderCell, {
+      id: column.id,
+      isFirst: isFirst,
+      isLast: isLast,
+      name: column.name,
+      width: width,
+      hidden: !text,
+      children: (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-data-grid__header-cell-content",
+        children: renderHeaderWrappers(column.wrappers, (0, jsx_runtime_1.jsx)("div", {
+          className: (0, classNames_1.classNames)(["zen-data-grid-header", column.title ? "" : "zen-visually-hidden"]),
+          children: column.title ? text : emptyCellTitleValue
+        }))
+      })
+    }, `header_${column.name}`);
+  }, [getCellParams, emptyCellTitleValue]);
+  const isTreeGrid = (0, react_1.useMemo)(() => !!entities.find(e => e.children && e.children.length > 0), [entities]);
+  const renderRow = (0, react_1.useCallback)((entity, entityIndex, total) => (0, jsx_runtime_1.jsx)(row_1.DataGridRow, {
+    id: entity.id,
+    isLastRow: entityIndex === total - 1,
+    columns: columnsList,
+    entity: entity,
+    visibleRows: visibleRows,
+    flexibleColumnWidth: flexibleColumnWidth,
+    className: (0, getRowClassName_1.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 = (0, react_1.useMemo)(() => entities.map((entity, entityIndex) => renderRow(entity, entityIndex, entities.length)), [entities, renderRow]);
+  const headerContent = (0, react_1.useMemo)(() => columnsList.map((column, index) => renderHeaderCell(column, index)), [columnsList, renderHeaderCell]);
+  (0, useResize_1.useResize)(() => {
+    handleScroll();
+  }, true);
+  const gridClasses = (0, classNames_1.classNames)(["zen-data-grid", className, horizontalScrollApplied ? exports.HORIZONTAL_SCROLL_MODIFIER : "", verticalScrollApplied ? exports.VERTICAL_SCROLL_MODIFIER : ""]);
+  return (0, jsx_runtime_1.jsx)("div", {
+    className: "zen-data-grid-wrapper",
+    children: (0, jsx_runtime_1.jsxs)("div", {
+      className: gridClasses,
+      ref: gridRef,
+      onScroll: handleScroll,
+      children: [(0, jsx_runtime_1.jsxs)("table", {
+        className: "zen-data-grid__table",
+        "aria-label": description,
+        role: isTreeGrid ? "treegrid" : undefined,
+        children: [(0, jsx_runtime_1.jsx)("thead", {
+          className: "zen-data-grid__header",
+          children: (0, jsx_runtime_1.jsx)("tr", {
+            className: "zen-data-grid__header-row",
+            children: headerContent
+          })
+        }), (0, jsx_runtime_1.jsx)("tbody", {
+          ref: bodyRef,
+          children: body
+        })]
+      }), emptyList && entities.length === 0 ? emptyList : null, footer]
+    })
+  });
 };
 const DataGrid = (0, react_1.forwardRef)(DataGridInner);
 exports.DataGrid = DataGrid;
 DataGrid.EmptyList = exports.EmptyList;
 DataGrid.Footer = exports.Footer;
-exports.TRANSLATIONS = [
-    "Action"
-];
+exports.TRANSLATIONS = ["Action"];

package/dist/dataGrid/emptySearchList/emptySearchList.js

@@ -1,17 +1,64 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.EmptySearchList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const imageNothingFound_1 = require("../../images/imageNothingFound");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
-const EmptySearchList = ({ className, children, description, image }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-empty-list-search", className || ""]), children: [image
-                ? (0, jsx_runtime_1.jsx)("div", { className: "zen-empty-list-search__image", children: image })
-                : (0, jsx_runtime_1.jsx)(imageNothingFound_1.ImageNothingFound, { className: "zen-empty-list-search__image" }), (0, jsx_runtime_1.jsx)("h2", { className: "zen-empty-list-search__header", children: children }), (0, jsx_runtime_1.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");
+const EmptySearchList = ({
+  className,
+  children,
+  description,
+  image
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: (0, classNames_1.classNames)(["zen-empty-list-search", className || ""]),
+    children: [image ? (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-empty-list-search__image",
+      children: image
+    }) : (0, jsx_runtime_1.jsx)(imageNothingFound_1.ImageNothingFound, {
+      className: "zen-empty-list-search__image"
+    }), (0, jsx_runtime_1.jsx)("h2", {
+      className: "zen-empty-list-search__header",
+      children: children
+    }), (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-empty-list-search__description",
+      children: description || translate("Try adjusting your search or filter.")
+    })]
+  });
 };
 exports.EmptySearchList = EmptySearchList;
-exports.EmptySearchList.translations = [
-    "Try adjusting your search or filter."
-];
+exports.EmptySearchList.translations = ["Try adjusting your search or filter."];

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

@@ -1,5 +1,11 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.ColumnsListButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const svgIconSize_1 = require("../../../svgIcon/svgIconSize");
@@ -7,10 +13,48 @@ const textIconButton_1 = require("../../../textIconButton/textIconButton");
 const buttonType_1 = require("../../../button/buttonType");
 const iconSettings3_1 = require("../../../icons/iconSettings3");
 const useLanguage_1 = require("../../../utils/localization/useLanguage");
-const ColumnsListButtonInner = ({ onClick, ref }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { ref: ref, icon: iconSettings3_1.IconSettings3, iconSize: svgIconSize_1.SvgIconSize.Large, iconPosition: textIconButton_1.ButtonIconPosition.Start, "aria-label": translate("Column Settings"), title: translate("Column Settings"), onClick: onClick, type: buttonType_1.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
+  } = (0, useLanguage_1.useLanguage)();
+  return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+    ref: ref,
+    icon: iconSettings3_1.IconSettings3,
+    iconSize: svgIconSize_1.SvgIconSize.Large,
+    iconPosition: textIconButton_1.ButtonIconPosition.Start,
+    "aria-label": translate("Column Settings"),
+    title: translate("Column Settings"),
+    onClick: onClick,
+    type: buttonType_1.ButtonType.TertiaryBlack
+  });
 };
-exports.ColumnsListButton = Object.assign(ColumnsListButtonInner, { translations: [
-        "Column Settings"
-    ] });
+exports.ColumnsListButton = Object.assign(ColumnsListButtonInner, {
+  translations: ["Column Settings"]
+});

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

@@ -1,5 +1,11 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.FullScreenButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const textIconButton_1 = require("../../../textIconButton/textIconButton");
@@ -11,22 +17,62 @@ const iconMinimize_1 = require("../../../icons/iconMinimize");
 const layoutFullScreenElementProvider_1 = require("../../../layout/layoutFullScreenElementProvider");
 const layoutFullScreenProvider_1 = require("../../../layout/layoutFullScreenProvider");
 const react_1 = require("react");
-const FullScreenButton = ({ fullScreen, title, onClick }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const { fullScreenElement } = (0, layoutFullScreenProvider_1.useLayoutFullScreen)();
-    const { elementId, setFullScreenElement } = (0, layoutFullScreenElementProvider_1.useLayoutFullScreenElement)();
-    const getFullScreen = (0, react_1.useCallback)(() => fullScreen !== undefined ? fullScreen : fullScreenElement === elementId, [fullScreen, fullScreenElement, elementId]);
-    const handleClick = (0, react_1.useCallback)(() => {
-        const currentFullScreenValue = getFullScreen();
-        if (onClick) {
-            onClick(!currentFullScreenValue);
-            return;
-        }
-        setFullScreenElement(currentFullScreenValue ? undefined : elementId);
-    }, [getFullScreen, onClick, setFullScreenElement, elementId]);
-    return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { icon: getFullScreen() ? iconMinimize_1.IconMinimize : iconExpand_1.IconExpand, iconPosition: textIconButton_1.ButtonIconPosition.Start, iconSize: svgIconSize_1.SvgIconSize.Large, title: title ? title : translate("Convert table to full screen"), type: buttonType_1.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");
+const FullScreenButton = ({
+  fullScreen,
+  title,
+  onClick
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const {
+    fullScreenElement
+  } = (0, layoutFullScreenProvider_1.useLayoutFullScreen)();
+  const {
+    elementId,
+    setFullScreenElement
+  } = (0, layoutFullScreenElementProvider_1.useLayoutFullScreenElement)();
+  const getFullScreen = (0, react_1.useCallback)(() => fullScreen !== undefined ? fullScreen : fullScreenElement === elementId, [fullScreen, fullScreenElement, elementId]);
+  const handleClick = (0, react_1.useCallback)(() => {
+    const currentFullScreenValue = getFullScreen();
+    if (onClick) {
+      onClick(!currentFullScreenValue);
+      return;
+    }
+    setFullScreenElement(currentFullScreenValue ? undefined : elementId);
+  }, [getFullScreen, onClick, setFullScreenElement, elementId]);
+  return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+    icon: getFullScreen() ? iconMinimize_1.IconMinimize : iconExpand_1.IconExpand,
+    iconPosition: textIconButton_1.ButtonIconPosition.Start,
+    iconSize: svgIconSize_1.SvgIconSize.Large,
+    title: title ? title : translate("Convert table to full screen"),
+    type: buttonType_1.ButtonType.TertiaryBlack,
+    onClick: handleClick
+  });
 };
 exports.FullScreenButton = FullScreenButton;
-exports.FullScreenButton.translations = [
-    "Convert table to full screen"
-];
+exports.FullScreenButton.translations = ["Convert table to full screen"];