@databiosphere/findable-ui 6.0.0 → 8.0.0

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;

package/lib/components/TableCreator/tableCreator.js

@@ -1,59 +1,42 @@
-"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.TableCreator = void 0;
-const react_1 = __importStar(require("react"));
-const paper_1 = require("../common/Paper/paper");
-const ComponentCreator_1 = require("../ComponentCreator/ComponentCreator");
-const loading_1 = require("../Loading/loading");
-const utils_1 = require("../Table/common/utils");
-const rowSelectionCell_1 = require("../Table/components/TableCell/components/RowSelectionCell/rowSelectionCell");
-const headSelectionCell_1 = require("../Table/components/TableHead/components/HeadSelectionCell/headSelectionCell");
-const table_1 = require("../Table/table");
-const constants_1 = require("./common/constants");
-const utils_2 = require("./common/utils");
-const tableCreator_styles_1 = require("./tableCreator.styles");
+import React, { useMemo } from "react";
+import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
+import { ComponentCreator } from "../ComponentCreator/ComponentCreator";
+import { Loading } from "../Loading/loading";
+import { arrIncludesSome, getInitialState, sortingFn, } from "../Table/common/utils";
+import { RowSelectionCell } from "../Table/components/TableCell/components/RowSelectionCell/rowSelectionCell";
+import { HeadSelectionCell } from "../Table/components/TableHead/components/HeadSelectionCell/headSelectionCell";
+import { Table } from "../Table/table";
+import { COLUMN_CONFIGS } from "./common/constants";
+import { buildBaseColumnDef } from "./common/utils";
+import { TableCreator as TableCreatorContainer } from "./tableCreator.styles";
 const createCell = (config) => function CellCreator(cellContext) {
-    return (react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: [config.componentConfig], response: cellContext.row.original, viewContext: { cellContext } }));
+    return (React.createElement(ComponentCreator, { components: [config.componentConfig], response: cellContext.row.original, viewContext: { cellContext } }));
 };
 const createHeaderSelectionCell = () => function CellCreator({ table }) {
-    return react_1.default.createElement(headSelectionCell_1.HeadSelectionCell, { tableInstance: table });
+    return React.createElement(HeadSelectionCell, { tableInstance: table });
 };
 const createRowSelectionCell = () => function CellCreator({ row }) {
-    return react_1.default.createElement(rowSelectionCell_1.RowSelectionCell, { row: row });
+    return React.createElement(RowSelectionCell, { row: row });
 };
-const TableCreator = ({ columns, defaultSort, getRowId, items, listView, loading, }) => {
-    const columnDefs = (0, react_1.useMemo)(() => columns.reduce((acc, columnConfig) => {
-        acc.push(Object.assign(Object.assign({}, (0, utils_2.buildBaseColumnDef)(columnConfig)), { cell: createCell(columnConfig), filterFn: utils_1.arrIncludesSome, sortingFn: utils_1.sortingFn }));
+export const TableCreator = ({ columns, defaultSort, getRowId, items, listView, loading, }) => {
+    const columnDefs = useMemo(() => columns.reduce((acc, columnConfig) => {
+        acc.push({
+            ...buildBaseColumnDef(columnConfig),
+            cell: createCell(columnConfig),
+            filterFn: arrIncludesSome,
+            sortingFn: sortingFn,
+        });
         return acc;
     }, [
-        Object.assign(Object.assign({}, (0, utils_2.buildBaseColumnDef)(constants_1.COLUMN_CONFIGS.SELECT)), { cell: createRowSelectionCell(), header: createHeaderSelectionCell() }),
+        /* Initialize column definitions with the "select" column */
+        {
+            ...buildBaseColumnDef(COLUMN_CONFIGS.SELECT),
+            cell: createRowSelectionCell(),
+            header: createHeaderSelectionCell(),
+        },
     ]), [columns]);
-    const initialState = (0, utils_1.getInitialState)(columns, defaultSort);
-    return (react_1.default.createElement(tableCreator_styles_1.TableCreator, null,
-        react_1.default.createElement(loading_1.Loading, { appear: false, loading: loading || false, panelStyle: paper_1.PAPER_PANEL_STYLE.FLUID }),
-        react_1.default.createElement(table_1.Table, { columns: columnDefs, getRowId: getRowId, initialState: initialState, items: items, listView: listView, loading: loading })));
+    const initialState = getInitialState(columns, defaultSort);
+    return (React.createElement(TableCreatorContainer, null,
+        React.createElement(Loading, { appear: false, loading: loading || false, panelStyle: PAPER_PANEL_STYLE.FLUID }),
+        React.createElement(Table, { columns: columnDefs, getRowId: getRowId, initialState: initialState, items: items, listView: listView, loading: loading })));
 };
-exports.TableCreator = TableCreator;

package/lib/components/TableCreator/tableCreator.styles.js

@@ -1,10 +1,4 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableCreator = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-exports.TableCreator = styled_1.default.div `
+import styled from "@emotion/styled";
+export const TableCreator = styled.div `
   position: relative; // Required; when the table mounts, the loading element should not transition in and therefore to position the loading element correctly, the parent container must be styled with position relative.
 `;

package/lib/components/TempError/components/errorBox.js

@@ -1,13 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import React from "react";
+export const ErrorBox = ({ message, title }) => {
+    return (React.createElement("div", null,
+        React.createElement("p", null, title),
+        React.createElement("div", null, message)));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ErrorBox = void 0;
-const react_1 = __importDefault(require("react"));
-const ErrorBox = ({ message, title }) => {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("p", null, title),
-        react_1.default.createElement("div", null, message)));
-};
-exports.ErrorBox = ErrorBox;

package/lib/components/TempError/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TempError = void 0;
-var tempError_1 = require("./tempError");
-Object.defineProperty(exports, "TempError", { enumerable: true, get: function () { return tempError_1.TempError; } });
+export { TempError } from "./tempError";

package/lib/components/TempError/tempError.js

@@ -1,19 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import { isAxiosError } from "axios";
+import React from "react";
+import { ErrorBox } from "./components/errorBox";
+export const TempError = ({ error }) => {
+    const { code, request } = isAxiosError(error)
+        ? {
+            ...error,
+            code: error.response?.status,
+            request: error.request.responseURL,
+        }
+        : { ...error, code: null, request: null };
+    return (React.createElement("div", null,
+        code && React.createElement(ErrorBox, { title: "Error Code", message: `${code}` }),
+        request && React.createElement(ErrorBox, { title: "Request URL", message: request }),
+        React.createElement(ErrorBox, { title: "Error Message", message: error.message })));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TempError = void 0;
-const axios_1 = require("axios");
-const react_1 = __importDefault(require("react"));
-const errorBox_1 = require("./components/errorBox");
-const TempError = ({ error }) => {
-    var _a;
-    const { code, request } = (0, axios_1.isAxiosError)(error)
-        ? Object.assign(Object.assign({}, error), { code: (_a = error.response) === null || _a === void 0 ? void 0 : _a.status, request: error.request.responseURL }) : Object.assign(Object.assign({}, error), { code: null, request: null });
-    return (react_1.default.createElement("div", null,
-        code && react_1.default.createElement(errorBox_1.ErrorBox, { title: "Error Code", message: `${code}` }),
-        request && react_1.default.createElement(errorBox_1.ErrorBox, { title: "Request URL", message: request }),
-        react_1.default.createElement(errorBox_1.ErrorBox, { title: "Error Message", message: error.message })));
-};
-exports.TempError = TempError;

package/lib/components/common/Accordion/accordion.js

@@ -1,54 +1,15 @@
-"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;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Accordion = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const typography_1 = require("../../../theme/common/typography");
-const addIcon_1 = require("../CustomIcon/components/AddIcon/addIcon");
-const removeIcon_1 = require("../CustomIcon/components/RemoveIcon/removeIcon");
-const Accordion = (_a) => {
-    var { children, collapseIcon = react_1.default.createElement(removeIcon_1.RemoveIcon, { color: "primary", fontSize: "medium" }), expanded, expandIcon = react_1.default.createElement(addIcon_1.AddIcon, { color: "primary", fontSize: "medium" }), title } = _a, props = __rest(_a, ["children", "collapseIcon", "expanded", "expandIcon", "title"]) /* Spread props to allow for Accordion specific props AccordionProps e.g. "disabled". */;
-    const [isExpanded, setIsExpanded] = (0, react_1.useState)(expanded || false);
+import { Accordion as MAccordion, AccordionDetails, AccordionSummary, Typography, } from "@mui/material";
+import React, { useState } from "react";
+import { TEXT_BODY_LARGE_500 } from "../../../theme/common/typography";
+import { AddIcon } from "../CustomIcon/components/AddIcon/addIcon";
+import { RemoveIcon } from "../CustomIcon/components/RemoveIcon/removeIcon";
+export const Accordion = ({ children, collapseIcon = React.createElement(RemoveIcon, { color: "primary", fontSize: "medium" }), expanded, expandIcon = React.createElement(AddIcon, { color: "primary", fontSize: "medium" }), title, ...props /* Spread props to allow for Accordion specific props AccordionProps e.g. "disabled". */ }) => {
+    const [isExpanded, setIsExpanded] = useState(expanded || false);
     const onToggleExpanded = () => {
         setIsExpanded((expanded) => !expanded);
     };
-    return (react_1.default.createElement(material_1.Accordion, Object.assign({ expanded: isExpanded, onChange: onToggleExpanded }, props),
-        react_1.default.createElement(material_1.AccordionSummary, { expandIcon: isExpanded ? collapseIcon : expandIcon },
-            react_1.default.createElement(material_1.Typography, { variant: typography_1.TEXT_BODY_LARGE_500 }, title)),
-        react_1.default.createElement(material_1.AccordionDetails, null, children)));
+    return (React.createElement(MAccordion, { expanded: isExpanded, onChange: onToggleExpanded, ...props },
+        React.createElement(AccordionSummary, { expandIcon: isExpanded ? collapseIcon : expandIcon },
+            React.createElement(Typography, { variant: TEXT_BODY_LARGE_500 }, title)),
+        React.createElement(AccordionDetails, null, children)));
 };
-exports.Accordion = Accordion;