@geotab/zenith 3.2.0 → 3.3.0-beta.0

package/dist/table/detailPanel/detailPanel.js

@@ -0,0 +1,140 @@
+"use strict";
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DetailPanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
+const detailPanelHeader_1 = require("./detailPanelHeader");
+const useFadeComponent_1 = require("../../utils/useFadeComponent");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+injectString("cs", "Details", "Podrobnosti");
+injectString("da-DK", "Details", "Detaljer");
+injectString("de", "Details", "Details");
+injectString("en", "Details", "Details");
+injectString("es", "Details", "Detalles");
+injectString("fi-FI", "Details", "Tiedot");
+injectString("fr", "Details", "D\xE9tails");
+injectString("fr-FR", "Details", "D\xE9tails");
+injectString("hu-HU", "Details", "R\xE9szletek");
+injectString("id", "Details", "Detail");
+injectString("it", "Details", "Dettagli");
+injectString("ja", "Details", "\u8A73\u7D30");
+injectString("ko-KR", "Details", "\uC138\uBD80");
+injectString("ms", "Details", "Butiran");
+injectString("nb-NO", "Details", "Detaljer");
+injectString("nl", "Details", "Details");
+injectString("pl", "Details", "Szczeg\xF3\u0142y");
+injectString("pt-BR", "Details", "Detalhes");
+injectString("sk-SK", "Details", "Detaily");
+injectString("sv", "Details", "Detaljer");
+injectString("th", "Details", "\u0E23\u0E32\u0E22\u0E25\u0E30\u0E40\u0E2D\u0E35\u0E22\u0E14");
+injectString("tr", "Details", "Ayr\u0131nt\u0131lar");
+injectString("zh-Hans", "Details", "\u8BE6\u7EC6\u4FE1\u606F");
+injectString("zh-TW", "Details", "\u8A73\u7D30\u8CC7\u8A0A");
+const mobileSheet_1 = require("../../mobileSheet/mobileSheet");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+const DetailPanel = ({
+  id,
+  children,
+  title,
+  details,
+  description,
+  footer,
+  onClose
+}) => {
+  const isMobile = (0, useMobile_1.useMobile)();
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const {
+    renderComponent,
+    showContent,
+    handleTransitionEnd,
+    setIsOpen
+  } = (0, useFadeComponent_1.useFadeComponent)(false);
+  const persistedIdRef = (0, react_1.useRef)(id);
+  const persistedChildrenRef = (0, react_1.useRef)(children);
+  (0, react_1.useEffect)(() => {
+    if (id) {
+      persistedIdRef.current = id;
+      persistedChildrenRef.current = children;
+    }
+  }, [id, children]);
+  (0, react_1.useEffect)(() => {
+    setIsOpen(!!id);
+  }, [id, setIsOpen]);
+  (0, react_1.useEffect)(() => {
+    if (!renderComponent) {
+      persistedIdRef.current = undefined;
+      persistedChildrenRef.current = undefined;
+    }
+  }, [renderComponent]);
+  if (!renderComponent) {
+    return null;
+  }
+  const currentId = id || persistedIdRef.current;
+  const currentChildren = id ? children : persistedChildrenRef.current;
+  if (!currentId) {
+    return null;
+  }
+  const footerContent = typeof footer === "function" ? footer(currentId) || null : footer || null;
+  const detailPanelContent = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+    children: [(0, jsx_runtime_1.jsx)("div", {
+      className: "zen-table__detail-panel-content",
+      children: react_1.Children.map(currentChildren, child => {
+        if ((0, react_1.isValidElement)(child)) {
+          return (0, react_1.cloneElement)(child, {
+            id: currentId
+          });
+        }
+        return child;
+      })
+    }), footerContent && (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-table__detail-panel-footer",
+      children: footerContent
+    })]
+  });
+  if (isMobile) {
+    return (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, {
+      wrapperClassName: "zen-table__detail-panel-mobile",
+      label: translate("Details"),
+      isOpen: showContent,
+      onHidePanel: onClose || (() => {}),
+      onCloseClick: onClose,
+      children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, {
+        children: (0, jsx_runtime_1.jsx)(detailPanelHeader_1.DetailPanelHeader, {
+          id: currentId,
+          title: title,
+          details: details,
+          description: description
+        })
+      }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, {
+        className: "zen-table__detail-panel-content-mobile",
+        children: detailPanelContent
+      })]
+    });
+  }
+  const handleTransitionEndOnce = e => {
+    if (e.propertyName === "opacity") {
+      handleTransitionEnd();
+    }
+  };
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: (0, classNames_1.classNames)(["zen-table__detail-panel", "zen-card-container", "zen-card-container--no-width-constraint", showContent ? "zen-table__detail-panel--shown" : ""]),
+    onTransitionEnd: handleTransitionEndOnce,
+    children: [(0, jsx_runtime_1.jsx)(detailPanelHeader_1.DetailPanelHeader, {
+      id: currentId,
+      title: title,
+      details: details,
+      description: description,
+      onClose: onClose
+    }), detailPanelContent]
+  });
+};
+exports.DetailPanel = DetailPanel;

package/dist/table/detailPanel/detailPanelHeader.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IDetailPanelHeader } from "./interfaces";
+import "./detailPanelHeader.less";
+export declare const DetailPanelHeader: React.FC<IDetailPanelHeader>;

package/dist/table/detailPanel/detailPanelHeader.js

@@ -0,0 +1,105 @@
+"use strict";
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DetailPanelHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const iconClose_1 = require("../../icons/iconClose");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+const buttonType_1 = require("../../button/buttonType");
+const textIconButton_1 = require("../../textIconButton/textIconButton");
+injectString("cs", "Details", "Podrobnosti");
+injectString("da-DK", "Details", "Detaljer");
+injectString("de", "Details", "Details");
+injectString("en", "Details", "Details");
+injectString("es", "Details", "Detalles");
+injectString("fi-FI", "Details", "Tiedot");
+injectString("fr", "Details", "D\xE9tails");
+injectString("fr-FR", "Details", "D\xE9tails");
+injectString("hu-HU", "Details", "R\xE9szletek");
+injectString("id", "Details", "Detail");
+injectString("it", "Details", "Dettagli");
+injectString("ja", "Details", "\u8A73\u7D30");
+injectString("ko-KR", "Details", "\uC138\uBD80");
+injectString("ms", "Details", "Butiran");
+injectString("nb-NO", "Details", "Detaljer");
+injectString("nl", "Details", "Details");
+injectString("pl", "Details", "Szczeg\xF3\u0142y");
+injectString("pt-BR", "Details", "Detalhes");
+injectString("sk-SK", "Details", "Detaily");
+injectString("sv", "Details", "Detaljer");
+injectString("th", "Details", "\u0E23\u0E32\u0E22\u0E25\u0E30\u0E40\u0E2D\u0E35\u0E22\u0E14");
+injectString("tr", "Details", "Ayr\u0131nt\u0131lar");
+injectString("zh-Hans", "Details", "\u8BE6\u7EC6\u4FE1\u606F");
+injectString("zh-TW", "Details", "\u8A73\u7D30\u8CC7\u8A0A");
+injectString("cs", "Close", "Zav\u0159\xEDt");
+injectString("da-DK", "Close", "Luk");
+injectString("de", "Close", "Schlie\xDFen");
+injectString("en", "Close", "Close");
+injectString("es", "Close", "Cerrar");
+injectString("fi-FI", "Close", "Sulje");
+injectString("fr", "Close", "Fermer");
+injectString("fr-FR", "Close", "Fermer");
+injectString("hu-HU", "Close", "Z\xE1rd be.");
+injectString("id", "Close", "Tutup");
+injectString("it", "Close", "Chiudere");
+injectString("ja", "Close", "\u9589\u3058\u308B");
+injectString("ko-KR", "Close", "\uB2EB\uAE30");
+injectString("ms", "Close", "Tutup");
+injectString("nb-NO", "Close", "Lukk");
+injectString("nl", "Close", "Sluiten");
+injectString("pl", "Close", "Zamknij");
+injectString("pt-BR", "Close", "Fechar");
+injectString("sk-SK", "Close", "Zatvor");
+injectString("sv", "Close", "St\xE4ng");
+injectString("th", "Close", "\u0E1B\u0E34\u0E14");
+injectString("tr", "Close", "Kapat");
+injectString("zh-Hans", "Close", "\u5173\u95ED");
+injectString("zh-TW", "Close", "\u95DC\u9589");
+const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
+const DetailPanelHeader = ({
+  id,
+  title,
+  details,
+  description,
+  onClose
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const isMobile = (0, useMobile_1.useMobile)();
+  if (!id) {
+    return null;
+  }
+  const titleText = title ? (typeof title === "function" ? title(id) : title) || translate("Details") : translate("Details");
+  const descriptionText = typeof description === "function" ? description(id) || null : description || null;
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: "zen-table__detail-panel--header",
+    children: [(0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-table__detail-panel--header-content",
+      children: [(0, jsx_runtime_1.jsx)("div", {
+        className: "zen-table__detail-panel--header-title",
+        children: titleText
+      }), details && (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-table__detail-panel--header-details",
+        children: typeof details === "function" ? details(id) : details || null
+      }), !isMobile && (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-table__detail-panel--header-actions",
+        children: (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+          icon: iconClose_1.IconClose,
+          title: translate("Close"),
+          onClick: onClose,
+          type: buttonType_1.ButtonType.TertiaryBlack
+        })
+      })]
+    }), descriptionText && (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-table__detail-panel--header-description",
+      children: descriptionText
+    })]
+  });
+};
+exports.DetailPanelHeader = DetailPanelHeader;

package/dist/table/detailPanel/interfaces.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface IDetailPanelHeader {
+    id?: string | undefined;
+    title?: string | ((id: string) => string | React.JSX.Element | null);
+    details?: string | ((id: string) => string | React.JSX.Element | null);
+    description?: string | ((id: string) => string | React.JSX.Element | null);
+    onClose?: () => void;
+}

package/dist/table/detailPanel/interfaces.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/table/table.d.ts

@@ -23,6 +23,8 @@ import { IBulkActionLink } from "../dataGrid/withSelectableRows/components/bulkA
 import { TRowClassName } from "../dataGrid/getRowClassName";
 import { IRowEntity } from "../dataGrid/row/row";
 import { IEntityWithId } from "../commonHelpers/entity";
+import "../cardContainer/cardContainer.less";
+import { ITableDetailPanel } from "./children/tableDetailPanel";
 export interface IListColumn<T extends IRowEntity<N>, N extends IEntityWithId = T> {
     readonly id: string;
     readonly title: string;
@@ -65,6 +67,8 @@ export interface ITable<T extends IRowEntity<N>, N extends IEntityWithId = T> ex
     feedExpandable?: IFeedExpandable;
     expandedRows?: string[];
     onExpand?: (id: string, isExpanded: boolean) => void;
+    active?: string | undefined;
+    onClick?: (id: string | undefined) => void;
 }
 interface ITableComponents {
     Empty: React.FC<ITableEmpty>;
@@ -74,6 +78,7 @@ interface ITableComponents {
     BulkActions: React.FC<ITableBulkActions>;
     BulkButton: React.FC<IBulkActionButton>;
     BulkLink: React.FC<IBulkActionLink>;
+    DetailPanel: React.FC<ITableDetailPanel>;
 }
-declare const Table: (<T extends IRowEntity<N>, N extends IEntityWithId = T>({ entities, columns, selectable, sortable, flexible, isLoading, loading, children, className, height, onFeedEnd, rowClassName, feedExpandable, expandedRows, onExpand }: ITable<T, N>) => import("react/jsx-runtime").JSX.Element) & ITableComponents;
+declare const Table: (<T extends IRowEntity<N>, N extends IEntityWithId = T>({ entities, columns, selectable, sortable, flexible, isLoading, loading, children, className, height, onFeedEnd, rowClassName, feedExpandable, expandedRows, onExpand, active, onClick }: ITable<T, N>) => import("react/jsx-runtime").JSX.Element) & ITableComponents;
 export { type IListColumnWrapper, Table, getEmptySelection, ColumnSortDirection, getSortableValue, ActionsColumn, MainColumn, CheckboxColumn, ActionLinkColumn };

package/dist/table/table.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.ActionLinkColumn = exports.CheckboxColumn = exports.MainColumn = exports.ActionsColumn = exports.getSortableValue = exports.ColumnSortDirection = exports.getEmptySelection = exports.Table = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -21,20 +27,57 @@ const tableBulkActions_1 = require("./children/tableBulkActions");
 const tablePagination_1 = require("./children/tablePagination");
 const tableEmpty_1 = require("./children/tableEmpty");
 const tableFooter_1 = require("./children/tableFooter");
+injectString("en", "Selection panel", "Selection panel");
+injectString("en", "Bulk select", "Bulk select");
 const useSelectableRows_2 = require("./selectable/useSelectableRows");
-Object.defineProperty(exports, "getEmptySelection", { enumerable: true, get: function () { return useSelectableRows_2.getEmptySelection; } });
+Object.defineProperty(exports, "getEmptySelection", {
+  enumerable: true,
+  get: function () {
+    return useSelectableRows_2.getEmptySelection;
+  }
+});
 const interfaces_1 = require("./sortable/interfaces");
-Object.defineProperty(exports, "ColumnSortDirection", { enumerable: true, get: function () { return interfaces_1.ColumnSortDirection; } });
+Object.defineProperty(exports, "ColumnSortDirection", {
+  enumerable: true,
+  get: function () {
+    return interfaces_1.ColumnSortDirection;
+  }
+});
 const useSortableColumns_2 = require("./sortable/useSortableColumns");
-Object.defineProperty(exports, "getSortableValue", { enumerable: true, get: function () { return useSortableColumns_2.getSortableValue; } });
+Object.defineProperty(exports, "getSortableValue", {
+  enumerable: true,
+  get: function () {
+    return useSortableColumns_2.getSortableValue;
+  }
+});
 const actionsColumn_1 = require("../dataGrid/columns/actionsColumn/actionsColumn");
-Object.defineProperty(exports, "ActionsColumn", { enumerable: true, get: function () { return actionsColumn_1.ActionsColumn; } });
+Object.defineProperty(exports, "ActionsColumn", {
+  enumerable: true,
+  get: function () {
+    return actionsColumn_1.ActionsColumn;
+  }
+});
 const mainColumn_1 = require("../dataGrid/columns/mainColumn/mainColumn");
-Object.defineProperty(exports, "MainColumn", { enumerable: true, get: function () { return mainColumn_1.MainColumn; } });
+Object.defineProperty(exports, "MainColumn", {
+  enumerable: true,
+  get: function () {
+    return mainColumn_1.MainColumn;
+  }
+});
 const checkboxColumn_1 = require("../dataGrid/columns/checkboxColumn/checkboxColumn");
-Object.defineProperty(exports, "CheckboxColumn", { enumerable: true, get: function () { return checkboxColumn_1.CheckboxColumn; } });
+Object.defineProperty(exports, "CheckboxColumn", {
+  enumerable: true,
+  get: function () {
+    return checkboxColumn_1.CheckboxColumn;
+  }
+});
 const actionLinkColumn_1 = require("../dataGrid/columns/actionLinkColumn/actionLinkColumn");
-Object.defineProperty(exports, "ActionLinkColumn", { enumerable: true, get: function () { return actionLinkColumn_1.ActionLinkColumn; } });
+Object.defineProperty(exports, "ActionLinkColumn", {
+  enumerable: true,
+  get: function () {
+    return actionLinkColumn_1.ActionLinkColumn;
+  }
+});
 const bulkActionButton_1 = require("../dataGrid/withSelectableRows/components/bulkActions/bulkActionButton/bulkActionButton");
 const bulkActionLink_1 = require("../dataGrid/withSelectableRows/components/bulkActions/bulkActionLink/bulkActionLink");
 const layoutSizeProvider_1 = require("../layout/layoutSizeProvider");
@@ -44,66 +87,202 @@ const useFeedExpandable_1 = require("./expandable/useFeedExpandable");
 const feedExpandControl_1 = require("../dataFeed/feedExpandControl/feedExpandControl");
 const getGridClasses_1 = require("../gridLayout/utils/getGridClasses");
 const useNestedRows_1 = require("./nested/useNestedRows");
-const TableInner = ({ entities, columns, selectable, sortable, flexible, isLoading, loading, children, className, height, onFeedEnd, rowClassName, feedExpandable, expandedRows, onExpand }) => {
-    var _a, _b, _c;
-    const isMobile = (0, useMobile_1.useMobile)();
-    const gridRef = (0, react_1.useRef)(null);
-    const columnsPopupRef = (0, react_1.useRef)(null);
-    const [selectMode, setSelectMode] = (0, react_1.useState)((((_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.selected) || []).length > 0 || ((_b = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _b === void 0 ? void 0 : _b.all) || false);
-    const { contentHeight } = (0, layoutSizeProvider_1.useLayoutSize)();
-    const setMobileSelectMode = (0, react_1.useCallback)((value) => {
-        if (isMobile) {
-            return;
-        }
-        setSelectMode(value);
-    }, [isMobile, setSelectMode]);
-    const { expanded, onExpandedChange, nestedColumns, nestedFeedWrapper } = (0, useNestedRows_1.useNestedRows)(expandedRows, onExpand, columns, isMobile);
-    const { selectableColumns, selectableFeedWrapper } = (0, useSelectableRows_1.useSelectableRows)(nestedColumns, entities, isMobile, selectMode, setMobileSelectMode, isLoading ? undefined : selectable);
-    const { sortableColumns, feedSortControl } = (0, useSortableColumns_1.useSortableColumns)(selectableColumns, sortable, isMobile);
-    const { flexibleColumns, columnsPopup } = (0, useFlexibleColumns_1.useFlexibleColumns)(sortableColumns, flexible, gridRef, columnsPopupRef, isMobile);
-    const { columnsWithActions, actions, actionsAsync, primaryActions } = (0, useActions_1.useActions)(flexibleColumns, isMobile);
-    const { loadingColumns, loadingEntities } = (0, useLoading_1.useLoading)(columnsWithActions, entities, isLoading, loading);
-    const { isFeedExpanded, handleExpanded, isFeedVisible, visibleColumns } = (0, useFeedExpandable_1.useFeedExpandable)(isMobile, feedExpandable);
-    const selectionQty = (0, react_1.useMemo)(() => {
-        var _a, _b;
-        if (!selectable) {
-            return 0;
-        }
-        return ((_a = selectable.selection) === null || _a === void 0 ? void 0 : _a.all) ? loadingEntities.length : ((_b = selectable.selection) === null || _b === void 0 ? void 0 : _b.selected.length) || 0;
-    }, [selectable, loadingEntities.length]);
-    const clearSelection = (0, react_1.useCallback)(() => {
-        setSelectMode(false);
-        selectable === null || selectable === void 0 ? void 0 : selectable.onSelect({ all: false, selected: [] });
-    }, [selectable]);
-    const selectAll = (0, react_1.useCallback)(() => {
-        selectable === null || selectable === void 0 ? void 0 : selectable.onSelect({ all: true, selected: [] });
-    }, [selectable]);
-    const { bulkActions, pagination, activePage, fullscreenButton, emptyList, footer, other } = (0, useTableChildren_1.useTableChildren)(children, isMobile, selectionQty, ((_c = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _c === void 0 ? void 0 : _c.all) || false, clearSelection, selectAll, selectable === null || selectable === void 0 ? void 0 : selectable.turnOffSelectAll, gridRef);
-    const handleOnHidePanel = (0, react_1.useCallback)(() => setSelectMode(false), []);
-    const handleOnTriggerClick = (0, react_1.useCallback)(() => setSelectMode(prev => !prev), []);
-    const hasPostActions = (0, react_1.useMemo)(() => columnsPopup || (isMobile && selectable) || (!isMobile && fullscreenButton) || isFeedVisible, [columnsPopup, fullscreenButton, isFeedVisible, isMobile, selectable]);
-    const hasToolbar = (0, react_1.useMemo)(() => bulkActions || feedSortControl || (pagination && !isMobile) || other.length || columnsPopup || (!isMobile && fullscreenButton) || isFeedVisible, [bulkActions, columnsPopup, feedSortControl, fullscreenButton, isFeedVisible, isMobile, other.length, pagination]);
-    const gridAutoHeight = (0, react_1.useMemo)(() => contentHeight ? `${contentHeight}px` : undefined, [contentHeight]);
-    const minHeight = "400px";
-    const gridHeight = (0, react_1.useMemo)(() => height || gridAutoHeight || minHeight, [gridAutoHeight, height]);
-    // TODO: disadvantages?
-    const { gridClasses, restClasses } = (0, getGridClasses_1.getGridClasses)(className || "");
-    return (0, jsx_runtime_1.jsx)(layoutFullScreen_1.LayoutFullScreen, { className: (0, classNames_1.classNames)([...gridClasses]), children: (0, jsx_runtime_1.jsxs)("div", { style: { height: gridHeight }, className: (0, classNames_1.classNames)(["zen-table-wrapper", hasToolbar ? "zen-table-wrapper--with-toolbar" : "", ...restClasses]), children: [hasToolbar
-                    ? (0, jsx_runtime_1.jsxs)(entitiesListActions_1.EntitiesListActions, { gridType: isMobile ? deviceType_1.DeviceType.Mobile : deviceType_1.DeviceType.Desktop, children: [(0, jsx_runtime_1.jsxs)(entitiesListActions_1.EntitiesListActions.Actions, { children: [!isMobile && bulkActions && selectionQty > 0
-                                        ? bulkActions
-                                        : null, feedSortControl] }), pagination || other.length > 0
-                                ? (0, jsx_runtime_1.jsxs)(entitiesListActions_1.EntitiesListActions.Pagination, { children: [(0, jsx_runtime_1.jsx)(entitiesListActions_1.EntitiesListActions.CustomElements, { children: other }), !isMobile ? pagination : null] })
-                                : null, hasPostActions
-                                ? (0, jsx_runtime_1.jsxs)(entitiesListActions_1.EntitiesListActions.PostActions, { children: [columnsPopup
-                                            ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(columnsListButton_1.ColumnsListButton, { ref: columnsPopupRef }), columnsPopup] })
-                                            : null, isFeedVisible ? (0, jsx_runtime_1.jsx)(feedExpandControl_1.FeedExpandControl, { isExpanded: isFeedExpanded, onClick: handleExpanded }) : null, isMobile && selectable
-                                            ? (0, jsx_runtime_1.jsx)(dataFeedSelectPanel_1.DataFeedSelectPanel, { panelTitle: "Selection panel", buttonTitle: "Bulk select", onTriggerClick: handleOnTriggerClick, isOpen: selectMode, onHidePanel: handleOnHidePanel, children: bulkActions })
-                                            : null, !isMobile ? fullscreenButton : null] })
-                                : null] })
-                    : null, isMobile ? (0, jsx_runtime_1.jsxs)(dataFeed_1.DataFeed, { columns: loadingColumns, feedWrappers: [nestedFeedWrapper, selectableFeedWrapper], entities: loadingEntities, expanded: isFeedExpanded, options: {
-                        onFeedEnd: onFeedEnd,
-                        visibleColumns
-                    }, actions: actions, actionsAsync: actionsAsync, primaryActions: primaryActions, ref: gridRef, rowClassName: rowClassName, expandedRows: expanded, onExpandedChange: onExpandedChange, activePage: activePage, children: [emptyList || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), footer || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] }) : (0, jsx_runtime_1.jsxs)(dataGrid_1.DataGrid, { columns: loadingColumns, entities: loadingEntities, ref: gridRef, rowClassName: rowClassName, expandedRows: expanded, onExpandedChange: onExpandedChange, children: [emptyList || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), footer || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] })] }) });
+const tableDetailPanel_1 = require("./children/tableDetailPanel");
+const useLanguage_1 = require("../utils/localization/useLanguage");
+const TableInner = ({
+  entities,
+  columns,
+  selectable,
+  sortable,
+  flexible,
+  isLoading,
+  loading,
+  children,
+  className,
+  height,
+  onFeedEnd,
+  rowClassName,
+  feedExpandable,
+  expandedRows,
+  onExpand,
+  active,
+  onClick
+}) => {
+  var _a, _b, _c;
+  const isMobile = (0, useMobile_1.useMobile)();
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const gridRef = (0, react_1.useRef)(null);
+  const columnsPopupRef = (0, react_1.useRef)(null);
+  const [selectMode, setSelectMode] = (0, react_1.useState)((((_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.selected) || []).length > 0 || ((_b = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _b === void 0 ? void 0 : _b.all) || false);
+  const {
+    contentHeight
+  } = (0, layoutSizeProvider_1.useLayoutSize)();
+  const setMobileSelectMode = (0, react_1.useCallback)(value => {
+    if (isMobile) {
+      return;
+    }
+    setSelectMode(value);
+  }, [isMobile, setSelectMode]);
+  const {
+    expanded,
+    onExpandedChange,
+    nestedColumns,
+    nestedFeedWrapper
+  } = (0, useNestedRows_1.useNestedRows)(expandedRows, onExpand, columns, isMobile);
+  const {
+    selectableColumns,
+    selectableFeedWrapper
+  } = (0, useSelectableRows_1.useSelectableRows)(nestedColumns, entities, isMobile, selectMode, setMobileSelectMode, isLoading ? undefined : selectable);
+  const {
+    sortableColumns,
+    feedSortControl
+  } = (0, useSortableColumns_1.useSortableColumns)(selectableColumns, sortable, isMobile);
+  const {
+    flexibleColumns,
+    columnsPopup
+  } = (0, useFlexibleColumns_1.useFlexibleColumns)(sortableColumns, flexible, gridRef, columnsPopupRef, isMobile);
+  const {
+    columnsWithActions,
+    actions,
+    actionsAsync,
+    primaryActions
+  } = (0, useActions_1.useActions)(flexibleColumns, isMobile);
+  const {
+    loadingColumns,
+    loadingEntities
+  } = (0, useLoading_1.useLoading)(columnsWithActions, entities, isLoading, loading);
+  const {
+    isFeedExpanded,
+    handleExpanded,
+    isFeedVisible,
+    visibleColumns
+  } = (0, useFeedExpandable_1.useFeedExpandable)(isMobile, feedExpandable);
+  const selectionQty = (0, react_1.useMemo)(() => {
+    var _a, _b;
+    if (!selectable) {
+      return 0;
+    }
+    return ((_a = selectable.selection) === null || _a === void 0 ? void 0 : _a.all) ? loadingEntities.length : ((_b = selectable.selection) === null || _b === void 0 ? void 0 : _b.selected.length) || 0;
+  }, [selectable, loadingEntities.length]);
+  const clearSelection = (0, react_1.useCallback)(() => {
+    setSelectMode(false);
+    selectable === null || selectable === void 0 ? void 0 : selectable.onSelect({
+      all: false,
+      selected: []
+    });
+  }, [selectable]);
+  const selectAll = (0, react_1.useCallback)(() => {
+    selectable === null || selectable === void 0 ? void 0 : selectable.onSelect({
+      all: true,
+      selected: []
+    });
+  }, [selectable]);
+  const [activeIdInternal, setActiveInternal] = (0, react_1.useState)(undefined);
+  const activeId = active !== undefined ? active : activeIdInternal;
+  const onClickInternal = (0, react_1.useCallback)(id => setActiveInternal(id === activeIdInternal ? undefined : id), [activeIdInternal, setActiveInternal]);
+  const onClickRow = onClick || onClickInternal;
+  const onCloseDetailPanel = (0, react_1.useCallback)(() => {
+    onClickRow(undefined);
+  }, [onClickRow]);
+  const {
+    bulkActions,
+    pagination,
+    activePage,
+    fullscreenButton,
+    emptyList,
+    detailPanel,
+    footer,
+    other
+  } = (0, useTableChildren_1.useTableChildren)(children, isMobile, selectionQty, ((_c = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _c === void 0 ? void 0 : _c.all) || false, clearSelection, selectAll, selectable === null || selectable === void 0 ? void 0 : selectable.turnOffSelectAll, activeId, gridRef, onCloseDetailPanel);
+  const hasDetailPanel = !!detailPanel;
+  const shouldEnableRowClick = hasDetailPanel || !!onClick;
+  const activeIdForRow = shouldEnableRowClick ? activeId : undefined;
+  const onClickForRow = shouldEnableRowClick ? onClickRow : undefined;
+  const handleOnHidePanel = (0, react_1.useCallback)(() => setSelectMode(false), []);
+  const handleOnTriggerClick = (0, react_1.useCallback)(() => setSelectMode(prev => !prev), []);
+  const hasPostActions = (0, react_1.useMemo)(() => columnsPopup || isMobile && selectable || !isMobile && fullscreenButton || isFeedVisible, [columnsPopup, fullscreenButton, isFeedVisible, isMobile, selectable]);
+  const hasToolbar = (0, react_1.useMemo)(() => bulkActions || feedSortControl || pagination && !isMobile || other.length || columnsPopup || !isMobile && fullscreenButton || isFeedVisible, [bulkActions, columnsPopup, feedSortControl, fullscreenButton, isFeedVisible, isMobile, other.length, pagination]);
+  const gridAutoHeight = (0, react_1.useMemo)(() => contentHeight ? `${contentHeight}px` : undefined, [contentHeight]);
+  const minHeight = "400px";
+  const gridHeight = (0, react_1.useMemo)(() => height || gridAutoHeight || minHeight, [gridAutoHeight, height]);
+  // TODO: disadvantages?
+  const {
+    gridClasses,
+    restClasses
+  } = (0, getGridClasses_1.getGridClasses)(className || "");
+  return (0, jsx_runtime_1.jsx)(layoutFullScreen_1.LayoutFullScreen, {
+    className: (0, classNames_1.classNames)([...gridClasses]),
+    children: (0, jsx_runtime_1.jsxs)("div", {
+      style: {
+        height: gridHeight
+      },
+      className: (0, classNames_1.classNames)(["zen-table-wrapper", hasToolbar ? "zen-table-wrapper--with-toolbar" : "", ...restClasses]),
+      children: [hasToolbar ? (0, jsx_runtime_1.jsxs)(entitiesListActions_1.EntitiesListActions, {
+        gridType: isMobile ? deviceType_1.DeviceType.Mobile : deviceType_1.DeviceType.Desktop,
+        children: [(0, jsx_runtime_1.jsxs)(entitiesListActions_1.EntitiesListActions.Actions, {
+          children: [!isMobile && bulkActions && selectionQty > 0 ? bulkActions : null, feedSortControl]
+        }), pagination || other.length > 0 ? (0, jsx_runtime_1.jsxs)(entitiesListActions_1.EntitiesListActions.Pagination, {
+          children: [(0, jsx_runtime_1.jsx)(entitiesListActions_1.EntitiesListActions.CustomElements, {
+            children: other
+          }), !isMobile ? pagination : null]
+        }) : null, hasPostActions ? (0, jsx_runtime_1.jsxs)(entitiesListActions_1.EntitiesListActions.PostActions, {
+          children: [columnsPopup ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+            children: [(0, jsx_runtime_1.jsx)(columnsListButton_1.ColumnsListButton, {
+              ref: columnsPopupRef
+            }), columnsPopup]
+          }) : null, isFeedVisible ? (0, jsx_runtime_1.jsx)(feedExpandControl_1.FeedExpandControl, {
+            isExpanded: isFeedExpanded,
+            onClick: handleExpanded
+          }) : null, isMobile && selectable ? (0, jsx_runtime_1.jsx)(dataFeedSelectPanel_1.DataFeedSelectPanel, {
+            panelTitle: translate("Selection panel"),
+            buttonTitle: translate("Bulk select"),
+            onTriggerClick: handleOnTriggerClick,
+            isOpen: selectMode,
+            onHidePanel: handleOnHidePanel,
+            children: bulkActions
+          }) : null, !isMobile ? fullscreenButton : null]
+        }) : null]
+      }) : null, (0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-table__content",
+        children: [(0, jsx_runtime_1.jsx)("div", {
+          className: "zen-table__table",
+          children: isMobile ? (0, jsx_runtime_1.jsxs)(dataFeed_1.DataFeed, {
+            columns: loadingColumns,
+            feedWrappers: [nestedFeedWrapper, selectableFeedWrapper],
+            entities: loadingEntities,
+            expanded: isFeedExpanded,
+            options: {
+              onFeedEnd: onFeedEnd,
+              visibleColumns
+            },
+            actions: actions,
+            actionsAsync: actionsAsync,
+            primaryActions: primaryActions,
+            ref: gridRef,
+            rowClassName: rowClassName,
+            expandedRows: expanded,
+            onExpandedChange: onExpandedChange,
+            activePage: activePage,
+            active: activeIdForRow,
+            onClick: onClickForRow,
+            children: [emptyList || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), footer || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})]
+          }) : (0, jsx_runtime_1.jsxs)(dataGrid_1.DataGrid, {
+            columns: loadingColumns,
+            entities: loadingEntities,
+            ref: gridRef,
+            rowClassName: rowClassName,
+            expandedRows: expanded,
+            onExpandedChange: onExpandedChange,
+            active: activeIdForRow,
+            onClick: onClickForRow,
+            children: [emptyList || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), footer || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})]
+          })
+        }), detailPanel !== null && detailPanel !== void 0 ? detailPanel : null]
+      })]
+    })
+  });
 };
 const Table = (0, react_1.memo)(TableInner);
 exports.Table = Table;
@@ -114,3 +293,4 @@ Table.Pagination = tablePagination_1.TablePagination;
 Table.Fullscreen = tableFullscreen_1.TableFullscreen;
 Table.BulkButton = bulkActionButton_1.BulkActionButton;
 Table.BulkLink = bulkActionLink_1.BulkActionLink;
+Table.DetailPanel = tableDetailPanel_1.TableDetailPanel;