iguazio.dashboard-react-controls 3.1.6 → 3.1.8

package/dist/hooks/useTable.hook.d.ts

@@ -57,4 +57,10 @@ export function useTable({ ref, selectedItem, skipTableWrapper, tableClassName }
     tableStore: any;
     tableWrapperClass: string;
 };
+export function useTableScroll({ content, selectedItem, isAllVersions, tableId }: {
+    content: any;
+    selectedItem: any;
+    isAllVersions: any;
+    tableId?: string;
+}): void;
 //# sourceMappingURL=useTable.hook.d.ts.map

package/dist/hooks/useTable.hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.hook.d.ts","sourceRoot":"","sources":["../../src/lib/hooks/useTable.hook.jsx"],"names":[],"mappings":"AAoHO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4EN"}
+{"version":3,"file":"useTable.hook.d.ts","sourceRoot":"","sources":["../../src/lib/hooks/useTable.hook.jsx"],"names":[],"mappings":"AAoHO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4EN;AAEM;;;;;SA8EN"}

package/dist/hooks/useTable.hook.mjs

@@ -1,81 +1,81 @@
-import { jsx as b, jsxs as v } from "react/jsx-runtime";
-import { useRef as u, useEffect as w, useCallback as I } from "react";
+import { jsx as w, jsxs as C } from "react/jsx-runtime";
+import { useRef as T, useEffect as _, useCallback as v, useMemo as I } from "react";
 import e from "prop-types";
-import y from "classnames";
-import { useSelector as B } from "react-redux";
-import { isEmpty as C } from "lodash";
-import j from "../elements/TableHead/TableHead.mjs";
-import { MAIN_TABLE_BODY_ID as E, MAIN_TABLE_ID as N } from "../constants.mjs";
-import { VIRTUALIZATION_CONFIG as q, SORT_PROPS as O } from "../types.mjs";
-const P = ({
-  children: l,
-  hideActionsMenu: f = !1,
-  mainRowItemsCount: R = 1,
-  pageData: r = null,
-  renderDetails: m = null,
-  selectedItem: _ = {},
-  sortProps: i = null,
-  tableBodyRef: h,
-  tableClass: s,
-  tableContentRef: n,
-  tableHeadRef: c,
-  tableHeaders: o,
-  tablePanelRef: g,
-  tableRef: T,
-  tableStore: a = null,
-  tableWrapperClass: t,
-  virtualizationConfig: d = {
+import B from "classnames";
+import { useSelector as N } from "react-redux";
+import { isEmpty as P } from "lodash";
+import S from "../elements/TableHead/TableHead.mjs";
+import { MAIN_TABLE_BODY_ID as x, MAIN_TABLE_ID as E } from "../constants.mjs";
+import { VIRTUALIZATION_CONFIG as O, SORT_PROPS as A } from "../types.mjs";
+const L = ({
+  children: n,
+  hideActionsMenu: s = !1,
+  mainRowItemsCount: p = 1,
+  pageData: u = null,
+  renderDetails: l = null,
+  selectedItem: f = {},
+  sortProps: c = null,
+  tableBodyRef: m,
+  tableClass: t,
+  tableContentRef: d,
+  tableHeadRef: r,
+  tableHeaders: a,
+  tablePanelRef: i,
+  tableRef: h,
+  tableStore: b = null,
+  tableWrapperClass: o,
+  virtualizationConfig: g = {
     tableBodyPaddingTop: 0,
     startIndex: -1,
     endIndex: -1
   }
-}) => /* @__PURE__ */ b("div", { className: "table__flex", children: /* @__PURE__ */ v("div", { className: "table__content", id: "table-content", ref: n, children: [
-  /* @__PURE__ */ v("div", { className: t, children: [
-    /* @__PURE__ */ v(
+}) => /* @__PURE__ */ w("div", { className: "table__flex", children: /* @__PURE__ */ C("div", { className: "table__content", id: "table-content", ref: d, children: [
+  /* @__PURE__ */ C("div", { className: o, children: [
+    /* @__PURE__ */ C(
       "table",
       {
-        id: N,
-        className: s,
+        id: E,
+        className: t,
         cellPadding: "0",
         cellSpacing: "0",
-        ref: T,
+        ref: h,
         children: [
-          (o == null ? void 0 : o.length) > 0 && /* @__PURE__ */ b(
-            j,
+          (a == null ? void 0 : a.length) > 0 && /* @__PURE__ */ w(
+            S,
             {
-              content: o,
-              hideActionsMenu: f,
-              mainRowItemsCount: R,
-              ref: c,
-              selectedItem: _,
-              sortProps: i
+              content: a,
+              hideActionsMenu: s,
+              mainRowItemsCount: p,
+              ref: r,
+              selectedItem: f,
+              sortProps: c
             }
           ),
-          /* @__PURE__ */ b(
+          /* @__PURE__ */ w(
             "tbody",
             {
               className: "table-body",
-              id: E,
-              style: { paddingTop: d.tableBodyPaddingTop },
-              ref: h,
-              children: l
+              id: x,
+              style: { paddingTop: g.tableBodyPaddingTop },
+              ref: m,
+              children: n
             }
           )
         ]
       }
     ),
-    (a == null ? void 0 : a.isTablePanelOpen) && (r == null ? void 0 : r.tablePanel) && /* @__PURE__ */ b("div", { className: "table__panel-container", ref: g, children: /* @__PURE__ */ b("div", { className: "table__panel", children: r.tablePanel }) })
+    (b == null ? void 0 : b.isTablePanelOpen) && (u == null ? void 0 : u.tablePanel) && /* @__PURE__ */ w("div", { className: "table__panel-container", ref: i, children: /* @__PURE__ */ w("div", { className: "table__panel", children: u.tablePanel }) })
   ] }),
-  m && m()
+  l && l()
 ] }) });
-P.propTypes = {
+L.propTypes = {
   children: e.node.isRequired,
   hideActionsMenu: e.bool,
   mainRowItemsCount: e.number,
   pageData: e.object,
   renderDetails: e.func,
   selectedItem: e.object,
-  sortProps: O,
+  sortProps: A,
   tableBodyRef: e.object.isRequired,
   tableClass: e.string.isRequired,
   tableContentRef: e.object.isRequired,
@@ -85,45 +85,91 @@ P.propTypes = {
   tableRef: e.object.isRequired,
   tableStore: e.object,
   tableWrapperClass: e.string.isRequired,
-  virtualizationConfig: q
+  virtualizationConfig: O
 };
-const F = ({ ref: l, selectedItem: f, skipTableWrapper: R = !1, tableClassName: r = "" }) => {
-  const m = u(null), _ = u(null), i = (l == null ? void 0 : l.tableRef) ?? m, h = (l == null ? void 0 : l.tableBodyRef) ?? _, s = u(null), n = u(null), c = u(null), o = B((t) => t.tableStore) ?? {}, g = y(
+const K = ({ ref: n, selectedItem: s, skipTableWrapper: p = !1, tableClassName: u = "" }) => {
+  const l = T(null), f = T(null), c = (n == null ? void 0 : n.tableRef) ?? l, m = (n == null ? void 0 : n.tableBodyRef) ?? f, t = T(null), d = T(null), r = T(null), a = N((o) => o.tableStore) ?? {}, i = B(
     "table",
     "table-main",
-    !C(f) && "table-with-details",
-    r && r
-  ), T = y(!R && "table__wrapper");
-  w(() => {
-    const t = () => {
-      if (c != null && c.current && (s != null && s.current) && (n != null && n.current)) {
-        const d = s.current.getBoundingClientRect().height, L = c.current.getBoundingClientRect(), p = window.innerHeight - L.top;
-        n.current.style.height = d > p ? `${p}px` : `${p - (p - d)}px`;
+    !P(s) && "table-with-details",
+    u && u
+  ), h = B(!p && "table__wrapper");
+  _(() => {
+    const o = () => {
+      if (r != null && r.current && (t != null && t.current) && (d != null && d.current)) {
+        const g = t.current.getBoundingClientRect().height, y = r.current.getBoundingClientRect(), R = window.innerHeight - y.top;
+        d.current.style.height = g > R ? `${R}px` : `${R - (R - g)}px`;
       }
     };
-    return o.isTablePanelOpen && n.current && (t(), document.getElementById("main-wrapper").addEventListener("scroll", t), window.addEventListener("resize", t)), () => {
-      window.removeEventListener("scroll", t), window.removeEventListener("resize", t);
+    return a.isTablePanelOpen && d.current && (o(), document.getElementById("main-wrapper").addEventListener("scroll", o), window.addEventListener("resize", o)), () => {
+      window.removeEventListener("scroll", o), window.removeEventListener("resize", o);
     };
-  }, [o.isTablePanelOpen]);
-  const a = I(
-    (t) => {
-      i.current && (t.target.scrollLeft > 0 ? i.current.classList.add("table__scrolled") : i.current.classList.remove("table__scrolled"));
+  }, [a.isTablePanelOpen]);
+  const b = v(
+    (o) => {
+      c.current && (o.target.scrollLeft > 0 ? c.current.classList.add("table__scrolled") : c.current.classList.remove("table__scrolled"));
     },
-    [i]
+    [c]
   );
-  return w(() => (window.addEventListener("scroll", a, !0), () => window.removeEventListener("scroll", a, !0)), [a]), {
-    TableContainer: P,
-    tableBodyRef: h,
-    tableClass: g,
-    tableContentRef: s,
-    tableHeadRef: c,
-    tablePanelRef: n,
-    tableRef: i,
-    tableStore: o,
-    tableWrapperClass: T
+  return _(() => (window.addEventListener("scroll", b, !0), () => window.removeEventListener("scroll", b, !0)), [b]), {
+    TableContainer: L,
+    tableBodyRef: m,
+    tableClass: i,
+    tableContentRef: t,
+    tableHeadRef: r,
+    tablePanelRef: d,
+    tableRef: c,
+    tableStore: a,
+    tableWrapperClass: h
   };
+}, Z = ({
+  content: n,
+  selectedItem: s,
+  isAllVersions: p,
+  tableId: u = E
+}) => {
+  const l = T(null), f = I(
+    () => p ? "identifierUnique" : "identifier",
+    [p]
+  ), c = v(
+    (m, t, d = !1) => {
+      const r = t == null ? void 0 : t.findIndex(
+        (i) => {
+          var h;
+          return ((h = i == null ? void 0 : i.ui) == null ? void 0 : h[f]) === m;
+        }
+      ), a = () => {
+        var h;
+        const i = document.getElementById(u);
+        if (r && i) {
+          const b = i.getElementsByTagName("tr");
+          if (r <= b.length) {
+            const o = ((h = i.querySelector("thead")) == null ? void 0 : h.getBoundingClientRect().height) ?? 0, g = b[r].getBoundingClientRect(), y = i.getBoundingClientRect(), R = g.height / 2, q = (y.height - o) / 2, j = g.height * (r + 1) - R - q;
+            i.scrollTo({
+              top: j
+            });
+          }
+        }
+      };
+      r >= 0 && (d ? requestAnimationFrame(() => {
+        a();
+      }) : a());
+    },
+    [f, u]
+  );
+  _(() => {
+    var m, t;
+    try {
+      P(s) ? l.current && (c((t = l.current) == null ? void 0 : t[f], n), l.current = null) : l.current ? l.current = s.ui : (l.current = s.ui, c((m = s == null ? void 0 : s.ui) == null ? void 0 : m[f], n, !0));
+    } catch {
+      l.current = null;
+    }
+  }, [s, n, c, f]), _(() => () => {
+    l.current = null;
+  }, [n]);
 };
 export {
-  F as useTable
+  K as useTable,
+  Z as useTableScroll
 };
 //# sourceMappingURL=useTable.hook.mjs.map

package/dist/hooks/useTable.hook.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.hook.mjs","sources":["../../src/lib/hooks/useTable.hook.jsx"],"sourcesContent":["/*\nCopyright 2019 Iguazio Systems Ltd.\n\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\n\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { useCallback, useEffect, useRef } from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport { useSelector } from 'react-redux'\nimport { isEmpty } from 'lodash'\n\nimport TableHead from '../elements/TableHead/TableHead'\n\nimport { MAIN_TABLE_BODY_ID, MAIN_TABLE_ID } from '../constants'\nimport { SORT_PROPS } from '../types'\nimport { VIRTUALIZATION_CONFIG } from '../types'\n\nconst TableContainer = ({\n  children,\n  hideActionsMenu = false,\n  mainRowItemsCount = 1,\n  pageData = null,\n  renderDetails = null,\n  selectedItem = {},\n  sortProps = null,\n  tableBodyRef,\n  tableClass,\n  tableContentRef,\n  tableHeadRef,\n  tableHeaders,\n  tablePanelRef,\n  tableRef,\n  tableStore = null,\n  tableWrapperClass,\n  virtualizationConfig = {\n    tableBodyPaddingTop: 0,\n    startIndex: -1,\n    endIndex: -1\n  }\n}) => {\n  return (\n    <div className=\"table__flex\">\n      <div className=\"table__content\" id=\"table-content\" ref={tableContentRef}>\n        <div className={tableWrapperClass}>\n          <table\n            id={MAIN_TABLE_ID}\n            className={tableClass}\n            cellPadding=\"0\"\n            cellSpacing=\"0\"\n            ref={tableRef}\n          >\n            {tableHeaders?.length > 0 && (\n              <TableHead\n                content={tableHeaders}\n                hideActionsMenu={hideActionsMenu}\n                mainRowItemsCount={mainRowItemsCount}\n                ref={tableHeadRef}\n                selectedItem={selectedItem}\n                sortProps={sortProps}\n              />\n            )}\n            <tbody\n              className=\"table-body\"\n              id={MAIN_TABLE_BODY_ID}\n              style={{ paddingTop: virtualizationConfig.tableBodyPaddingTop }}\n              ref={tableBodyRef}\n            >\n              {children}\n            </tbody>\n          </table>\n          {tableStore?.isTablePanelOpen && pageData?.tablePanel && (\n            <div className=\"table__panel-container\" ref={tablePanelRef}>\n              <div className=\"table__panel\">{pageData.tablePanel}</div>\n            </div>\n          )}\n        </div>\n        {renderDetails && renderDetails()}\n      </div>\n    </div>\n  )\n}\n\nTableContainer.propTypes = {\n  children: PropTypes.node.isRequired,\n  hideActionsMenu: PropTypes.bool,\n  mainRowItemsCount: PropTypes.number,\n  pageData: PropTypes.object,\n  renderDetails: PropTypes.func,\n  selectedItem: PropTypes.object,\n  sortProps: SORT_PROPS,\n  tableBodyRef: PropTypes.object.isRequired,\n  tableClass: PropTypes.string.isRequired,\n  tableContentRef: PropTypes.object.isRequired,\n  tableHeadRef: PropTypes.object.isRequired,\n  tableHeaders: PropTypes.arrayOf(PropTypes.object).isRequired,\n  tablePanelRef: PropTypes.object.isRequired,\n  tableRef: PropTypes.object.isRequired,\n  tableStore: PropTypes.object,\n  tableWrapperClass: PropTypes.string.isRequired,\n  virtualizationConfig: VIRTUALIZATION_CONFIG\n}\n\nexport const useTable = ({ ref, selectedItem, skipTableWrapper = false, tableClassName = '' }) => {\n  const tableRefLocal = useRef(null)\n  const tableBodyRefLocal = useRef(null)\n  const tableRef = ref?.tableRef ?? tableRefLocal\n  const tableBodyRef = ref?.tableBodyRef ?? tableBodyRefLocal\n  const tableContentRef = useRef(null)\n  const tablePanelRef = useRef(null)\n  const tableHeadRef = useRef(null)\n  const tableStore = useSelector(store => store.tableStore) ?? {}\n\n  const tableClass = classnames(\n    'table',\n    'table-main',\n    !isEmpty(selectedItem) && 'table-with-details',\n    tableClassName && tableClassName\n  )\n  const tableWrapperClass = classnames(!skipTableWrapper && 'table__wrapper')\n\n  useEffect(() => {\n    const calculatePanelHeight = () => {\n      if (tableHeadRef?.current && tableContentRef?.current && tablePanelRef?.current) {\n        const tableContentHeight = tableContentRef.current.getBoundingClientRect().height\n        const tableHeadCords = tableHeadRef.current.getBoundingClientRect()\n        const panelHeight = window.innerHeight - tableHeadCords.top\n\n        tablePanelRef.current.style.height =\n          tableContentHeight > panelHeight\n            ? `${panelHeight}px`\n            : `${panelHeight - (panelHeight - tableContentHeight)}px`\n      }\n    }\n\n    if (tableStore.isTablePanelOpen && tablePanelRef.current) {\n      calculatePanelHeight()\n\n      document.getElementById('main-wrapper').addEventListener('scroll', calculatePanelHeight)\n      window.addEventListener('resize', calculatePanelHeight)\n    }\n    return () => {\n      window.removeEventListener('scroll', calculatePanelHeight)\n      window.removeEventListener('resize', calculatePanelHeight)\n    }\n  }, [tableStore.isTablePanelOpen])\n\n  const handleTableHScroll = useCallback(\n    e => {\n      if (tableRef.current) {\n        const tableScrollPosition = e.target.scrollLeft\n\n        if (tableScrollPosition > 0) {\n          tableRef.current.classList.add('table__scrolled')\n        } else {\n          tableRef.current.classList.remove('table__scrolled')\n        }\n      }\n    },\n    [tableRef]\n  )\n\n  useEffect(() => {\n    window.addEventListener('scroll', handleTableHScroll, true)\n\n    return () => window.removeEventListener('scroll', handleTableHScroll, true)\n  }, [handleTableHScroll])\n\n  return {\n    TableContainer,\n    tableBodyRef,\n    tableClass,\n    tableContentRef,\n    tableHeadRef,\n    tablePanelRef,\n    tableRef,\n    tableStore,\n    tableWrapperClass\n  }\n}\n"],"names":["TableContainer","children","hideActionsMenu","mainRowItemsCount","pageData","renderDetails","selectedItem","sortProps","tableBodyRef","tableClass","tableContentRef","tableHeadRef","tableHeaders","tablePanelRef","tableRef","tableStore","tableWrapperClass","virtualizationConfig","jsx","jsxs","MAIN_TABLE_ID","TableHead","MAIN_TABLE_BODY_ID","PropTypes","SORT_PROPS","VIRTUALIZATION_CONFIG","useTable","ref","skipTableWrapper","tableClassName","tableRefLocal","useRef","tableBodyRefLocal","useSelector","store","classnames","isEmpty","useEffect","calculatePanelHeight","tableContentHeight","tableHeadCords","panelHeight","handleTableHScroll","useCallback","e"],"mappings":"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"}
+{"version":3,"file":"useTable.hook.mjs","sources":["../../src/lib/hooks/useTable.hook.jsx"],"sourcesContent":["/*\nCopyright 2019 Iguazio Systems Ltd.\n\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\n\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport { useSelector } from 'react-redux'\nimport { isEmpty } from 'lodash'\n\nimport TableHead from '../elements/TableHead/TableHead'\n\nimport { MAIN_TABLE_BODY_ID, MAIN_TABLE_ID } from '../constants'\nimport { SORT_PROPS } from '../types'\nimport { VIRTUALIZATION_CONFIG } from '../types'\n\nconst TableContainer = ({\n  children,\n  hideActionsMenu = false,\n  mainRowItemsCount = 1,\n  pageData = null,\n  renderDetails = null,\n  selectedItem = {},\n  sortProps = null,\n  tableBodyRef,\n  tableClass,\n  tableContentRef,\n  tableHeadRef,\n  tableHeaders,\n  tablePanelRef,\n  tableRef,\n  tableStore = null,\n  tableWrapperClass,\n  virtualizationConfig = {\n    tableBodyPaddingTop: 0,\n    startIndex: -1,\n    endIndex: -1\n  }\n}) => {\n  return (\n    <div className=\"table__flex\">\n      <div className=\"table__content\" id=\"table-content\" ref={tableContentRef}>\n        <div className={tableWrapperClass}>\n          <table\n            id={MAIN_TABLE_ID}\n            className={tableClass}\n            cellPadding=\"0\"\n            cellSpacing=\"0\"\n            ref={tableRef}\n          >\n            {tableHeaders?.length > 0 && (\n              <TableHead\n                content={tableHeaders}\n                hideActionsMenu={hideActionsMenu}\n                mainRowItemsCount={mainRowItemsCount}\n                ref={tableHeadRef}\n                selectedItem={selectedItem}\n                sortProps={sortProps}\n              />\n            )}\n            <tbody\n              className=\"table-body\"\n              id={MAIN_TABLE_BODY_ID}\n              style={{ paddingTop: virtualizationConfig.tableBodyPaddingTop }}\n              ref={tableBodyRef}\n            >\n              {children}\n            </tbody>\n          </table>\n          {tableStore?.isTablePanelOpen && pageData?.tablePanel && (\n            <div className=\"table__panel-container\" ref={tablePanelRef}>\n              <div className=\"table__panel\">{pageData.tablePanel}</div>\n            </div>\n          )}\n        </div>\n        {renderDetails && renderDetails()}\n      </div>\n    </div>\n  )\n}\n\nTableContainer.propTypes = {\n  children: PropTypes.node.isRequired,\n  hideActionsMenu: PropTypes.bool,\n  mainRowItemsCount: PropTypes.number,\n  pageData: PropTypes.object,\n  renderDetails: PropTypes.func,\n  selectedItem: PropTypes.object,\n  sortProps: SORT_PROPS,\n  tableBodyRef: PropTypes.object.isRequired,\n  tableClass: PropTypes.string.isRequired,\n  tableContentRef: PropTypes.object.isRequired,\n  tableHeadRef: PropTypes.object.isRequired,\n  tableHeaders: PropTypes.arrayOf(PropTypes.object).isRequired,\n  tablePanelRef: PropTypes.object.isRequired,\n  tableRef: PropTypes.object.isRequired,\n  tableStore: PropTypes.object,\n  tableWrapperClass: PropTypes.string.isRequired,\n  virtualizationConfig: VIRTUALIZATION_CONFIG\n}\n\nexport const useTable = ({ ref, selectedItem, skipTableWrapper = false, tableClassName = '' }) => {\n  const tableRefLocal = useRef(null)\n  const tableBodyRefLocal = useRef(null)\n  const tableRef = ref?.tableRef ?? tableRefLocal\n  const tableBodyRef = ref?.tableBodyRef ?? tableBodyRefLocal\n  const tableContentRef = useRef(null)\n  const tablePanelRef = useRef(null)\n  const tableHeadRef = useRef(null)\n  const tableStore = useSelector(store => store.tableStore) ?? {}\n\n  const tableClass = classnames(\n    'table',\n    'table-main',\n    !isEmpty(selectedItem) && 'table-with-details',\n    tableClassName && tableClassName\n  )\n  const tableWrapperClass = classnames(!skipTableWrapper && 'table__wrapper')\n\n  useEffect(() => {\n    const calculatePanelHeight = () => {\n      if (tableHeadRef?.current && tableContentRef?.current && tablePanelRef?.current) {\n        const tableContentHeight = tableContentRef.current.getBoundingClientRect().height\n        const tableHeadCords = tableHeadRef.current.getBoundingClientRect()\n        const panelHeight = window.innerHeight - tableHeadCords.top\n\n        tablePanelRef.current.style.height =\n          tableContentHeight > panelHeight\n            ? `${panelHeight}px`\n            : `${panelHeight - (panelHeight - tableContentHeight)}px`\n      }\n    }\n\n    if (tableStore.isTablePanelOpen && tablePanelRef.current) {\n      calculatePanelHeight()\n\n      document.getElementById('main-wrapper').addEventListener('scroll', calculatePanelHeight)\n      window.addEventListener('resize', calculatePanelHeight)\n    }\n    return () => {\n      window.removeEventListener('scroll', calculatePanelHeight)\n      window.removeEventListener('resize', calculatePanelHeight)\n    }\n  }, [tableStore.isTablePanelOpen])\n\n  const handleTableHScroll = useCallback(\n    e => {\n      if (tableRef.current) {\n        const tableScrollPosition = e.target.scrollLeft\n\n        if (tableScrollPosition > 0) {\n          tableRef.current.classList.add('table__scrolled')\n        } else {\n          tableRef.current.classList.remove('table__scrolled')\n        }\n      }\n    },\n    [tableRef]\n  )\n\n  useEffect(() => {\n    window.addEventListener('scroll', handleTableHScroll, true)\n\n    return () => window.removeEventListener('scroll', handleTableHScroll, true)\n  }, [handleTableHScroll])\n\n  return {\n    TableContainer,\n    tableBodyRef,\n    tableClass,\n    tableContentRef,\n    tableHeadRef,\n    tablePanelRef,\n    tableRef,\n    tableStore,\n    tableWrapperClass\n  }\n}\n\nexport const useTableScroll = ({\n  content,\n  selectedItem,\n  isAllVersions,\n  tableId = MAIN_TABLE_ID\n}) => {\n  const lastSelectedItemDataRef = useRef(null)\n  const itemIdentifierKey = useMemo(\n    () => (isAllVersions ? 'identifierUnique' : 'identifier'),\n    [isAllVersions]\n  )\n\n  const handleSelectItemChanges = useCallback(\n    (identifier, content, async = false) => {\n      const selectedItemIndex = content?.findIndex(\n        item => item?.ui?.[itemIdentifierKey] === identifier\n      )\n\n      const triggerScroll = () => {\n        const tableElement = document.getElementById(tableId)\n\n        if (selectedItemIndex && tableElement) {\n          const rows = tableElement.getElementsByTagName('tr')\n\n          if (selectedItemIndex <= rows.length) {\n            const theadHeight =\n              tableElement.querySelector('thead')?.getBoundingClientRect().height ?? 0\n            const rowRect = rows[selectedItemIndex].getBoundingClientRect()\n            const tableRect = tableElement.getBoundingClientRect()\n            const rowCenterY = rowRect.height / 2\n            const tableCenterY = (tableRect.height - theadHeight) / 2\n            const heightToRow = rowRect.height * (selectedItemIndex + 1)\n            const scrollY = heightToRow - rowCenterY - tableCenterY\n\n            tableElement.scrollTo({\n              top: scrollY\n            })\n          }\n        }\n      }\n\n      if (selectedItemIndex >= 0) {\n        if (async) {\n          requestAnimationFrame(() => {\n            triggerScroll()\n          })\n        } else {\n          triggerScroll()\n        }\n      }\n    },\n    [itemIdentifierKey, tableId]\n  )\n\n  useEffect(() => {\n    try {\n      if (!isEmpty(selectedItem)) {\n        if (!lastSelectedItemDataRef.current) {\n          lastSelectedItemDataRef.current = selectedItem.ui\n          handleSelectItemChanges(selectedItem?.ui?.[itemIdentifierKey], content, true)\n        } else {\n          lastSelectedItemDataRef.current = selectedItem.ui\n        }\n      } else if (lastSelectedItemDataRef.current) {\n        handleSelectItemChanges(lastSelectedItemDataRef.current?.[itemIdentifierKey], content)\n\n        lastSelectedItemDataRef.current = null\n      }\n    } catch {\n      lastSelectedItemDataRef.current = null\n    }\n  }, [selectedItem, content, handleSelectItemChanges, itemIdentifierKey])\n\n  useEffect(() => {\n    return () => {\n      lastSelectedItemDataRef.current = null\n    }\n  }, [content])\n}\n"],"names":["TableContainer","children","hideActionsMenu","mainRowItemsCount","pageData","renderDetails","selectedItem","sortProps","tableBodyRef","tableClass","tableContentRef","tableHeadRef","tableHeaders","tablePanelRef","tableRef","tableStore","tableWrapperClass","virtualizationConfig","jsx","jsxs","MAIN_TABLE_ID","TableHead","MAIN_TABLE_BODY_ID","PropTypes","SORT_PROPS","VIRTUALIZATION_CONFIG","useTable","ref","skipTableWrapper","tableClassName","tableRefLocal","useRef","tableBodyRefLocal","useSelector","store","classnames","isEmpty","useEffect","calculatePanelHeight","tableContentHeight","tableHeadCords","panelHeight","handleTableHScroll","useCallback","e","useTableScroll","content","isAllVersions","tableId","lastSelectedItemDataRef","itemIdentifierKey","useMemo","handleSelectItemChanges","identifier","async","selectedItemIndex","item","_a","triggerScroll","tableElement","rows","theadHeight","rowRect","tableRect","rowCenterY","tableCenterY","scrollY","_b"],"mappings":"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"}

package/dist/scss/common.scss

@@ -221,6 +221,8 @@ a {
   min-width: 800px;
   padding: 15px 24px 10px;
   background-color: colors.$white;
+  overflow: auto;
+  min-height: 0;
 
   @include mixins.displayFlex;
 
@@ -263,12 +265,14 @@ a {
     flex: 1 1;
     flex-direction: column;
     min-width: 100%;
+    min-height: 0;
   }
 
   &__action-bar-wrapper {
     display: flex;
     flex-flow: row wrap;
     align-items: center;
+    background-color: colors.$white;
 
     &_hidden {
       display: none;
@@ -283,27 +287,6 @@ a {
         white-space: nowrap;
       }
     }
-
-    .action-bar {
-      display: flex;
-      flex: 1;
-      align-items: flex-start;
-      justify-content: flex-end;
-      width: 100%;
-      margin-bottom: 15px;
-
-      &_hidden {
-        display: none;
-      }
-
-      &__filters {
-        &-item {
-          &:not(:last-child) {
-            margin: 0 15px 0 0;
-          }
-        }
-      }
-    }
   }
 
   &__history-back-link-wrapper {
@@ -313,6 +296,27 @@ a {
       max-width: 100%;
     }
   }
+
+  .action-bar {
+    display: flex;
+    flex: 1;
+    align-items: flex-start;
+    justify-content: flex-end;
+    width: 100%;
+    margin-bottom: 15px;
+
+    &_hidden {
+      display: none;
+    }
+
+    &__filters {
+      &-item {
+        &:not(:last-child) {
+          margin: 0 15px 0 0;
+        }
+      }
+    }
+  }
 }
 
 /* =========== CONTENT MENU ============= */

package/dist/utils/form.util.d.ts

@@ -8,4 +8,5 @@ export function parseObjectToKeyValue(object?: {}): {
     };
 }[];
 export function isSubmitDisabled(formState: any): any;
+export function clearArrayFromEmptyObjectElements(arr?: any[]): any[];
 //# sourceMappingURL=form.util.d.ts.map

package/dist/utils/form.util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.util.d.ts","sourceRoot":"","sources":["../../src/lib/utils/form.util.js"],"names":[],"mappings":"AAkBO,2DAUN;AAEM,+EAaN;AAEM,sEAMN;AAEM;;;;;IASN;AAEM,sDAEN"}
+{"version":3,"file":"form.util.d.ts","sourceRoot":"","sources":["../../src/lib/utils/form.util.js"],"names":[],"mappings":"AAkBO,2DAUN;AAEM,+EAaN;AAEM,sEAMN;AAEM;;;;;IASN;AAEM,sDAEN;AAUM,sEAIN"}

package/dist/utils/form.util.mjs

@@ -1,10 +1,10 @@
-import { set as u, isEqual as l, mapValues as d, some as m, get as c, isNil as o, isEmpty as f } from "lodash";
-const p = (e, t) => {
+import { set as u, isEqual as l, mapValues as m, some as c, get as d, isNil as o, isEmpty as y } from "lodash";
+const b = (e, t) => {
   let r = e[0], i = e[1], n = t.fields[r];
   if (n)
     for (let s in i)
       u(n, s, i[s]);
-}, b = (e, t) => {
+}, O = (e, t) => {
   const r = (i, n) => {
     if (n !== "")
       return n;
@@ -13,17 +13,18 @@ const p = (e, t) => {
     JSON.stringify(a(e), r),
     JSON.stringify(a(t), r)
   );
-}, O = (e = []) => e.reduce((t, r) => (t[r.data.key] = r.data.value, t), {}), g = (e = {}) => Object.entries(e).map(([t, r]) => ({
+}, F = (e = []) => e.reduce((t, r) => (t[r.data.key] = r.data.value, t), {}), g = (e = {}) => Object.entries(e).map(([t, r]) => ({
   data: {
     key: t,
     value: r
   }
-})), F = (e) => e.submitting || e.invalid && e.submitFailed, a = (e = {}) => d(e, (t) => Array.isArray(t) ? t.filter((r) => m(c(r, "data", r), (i) => !o(i) && !f(i))) : t);
+})), E = (e) => e.submitting || e.invalid && e.submitFailed, a = (e = {}) => m(e, (t) => Array.isArray(t) ? f(t) : t), f = (e = []) => e.filter((t) => c(d(t, "data", t), (r) => !o(r) && !y(r)));
 export {
-  b as areFormValuesChanged,
-  O as generateObjectFromKeyValue,
-  F as isSubmitDisabled,
+  O as areFormValuesChanged,
+  f as clearArrayFromEmptyObjectElements,
+  F as generateObjectFromKeyValue,
+  E as isSubmitDisabled,
   g as parseObjectToKeyValue,
-  p as setFieldState
+  b as setFieldState
 };
 //# sourceMappingURL=form.util.mjs.map

package/dist/utils/form.util.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"form.util.mjs","sources":["../../src/lib/utils/form.util.js"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport { get, isEmpty, isEqual, isNil, mapValues, set, some } from 'lodash'\n\nexport const setFieldState = (args, state) => {\n  let fieldName = args[0]\n  let states = args[1]\n  let field = state.fields[fieldName]\n\n  if (field) {\n    for (let stateName in states) {\n      set(field, stateName, states[stateName])\n    }\n  }\n}\n\nexport const areFormValuesChanged = (initialValues, values) => {\n  const replacer = (key, value) => {\n    if (value === '') {\n      return undefined\n    }\n\n    return value\n  }\n\n  return !isEqual(\n    JSON.stringify(clearObjectFromEmptyArrayElements(initialValues), replacer),\n    JSON.stringify(clearObjectFromEmptyArrayElements(values), replacer)\n  )\n}\n\nexport const generateObjectFromKeyValue = (keyValueList = []) => {\n  return keyValueList.reduce((acc, keyValue) => {\n    acc[keyValue.data.key] = keyValue.data.value\n\n    return acc\n  }, {})\n}\n\nexport const parseObjectToKeyValue = (object = {}) => {\n  return Object.entries(object).map(([key, value]) => {\n    return {\n      data: {\n        key,\n        value\n      }\n    }\n  })\n}\n\nexport const isSubmitDisabled = formState => {\n  return formState.submitting || (formState.invalid && formState.submitFailed)\n}\n\nconst clearObjectFromEmptyArrayElements = (obj = {}) => {\n  return mapValues(obj, objValue => {\n    if (!Array.isArray(objValue)) return objValue\n\n    return objValue.filter(arrayElement => {\n      return some(get(arrayElement, 'data', arrayElement), val => !isNil(val) && !isEmpty(val))\n    })\n  })\n}\n"],"names":["setFieldState","args","state","fieldName","states","field","stateName","set","areFormValuesChanged","initialValues","values","replacer","key","value","isEqual","clearObjectFromEmptyArrayElements","generateObjectFromKeyValue","keyValueList","acc","keyValue","parseObjectToKeyValue","object","isSubmitDisabled","formState","obj","mapValues","objValue","arrayElement","some","get","val","isNil","isEmpty"],"mappings":";AAkBY,MAACA,IAAgB,CAACC,GAAMC,MAAU;AAC5C,MAAIC,IAAYF,EAAK,CAAC,GAClBG,IAASH,EAAK,CAAC,GACfI,IAAQH,EAAM,OAAOC,CAAS;AAElC,MAAIE;AACF,aAASC,KAAaF;AACpB,MAAAG,EAAIF,GAAOC,GAAWF,EAAOE,CAAS,CAAC;AAG7C,GAEaE,IAAuB,CAACC,GAAeC,MAAW;AAC7D,QAAMC,IAAW,CAACC,GAAKC,MAAU;AAC/B,QAAIA,MAAU;AAId,aAAOA;AAAA,EACX;AAEE,SAAO,CAACC;AAAA,IACN,KAAK,UAAUC,EAAkCN,CAAa,GAAGE,CAAQ;AAAA,IACzE,KAAK,UAAUI,EAAkCL,CAAM,GAAGC,CAAQ;AAAA,EACtE;AACA,GAEaK,IAA6B,CAACC,IAAe,OACjDA,EAAa,OAAO,CAACC,GAAKC,OAC/BD,EAAIC,EAAS,KAAK,GAAG,IAAIA,EAAS,KAAK,OAEhCD,IACN,CAAE,CAAA,GAGME,IAAwB,CAACC,IAAS,OACtC,OAAO,QAAQA,CAAM,EAAE,IAAI,CAAC,CAACT,GAAKC,CAAK,OACrC;AAAA,EACL,MAAM;AAAA,IACJ,KAAAD;AAAA,IACA,OAAAC;AAAA,EACR;AACA,EACG,GAGUS,IAAmB,CAAAC,MACvBA,EAAU,cAAeA,EAAU,WAAWA,EAAU,cAG3DR,IAAoC,CAACS,IAAM,OACxCC,EAAUD,GAAK,CAAAE,MACf,MAAM,QAAQA,CAAQ,IAEpBA,EAAS,OAAO,CAAAC,MACdC,EAAKC,EAAIF,GAAc,QAAQA,CAAY,GAAG,CAAAG,MAAO,CAACC,EAAMD,CAAG,KAAK,CAACE,EAAQF,CAAG,CAAC,CACzF,IAJoCJ,CAKtC;"}
+{"version":3,"file":"form.util.mjs","sources":["../../src/lib/utils/form.util.js"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport { get, isEmpty, isEqual, isNil, mapValues, set, some } from 'lodash'\n\nexport const setFieldState = (args, state) => {\n  let fieldName = args[0]\n  let states = args[1]\n  let field = state.fields[fieldName]\n\n  if (field) {\n    for (let stateName in states) {\n      set(field, stateName, states[stateName])\n    }\n  }\n}\n\nexport const areFormValuesChanged = (initialValues, values) => {\n  const replacer = (key, value) => {\n    if (value === '') {\n      return undefined\n    }\n\n    return value\n  }\n\n  return !isEqual(\n    JSON.stringify(clearObjectFromEmptyArrayElements(initialValues), replacer),\n    JSON.stringify(clearObjectFromEmptyArrayElements(values), replacer)\n  )\n}\n\nexport const generateObjectFromKeyValue = (keyValueList = []) => {\n  return keyValueList.reduce((acc, keyValue) => {\n    acc[keyValue.data.key] = keyValue.data.value\n\n    return acc\n  }, {})\n}\n\nexport const parseObjectToKeyValue = (object = {}) => {\n  return Object.entries(object).map(([key, value]) => {\n    return {\n      data: {\n        key,\n        value\n      }\n    }\n  })\n}\n\nexport const isSubmitDisabled = formState => {\n  return formState.submitting || (formState.invalid && formState.submitFailed)\n}\n\nconst clearObjectFromEmptyArrayElements = (obj = {}) => {\n  return mapValues(obj, objValue => {\n    if (!Array.isArray(objValue)) return objValue\n\n    return clearArrayFromEmptyObjectElements(objValue)\n  })\n}\n\nexport const clearArrayFromEmptyObjectElements = (arr = []) => {\n  return arr.filter(arrayElement => {\n    return some(get(arrayElement, 'data', arrayElement), val => !isNil(val) && !isEmpty(val))\n  })\n}\n"],"names":["setFieldState","args","state","fieldName","states","field","stateName","set","areFormValuesChanged","initialValues","values","replacer","key","value","isEqual","clearObjectFromEmptyArrayElements","generateObjectFromKeyValue","keyValueList","acc","keyValue","parseObjectToKeyValue","object","isSubmitDisabled","formState","obj","mapValues","objValue","clearArrayFromEmptyObjectElements","arr","arrayElement","some","get","val","isNil","isEmpty"],"mappings":";AAkBY,MAACA,IAAgB,CAACC,GAAMC,MAAU;AAC5C,MAAIC,IAAYF,EAAK,CAAC,GAClBG,IAASH,EAAK,CAAC,GACfI,IAAQH,EAAM,OAAOC,CAAS;AAElC,MAAIE;AACF,aAASC,KAAaF;AACpB,MAAAG,EAAIF,GAAOC,GAAWF,EAAOE,CAAS,CAAC;AAG7C,GAEaE,IAAuB,CAACC,GAAeC,MAAW;AAC7D,QAAMC,IAAW,CAACC,GAAKC,MAAU;AAC/B,QAAIA,MAAU;AAId,aAAOA;AAAA,EACX;AAEE,SAAO,CAACC;AAAA,IACN,KAAK,UAAUC,EAAkCN,CAAa,GAAGE,CAAQ;AAAA,IACzE,KAAK,UAAUI,EAAkCL,CAAM,GAAGC,CAAQ;AAAA,EACtE;AACA,GAEaK,IAA6B,CAACC,IAAe,OACjDA,EAAa,OAAO,CAACC,GAAKC,OAC/BD,EAAIC,EAAS,KAAK,GAAG,IAAIA,EAAS,KAAK,OAEhCD,IACN,CAAE,CAAA,GAGME,IAAwB,CAACC,IAAS,OACtC,OAAO,QAAQA,CAAM,EAAE,IAAI,CAAC,CAACT,GAAKC,CAAK,OACrC;AAAA,EACL,MAAM;AAAA,IACJ,KAAAD;AAAA,IACA,OAAAC;AAAA,EACR;AACA,EACG,GAGUS,IAAmB,CAAAC,MACvBA,EAAU,cAAeA,EAAU,WAAWA,EAAU,cAG3DR,IAAoC,CAACS,IAAM,OACxCC,EAAUD,GAAK,CAAAE,MACf,MAAM,QAAQA,CAAQ,IAEpBC,EAAkCD,CAAQ,IAFZA,CAGtC,GAGUC,IAAoC,CAACC,IAAM,OAC/CA,EAAI,OAAO,CAAAC,MACTC,EAAKC,EAAIF,GAAc,QAAQA,CAAY,GAAG,CAAAG,MAAO,CAACC,EAAMD,CAAG,KAAK,CAACE,EAAQF,CAAG,CAAC,CACzF;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iguazio.dashboard-react-controls",
-    "version": "3.1.6",
+    "version": "3.1.8",
     "description": "Collection of resources (such as CSS styles, fonts and images) and ReactJS 17.x components to share among different Iguazio React repos.",
     "module": "./dist/index.mjs",
     "main": "./dist/index.mjs",