@databiosphere/findable-ui 6.0.0 → 7.0.0

package/lib/components/Table/components/TableToolbar/tableToolbar.js

@@ -1,48 +1,22 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableToolbar = void 0;
-const react_1 = __importStar(require("react"));
-const useExploreState_1 = require("../../../../hooks/useExploreState");
-const entities_1 = require("../../common/entities");
-const utils_1 = require("../../common/utils");
-const checkboxMenu_1 = require("../CheckboxMenu/checkboxMenu");
-const downloadEntityResults_1 = require("../DownloadEntityResults/downloadEntityResults");
-const paginationSummary_1 = require("../PaginationSummary/paginationSummary");
-const rowPreview_1 = require("./components/RowPreview/rowPreview");
-const rowSelection_1 = require("./components/RowSelection/rowSelection");
-const tableToolbar_styles_1 = require("./tableToolbar.styles");
-const TableToolbar = ({ listView, rowDirection, tableInstance, }) => {
-    const { exploreState } = (0, useExploreState_1.useExploreState)();
+import React, { Fragment } from "react";
+import { useExploreState } from "../../../../hooks/useExploreState";
+import { ROW_DIRECTION } from "../../common/entities";
+import { getEditColumnOptions, isAnyRowSelected } from "../../common/utils";
+import { CheckboxMenu } from "../CheckboxMenu/checkboxMenu";
+import { DownloadEntityResults } from "../DownloadEntityResults/downloadEntityResults";
+import { PaginationSummary } from "../PaginationSummary/paginationSummary";
+import { RowPreview } from "./components/RowPreview/rowPreview";
+import { RowSelection } from "./components/RowSelection/rowSelection";
+import { Toolbar, ToolbarActions } from "./tableToolbar.styles";
+export const TableToolbar = ({ listView, rowDirection, tableInstance, }) => {
+    const { exploreState } = useExploreState();
     const { paginationState } = exploreState;
     const { currentPage, pages, pageSize, rows } = paginationState;
     const { getSelectedRowModel, resetColumnVisibility } = tableInstance;
     const { enableDownload, rowPreviewView } = listView || {};
     const isLastPage = currentPage === pages;
-    const editColumnOptions = (0, utils_1.getEditColumnOptions)(tableInstance);
-    const showToolbar = rowDirection === entities_1.ROW_DIRECTION.DEFAULT &&
+    const editColumnOptions = getEditColumnOptions(tableInstance);
+    const showToolbar = rowDirection === ROW_DIRECTION.DEFAULT &&
         (editColumnOptions || enableDownload);
     /**
      * Resets column visibility to default state.
@@ -50,12 +24,11 @@ const TableToolbar = ({ listView, rowDirection, tableInstance, }) => {
     const onResetColumnVisibility = () => {
         resetColumnVisibility(false);
     };
-    return (react_1.default.createElement(react_1.Fragment, null,
-        showToolbar && (react_1.default.createElement(tableToolbar_styles_1.Toolbar, { variant: "table" },
-            (0, utils_1.isAnyRowSelected)(tableInstance) ? (react_1.default.createElement(rowSelection_1.RowSelection, { rows: getSelectedRowModel().rows, rowSelectionView: listView === null || listView === void 0 ? void 0 : listView.rowSelectionView })) : (react_1.default.createElement(paginationSummary_1.PaginationSummary, { firstResult: (currentPage - 1) * pageSize + 1, lastResult: isLastPage ? rows : pageSize * currentPage, totalResult: rows })),
-            react_1.default.createElement(tableToolbar_styles_1.ToolbarActions, null,
-                enableDownload && (react_1.default.createElement(downloadEntityResults_1.DownloadEntityResults, { entityName: exploreState.tabValue, rows: tableInstance.getFilteredRowModel().rows })),
-                react_1.default.createElement(checkboxMenu_1.CheckboxMenu, { label: "Edit Columns", onReset: onResetColumnVisibility, options: editColumnOptions })))),
-        react_1.default.createElement(rowPreview_1.RowPreview, { rowPreviewView: rowPreviewView, tableInstance: tableInstance })));
+    return (React.createElement(Fragment, null,
+        showToolbar && (React.createElement(Toolbar, { variant: "table" },
+            isAnyRowSelected(tableInstance) ? (React.createElement(RowSelection, { rows: getSelectedRowModel().rows, rowSelectionView: listView?.rowSelectionView })) : (React.createElement(PaginationSummary, { firstResult: (currentPage - 1) * pageSize + 1, lastResult: isLastPage ? rows : pageSize * currentPage, totalResult: rows })),
+            React.createElement(ToolbarActions, null,
+                enableDownload && (React.createElement(DownloadEntityResults, { entityName: exploreState.tabValue, rows: tableInstance.getFilteredRowModel().rows })),
+                React.createElement(CheckboxMenu, { label: "Edit Columns", onReset: onResetColumnVisibility, options: editColumnOptions })))),
+        React.createElement(RowPreview, { rowPreviewView: rowPreviewView, tableInstance: tableInstance })));
 };
-exports.TableToolbar = TableToolbar;

package/lib/components/Table/components/TableToolbar/tableToolbar.styles.js

@@ -1,23 +1,17 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolbarActions = exports.Toolbar = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const colors_1 = require("../../../../styles/common/mixins/colors");
-const grid_1 = require("../../../common/Grid/grid");
-exports.Toolbar = (0, styled_1.default)(material_1.Toolbar) `
+import styled from "@emotion/styled";
+import { Toolbar as MToolbar } from "@mui/material";
+import { white } from "../../../../styles/common/mixins/colors";
+import { Grid } from "../../../common/Grid/grid";
+export const Toolbar = styled(MToolbar) `
   &.MuiToolbar-table {
     align-items: center;
-    background-color: ${colors_1.white};
+    background-color: ${white};
     display: flex;
     justify-content: space-between;
     padding: 20px;
   }
 `;
-exports.ToolbarActions = (0, styled_1.default)(grid_1.Grid) `
+export const ToolbarActions = styled(Grid) `
   gap: 8px;
   grid-auto-flow: column;
 `;

package/lib/components/Table/features/RowPreview/constants.js

@@ -1,45 +1,44 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ROW_PREVIEW = void 0;
-const react_table_1 = require("@tanstack/react-table");
-const utils_1 = require("./utils");
-exports.ROW_PREVIEW = {
+import { functionalUpdate, makeStateUpdater, } from "@tanstack/react-table";
+import { getIsPreview, getIsRowPreview, getRowPreviewRow, togglePreview, toggleRowPreview, } from "./utils";
+export const ROW_PREVIEW = {
     createRow: (row, table) => {
         row.getIsPreview = () => {
-            return (0, utils_1.getIsPreview)(row, table);
+            return getIsPreview(row, table);
         };
         row.togglePreview = () => {
-            (0, utils_1.togglePreview)(row, table);
+            togglePreview(row, table);
         };
     },
     createTable: (table) => {
         table.getIsRowPreview = () => {
-            return (0, utils_1.getIsRowPreview)(table);
+            return getIsRowPreview(table);
         };
         table.getRowPreviewRow = () => {
-            return (0, utils_1.getRowPreviewRow)(table);
+            return getRowPreviewRow(table);
         };
         table.resetRowPreview = () => {
             table.setRowPreview(undefined);
         };
         table.setRowPreview = (updater) => {
-            var _a, _b;
             const safeUpdater = (old) => {
-                return (0, react_table_1.functionalUpdate)(updater, old);
+                return functionalUpdate(updater, old);
             };
-            return (_b = (_a = table.options).onRowPreviewChange) === null || _b === void 0 ? void 0 : _b.call(_a, safeUpdater);
+            return table.options.onRowPreviewChange?.(safeUpdater);
         };
         table.toggleRowPreview = () => {
-            (0, utils_1.toggleRowPreview)(table);
+            toggleRowPreview(table);
         };
     },
     getDefaultOptions: (table) => {
         return {
             enableRowPreview: true,
-            onRowPreviewChange: (0, react_table_1.makeStateUpdater)("rowPreview", table),
+            onRowPreviewChange: makeStateUpdater("rowPreview", table),
         };
     },
     getInitialState: (initialState) => {
-        return Object.assign(Object.assign({}, initialState), { rowPreview: undefined });
+        return {
+            ...initialState,
+            rowPreview: undefined,
+        };
     },
 };

package/lib/components/Table/features/RowPreview/entities.js

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

package/lib/components/Table/features/RowPreview/utils.js

@@ -1,13 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toggleRowPreview = exports.togglePreview = exports.getRowPreviewRow = exports.getIsRowPreview = exports.getIsPreview = void 0;
 /**
  * Returns true if the row is selected for preview.
  * @param row - Row.
  * @param table - Table.
  * @returns true if the row is selected for preview.
  */
-function getIsPreview(row, table) {
+export function getIsPreview(row, table) {
     const keyValue = getRowPreviewKeyValue(table);
     if (!keyValue)
         return false;
@@ -16,26 +13,24 @@ function getIsPreview(row, table) {
         return false;
     return key === row.id;
 }
-exports.getIsPreview = getIsPreview;
 /**
  * Returns true if any row is selected for preview.
  * @param table - Table.
  * @returns true if any row is selected for preview.
  */
-function getIsRowPreview(table) {
+export function getIsRowPreview(table) {
     const keyValue = getRowPreviewKeyValue(table);
     if (!keyValue)
         return false;
     const [, value] = keyValue;
     return value;
 }
-exports.getIsRowPreview = getIsRowPreview;
 /**
  * Returns row selected for preview. Row data is returned even if the row is no longer "previewed" i.e. selected for preview.
  * @param table - Table.
  * @returns row selected for preview.
  */
-function getRowPreviewRow(table) {
+export function getRowPreviewRow(table) {
     const keyValue = getRowPreviewKeyValue(table);
     if (!keyValue)
         return;
@@ -45,7 +40,6 @@ function getRowPreviewRow(table) {
     const rowsById = table.getRowModel().rowsById;
     return rowsById[key];
 }
-exports.getRowPreviewRow = getRowPreviewRow;
 /**
  * Returns the key, value tuple of the row selected for preview.
  * @param table - Table.
@@ -66,19 +60,18 @@ function getRowPreviewKeyValue(table) {
  * @param row - Row.
  * @param table - Table.
  */
-function togglePreview(row, table) {
+export function togglePreview(row, table) {
     if (row.getIsPreview()) {
         table.toggleRowPreview();
         return;
     }
     table.setRowPreview({ [row.id]: true });
 }
-exports.togglePreview = togglePreview;
 /**
  * Toggles the preview state of any row selected for preview.
  * @param table - Table.
  */
-function toggleRowPreview(table) {
+export function toggleRowPreview(table) {
     const keyValue = getRowPreviewKeyValue(table);
     if (!keyValue) {
         return;
@@ -86,4 +79,3 @@ function toggleRowPreview(table) {
     const [key, value] = keyValue;
     table.setRowPreview({ [key]: !value });
 }
-exports.toggleRowPreview = toggleRowPreview;

package/lib/components/Table/features/entities.js

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

package/lib/components/Table/table.js

@@ -1,51 +1,25 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Table = exports.TableComponent = void 0;
-const material_1 = require("@mui/material");
-const react_table_1 = require("@tanstack/react-table");
-const react_1 = __importStar(require("react"));
-const analytics_1 = require("../../common/analytics/analytics");
-const entities_1 = require("../../common/analytics/entities");
-const useBreakpointHelper_1 = require("../../hooks/useBreakpointHelper");
-const useExploreMode_1 = require("../../hooks/useExploreMode");
-const useExploreState_1 = require("../../hooks/useExploreState");
-const useScroll_1 = require("../../hooks/useScroll");
-const exploreState_1 = require("../../providers/exploreState");
-const constants_1 = require("../../providers/exploreState/initializer/constants");
-const breakpoints_1 = require("../../theme/common/breakpoints");
-const paper_styles_1 = require("../common/Paper/paper.styles");
-const noResults_1 = require("../NoResults/noResults");
-const entities_2 = require("./common/entities");
-const utils_1 = require("./common/utils");
-const pagination_1 = require("./components/Pagination/pagination");
-const tableBody_1 = require("./components/TableBody/tableBody");
-const tableHead_1 = require("./components/TableHead/tableHead");
-const tableToolbar_1 = require("./components/TableToolbar/tableToolbar");
-const constants_2 = require("./features/RowPreview/constants");
-const table_styles_1 = require("./table.styles");
+import { TableContainer } from "@mui/material";
+import { getCoreRowModel, getFacetedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
+import React, { useEffect, useMemo } from "react";
+import { track } from "../../common/analytics/analytics";
+import { EVENT_NAME, EVENT_PARAM, PAGINATION_DIRECTION, SORT_DIRECTION, } from "../../common/analytics/entities";
+import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../hooks/useBreakpointHelper";
+import { useExploreMode } from "../../hooks/useExploreMode";
+import { useExploreState } from "../../hooks/useExploreState";
+import { useScroll } from "../../hooks/useScroll";
+import { ExploreActionKind } from "../../providers/exploreState";
+import { DEFAULT_PAGINATION_STATE } from "../../providers/exploreState/initializer/constants";
+import { TABLET } from "../../theme/common/breakpoints";
+import { FluidPaper, GridPaper } from "../common/Paper/paper.styles";
+import { NoResults } from "../NoResults/noResults";
+import { ROW_DIRECTION } from "./common/entities";
+import { buildCategoryViews, getFacetedUniqueValuesWithArrayValues, getGridTemplateColumns, getTableStatePagination, isClientFilteringEnabled, } from "./common/utils";
+import { Pagination as DXPagination } from "./components/Pagination/pagination";
+import { TableBody } from "./components/TableBody/tableBody";
+import { TableHead } from "./components/TableHead/tableHead";
+import { TableToolbar } from "./components/TableToolbar/tableToolbar";
+import { ROW_PREVIEW } from "./features/RowPreview/constants";
+import { GridTable } from "./table.styles";
 /**
  * This table can be Controlled or Uncontrolled based on the set of props passed to it.
  * Controlled table will receive the navigation functions, and it will be used for dynamic loads.
@@ -58,49 +32,49 @@ const table_styles_1 = require("./table.styles");
  * @param tableProps.listView - List view configuration.
  * @returns Configured table element for display.
  */
-const TableComponent = ({ columns, getRowId, initialState, items, listView, }) => {
-    const tabletDown = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.DOWN, breakpoints_1.TABLET);
-    const exploreMode = (0, useExploreMode_1.useExploreMode)();
-    const { exploreDispatch, exploreState } = (0, useExploreState_1.useExploreState)();
+export const TableComponent = ({ columns, getRowId, initialState, items, listView, }) => {
+    const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
+    const exploreMode = useExploreMode();
+    const { exploreDispatch, exploreState } = useExploreState();
     const { entityPageState, filterState, listItems, loading, paginationState, rowPreview, tabValue, } = exploreState;
     const { columnsVisibility, enableRowSelection, rowSelection, sorting } = entityPageState[tabValue];
     const { currentPage, pages, pageSize, rows: pageCount } = paginationState;
     const { disablePagination = false, enableRowPreview = false } = listView || {};
-    const clientFiltering = (0, utils_1.isClientFilteringEnabled)(exploreMode);
+    const clientFiltering = isClientFilteringEnabled(exploreMode);
     const rowDirection = tabletDown
-        ? entities_2.ROW_DIRECTION.VERTICAL
-        : entities_2.ROW_DIRECTION.DEFAULT;
-    const pagination = (0, react_1.useMemo)(() => (0, utils_1.getTableStatePagination)(currentPage - 1, pageSize), [currentPage, pageSize]);
+        ? ROW_DIRECTION.VERTICAL
+        : ROW_DIRECTION.DEFAULT;
+    const pagination = useMemo(() => getTableStatePagination(currentPage - 1, pageSize), [currentPage, pageSize]);
     const onSortingChange = (updater) => {
         exploreDispatch({
             payload: typeof updater === "function" ? updater(sorting) : updater,
-            type: exploreState_1.ExploreActionKind.UpdateSorting,
+            type: ExploreActionKind.UpdateSorting,
         });
         // Execute GTM tracking.
-        (0, analytics_1.track)(entities_1.EVENT_NAME.ENTITY_TABLE_SORTED, {
-            [entities_1.EVENT_PARAM.ENTITY_NAME]: exploreState.tabValue,
-            [entities_1.EVENT_PARAM.COLUMN_NAME]: sorting[0].id,
-            [entities_1.EVENT_PARAM.SORT_DIRECTION]: sorting[0].desc
-                ? entities_1.SORT_DIRECTION.DESC
-                : entities_1.SORT_DIRECTION.ASC,
+        track(EVENT_NAME.ENTITY_TABLE_SORTED, {
+            [EVENT_PARAM.ENTITY_NAME]: exploreState.tabValue,
+            [EVENT_PARAM.COLUMN_NAME]: sorting[0].id,
+            [EVENT_PARAM.SORT_DIRECTION]: sorting[0].desc
+                ? SORT_DIRECTION.DESC
+                : SORT_DIRECTION.ASC,
         });
     };
     const onColumnVisibilityChange = (updater) => {
         exploreDispatch({
             payload: typeof updater === "function" ? updater(columnsVisibility) : updater,
-            type: exploreState_1.ExploreActionKind.UpdateColumnVisibility,
+            type: ExploreActionKind.UpdateColumnVisibility,
         });
     };
     const onRowPreviewChange = (updater) => {
         exploreDispatch({
             payload: typeof updater === "function" ? updater(rowPreview) : updater,
-            type: exploreState_1.ExploreActionKind.UpdateRowPreview,
+            type: ExploreActionKind.UpdateRowPreview,
         });
     };
     const onRowSelectionChange = (updater) => {
         exploreDispatch({
             payload: typeof updater === "function" ? updater(rowSelection) : updater,
-            type: exploreState_1.ExploreActionKind.UpdateRowSelection,
+            type: ExploreActionKind.UpdateRowSelection,
         });
     };
     const state = {
@@ -110,8 +84,8 @@ const TableComponent = ({ columns, getRowId, initialState, items, listView, }) =
         rowSelection,
         sorting,
     };
-    const tableInstance = (0, react_table_1.useReactTable)({
-        _features: [constants_2.ROW_PREVIEW],
+    const tableInstance = useReactTable({
+        _features: [ROW_PREVIEW],
         columns,
         data: items,
         enableColumnFilters: true,
@@ -121,15 +95,15 @@ const TableComponent = ({ columns, getRowId, initialState, items, listView, }) =
         enableRowSelection,
         enableSorting: true,
         enableSortingRemoval: false,
-        getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
-        getFacetedRowModel: clientFiltering ? (0, react_table_1.getFacetedRowModel)() : undefined,
+        getCoreRowModel: getCoreRowModel(),
+        getFacetedRowModel: clientFiltering ? getFacetedRowModel() : undefined,
         getFacetedUniqueValues: clientFiltering
-            ? (0, utils_1.getFacetedUniqueValuesWithArrayValues)()
+            ? getFacetedUniqueValuesWithArrayValues()
             : undefined,
-        getFilteredRowModel: clientFiltering ? (0, react_table_1.getFilteredRowModel)() : undefined,
-        getPaginationRowModel: (0, react_table_1.getPaginationRowModel)(),
+        getFilteredRowModel: clientFiltering ? getFilteredRowModel() : undefined,
+        getPaginationRowModel: getPaginationRowModel(),
         getRowId,
-        getSortedRowModel: clientFiltering ? (0, react_table_1.getSortedRowModel)() : undefined,
+        getSortedRowModel: clientFiltering ? getSortedRowModel() : undefined,
         initialState,
         manualPagination: true,
         manualSorting: !clientFiltering,
@@ -145,22 +119,22 @@ const TableComponent = ({ columns, getRowId, initialState, items, listView, }) =
     const { columnFilters } = getState();
     const { rows: results } = getRowModel();
     const noResults = !loading && (!results || results.length === 0);
-    const scrollTop = (0, useScroll_1.useScroll)();
+    const scrollTop = useScroll();
     const visibleColumns = getVisibleFlatColumns();
-    const gridTemplateColumns = (0, utils_1.getGridTemplateColumns)(visibleColumns);
+    const gridTemplateColumns = getGridTemplateColumns(visibleColumns);
     const handleTableNextPage = () => {
         let nextPage = tableNextPage;
         if (!clientFiltering) {
             nextPage = () => {
                 exploreDispatch({
                     payload: "next",
-                    type: exploreState_1.ExploreActionKind.PaginateTable,
+                    type: ExploreActionKind.PaginateTable,
                 });
             };
             // Execute GTM tracking.
-            (0, analytics_1.track)(entities_1.EVENT_NAME.ENTITY_TABLE_PAGINATED, {
-                [entities_1.EVENT_PARAM.ENTITY_NAME]: exploreState.tabValue,
-                [entities_1.EVENT_PARAM.PAGINATION_DIRECTION]: entities_1.PAGINATION_DIRECTION.NEXT,
+            track(EVENT_NAME.ENTITY_TABLE_PAGINATED, {
+                [EVENT_PARAM.ENTITY_NAME]: exploreState.tabValue,
+                [EVENT_PARAM.PAGINATION_DIRECTION]: PAGINATION_DIRECTION.NEXT,
             });
         }
         nextPage();
@@ -172,19 +146,19 @@ const TableComponent = ({ columns, getRowId, initialState, items, listView, }) =
             previousPage = () => {
                 exploreDispatch({
                     payload: "prev",
-                    type: exploreState_1.ExploreActionKind.PaginateTable,
+                    type: ExploreActionKind.PaginateTable,
                 });
             };
-            (0, analytics_1.track)(entities_1.EVENT_NAME.ENTITY_TABLE_PAGINATED, {
-                [entities_1.EVENT_PARAM.ENTITY_NAME]: exploreState.tabValue,
-                [entities_1.EVENT_PARAM.PAGINATION_DIRECTION]: entities_1.PAGINATION_DIRECTION.PREV,
+            track(EVENT_NAME.ENTITY_TABLE_PAGINATED, {
+                [EVENT_PARAM.ENTITY_NAME]: exploreState.tabValue,
+                [EVENT_PARAM.PAGINATION_DIRECTION]: PAGINATION_DIRECTION.PREV,
             });
         }
         previousPage();
         scrollTop();
     };
     // Sets react table column filters `columnFilters` state - for client-side filtering only - with update of filterState.
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (clientFiltering) {
             tableInstance.setColumnFilters(filterState.map(({ categoryKey, value }) => ({
                 id: categoryKey,
@@ -193,7 +167,7 @@ const TableComponent = ({ columns, getRowId, initialState, items, listView, }) =
         }
     }, [clientFiltering, filterState, tableInstance]);
     // Process explore response - client-side filtering only.
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!listItems || listItems.length === 0)
             return;
         if (clientFiltering) {
@@ -201,10 +175,14 @@ const TableComponent = ({ columns, getRowId, initialState, items, listView, }) =
                 payload: {
                     listItems,
                     loading: false,
-                    paginationResponse: Object.assign(Object.assign({}, constants_1.DEFAULT_PAGINATION_STATE), { pageSize: results.length, rows: results.length }),
-                    selectCategories: (0, utils_1.buildCategoryViews)(allColumns, columnFilters),
+                    paginationResponse: {
+                        ...DEFAULT_PAGINATION_STATE,
+                        pageSize: results.length,
+                        rows: results.length,
+                    },
+                    selectCategories: buildCategoryViews(allColumns, columnFilters),
                 },
-                type: exploreState_1.ExploreActionKind.ProcessExploreResponse,
+                type: ExploreActionKind.ProcessExploreResponse,
             });
         }
     }, [
@@ -221,15 +199,14 @@ const TableComponent = ({ columns, getRowId, initialState, items, listView, }) =
     function canPreviousPage() {
         return currentPage > 1;
     }
-    return noResults ? (react_1.default.createElement(noResults_1.NoResults, { Paper: paper_styles_1.FluidPaper, title: "No Results found" })) : (react_1.default.createElement(paper_styles_1.FluidPaper, { variant: "table" },
-        react_1.default.createElement(paper_styles_1.GridPaper, null,
-            react_1.default.createElement(tableToolbar_1.TableToolbar, { listView: listView, rowDirection: rowDirection, tableInstance: tableInstance }),
-            react_1.default.createElement(material_1.TableContainer, null,
-                react_1.default.createElement(table_styles_1.GridTable, { collapsable: true, gridTemplateColumns: gridTemplateColumns },
-                    react_1.default.createElement(tableHead_1.TableHead, { rowDirection: rowDirection, tableInstance: tableInstance }),
-                    react_1.default.createElement(tableBody_1.TableBody, { rowDirection: rowDirection, tableInstance: tableInstance }))),
-            !disablePagination && (react_1.default.createElement(pagination_1.Pagination, { canNextPage: canNextPage(), canPreviousPage: canPreviousPage(), currentPage: currentPage, onNextPage: handleTableNextPage, onPreviousPage: handleTablePreviousPage, totalPage: pages !== null && pages !== void 0 ? pages : 0 })))));
+    return noResults ? (React.createElement(NoResults, { Paper: FluidPaper, title: "No Results found" })) : (React.createElement(FluidPaper, { variant: "table" },
+        React.createElement(GridPaper, null,
+            React.createElement(TableToolbar, { listView: listView, rowDirection: rowDirection, tableInstance: tableInstance }),
+            React.createElement(TableContainer, null,
+                React.createElement(GridTable, { collapsable: true, gridTemplateColumns: gridTemplateColumns },
+                    React.createElement(TableHead, { rowDirection: rowDirection, tableInstance: tableInstance }),
+                    React.createElement(TableBody, { rowDirection: rowDirection, tableInstance: tableInstance }))),
+            !disablePagination && (React.createElement(DXPagination, { canNextPage: canNextPage(), canPreviousPage: canPreviousPage(), currentPage: currentPage, onNextPage: handleTableNextPage, onPreviousPage: handleTablePreviousPage, totalPage: pages ?? 0 })))));
 };
-exports.TableComponent = TableComponent;
 // TODO(Dave) review whether memo is necessary - flash between tabs / loading state.
-exports.Table = react_1.default.memo(exports.TableComponent);
+export const Table = React.memo(TableComponent);

package/lib/components/Table/table.styles.js

@@ -1,20 +1,14 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridTable = void 0;
-const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../styles/common/mixins/breakpoints");
-const gridTable_styles_1 = require("./common/gridTable.styles");
-exports.GridTable = (0, styled_1.default)(gridTable_styles_1.GridTable, {
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { mediaTabletDown } from "../../styles/common/mixins/breakpoints";
+import { GridTable as Table } from "./common/gridTable.styles";
+export const GridTable = styled(Table, {
     shouldForwardProp: (prop) => prop !== "collapsable",
 }) `
   // Collapsable.
-  ${breakpoints_1.mediaTabletDown} {
+  ${mediaTabletDown} {
     ${({ collapsable }) => collapsable &&
-    (0, react_1.css) `
+    css `
         grid-template-columns: 1fr;
       `};
   }

package/lib/components/TableCreator/common/constants.js

@@ -1,19 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.COLUMN_CONFIGS = exports.ACCESSOR_KEYS = void 0;
-const rowSelectionCell_1 = require("../../Table/components/TableCell/components/RowSelectionCell/rowSelectionCell");
-exports.ACCESSOR_KEYS = {
+import { RowSelectionCell } from "../../Table/components/TableCell/components/RowSelectionCell/rowSelectionCell";
+export const ACCESSOR_KEYS = {
     SELECT: "select",
 };
-exports.COLUMN_CONFIGS = {
+export const COLUMN_CONFIGS = {
     SELECT: {
         columnPinned: false,
         columnVisible: false,
-        componentConfig: { component: rowSelectionCell_1.RowSelectionCell },
+        componentConfig: { component: RowSelectionCell },
         disableHiding: true,
         disableSorting: true,
-        header: exports.ACCESSOR_KEYS.SELECT,
-        id: exports.ACCESSOR_KEYS.SELECT,
+        header: ACCESSOR_KEYS.SELECT,
+        id: ACCESSOR_KEYS.SELECT,
         meta: {
             header: "",
         },

package/lib/components/TableCreator/common/entities.js

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

package/lib/components/TableCreator/common/utils.js

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildBaseColumnDef = void 0;
 /**
  * Builds a base column definition.
  * @param baseColumnConfig - Base column configuration.
  * @returns column definition.
  */
-function buildBaseColumnDef(baseColumnConfig) {
+export function buildBaseColumnDef(baseColumnConfig) {
     const { columnPinned, disableHiding, disableSorting, header, id, meta, width, } = baseColumnConfig;
     return {
         accessorKey: id,
@@ -14,7 +11,11 @@ function buildBaseColumnDef(baseColumnConfig) {
         enableSorting: !disableSorting,
         header,
         id,
-        meta: Object.assign(Object.assign({}, meta), { columnPinned, header: meta ? meta.header : header, width }),
+        meta: {
+            ...meta,
+            columnPinned,
+            header: meta ? meta.header : header,
+            width,
+        },
     };
 }
-exports.buildBaseColumnDef = buildBaseColumnDef;