@databiosphere/findable-ui 6.0.0 → 7.0.0

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

@@ -1,12 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInitialTableColumnVisibility = exports.sortingFn = exports.isColumnSortActive = exports.isCollapsableRowDisabled = exports.isClientFilteringEnabled = exports.isAnyRowSelected = exports.getTableStatePagination = exports.getTableSortLabelProps = exports.getPinnedCellIndex = exports.getInitialTableStateSorting = exports.getInitialState = exports.getGridTemplateColumns = exports.getFacetedUniqueValuesWithArrayValues = exports.getEditColumnOptions = exports.generateDownloadBlob = exports.getColumnSortDirection = exports.buildCategoryViews = exports.arrIncludesSome = void 0;
-const SouthRounded_1 = __importDefault(require("@mui/icons-material/SouthRounded"));
-const react_table_1 = require("@tanstack/react-table");
-const useExploreMode_1 = require("../../../hooks/useExploreMode");
+import SouthRoundedIcon from "@mui/icons-material/SouthRounded";
+import { memo, sortingFns, } from "@tanstack/react-table";
+import { EXPLORE_MODE } from "../../../hooks/useExploreMode";
 /**
  * Returns true if the row should be included in the filtered rows.
  * The row will be included if:
@@ -18,25 +12,24 @@ const useExploreMode_1 = require("../../../hooks/useExploreMode");
  * @param filterValue - Filter value or values.
  * @returns True if the row should be included in the filtered rows.
  */
-function arrIncludesSome(row, columnId, filterValue) {
+export function arrIncludesSome(row, columnId, filterValue) {
     return filterValue.some((val) => {
         const columnValue = row.getValue(columnId);
         if (Array.isArray(columnValue)) {
-            return columnValue === null || columnValue === void 0 ? void 0 : columnValue.includes(val);
+            return columnValue?.includes(val);
         }
         else {
             return columnValue === val;
         }
     });
 }
-exports.arrIncludesSome = arrIncludesSome;
 /**
  * Build view-specific models from react table faceted values function.
  * @param columns - Table columns.
  * @param columnFilters - Column filters state.
  * @returns Array of category views objects.
  */
-function buildCategoryViews(columns, columnFilters) {
+export function buildCategoryViews(columns, columnFilters) {
     const categoryViews = [];
     for (const column of columns) {
         const { columnDef, getCanFilter, getFacetedUniqueValues, id } = column;
@@ -60,7 +53,6 @@ function buildCategoryViews(columns, columnFilters) {
     }
     return categoryViews;
 }
-exports.buildCategoryViews = buildCategoryViews;
 /**
  * Format data to TSV string.
  * @param data - Table data.
@@ -86,19 +78,18 @@ function formatDataToTSV(data) {
  * @param sortDirection - Column sort direction.
  * @returns the coumn sort direction.
  */
-function getColumnSortDirection(sortDirection) {
+export function getColumnSortDirection(sortDirection) {
     if (!sortDirection) {
         return;
     }
     return sortDirection;
 }
-exports.getColumnSortDirection = getColumnSortDirection;
 /**
  * Returns filtered entity results as a blob.
  * @param rows - Table rows.
  * @returns filtered entity results as a blob.
  */
-function generateDownloadBlob(rows) {
+export function generateDownloadBlob(rows) {
     if (rows.length === 0) {
         return;
     }
@@ -107,13 +98,12 @@ function generateDownloadBlob(rows) {
     const tsv = formatDataToTSV([tableHeaders, ...tableData]);
     return new Blob([tsv], { type: "text/tab-separated-values" });
 }
-exports.generateDownloadBlob = generateDownloadBlob;
 /**
  * Returns edit column checkbox menu options.
  * @param table - Table.
  * @returns a list of edit column options.
  */
-function getEditColumnOptions(table) {
+export function getEditColumnOptions(table) {
     const { getAllColumns, initialState } = table;
     const { columnVisibility: initialVisibilityState } = initialState;
     const allColumns = getAllColumns();
@@ -131,7 +121,6 @@ function getEditColumnOptions(table) {
         return acc;
     }, []);
 }
-exports.getEditColumnOptions = getEditColumnOptions;
 /**
  * Returns unique category term counts keyed by category terms.
  * Custom function based off react table function getFacetedUniqueValues, see
@@ -139,14 +128,13 @@ exports.getEditColumnOptions = getEditColumnOptions;
  * https://github.com/TanStack/table/blob/6d4a91e74676da0b28fe07fcc1b7d26f535db0f4/packages/table-core/src/utils/getFacetedUniqueValues.ts.
  * @returns Unique category term counts keyed by category terms.
  */
-function getFacetedUniqueValuesWithArrayValues() {
-    return (table, columnId) => (0, react_table_1.memo)(() => { var _a; return [(_a = table.getColumn(columnId)) === null || _a === void 0 ? void 0 : _a.getFacetedRowModel()]; }, (facetedRowModel) => {
-        var _a;
+export function getFacetedUniqueValuesWithArrayValues() {
+    return (table, columnId) => memo(() => [table.getColumn(columnId)?.getFacetedRowModel()], (facetedRowModel) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any -- This type matches react table getFacetedUniqueValues return type.
         const facetedUniqueValues = new Map();
         if (facetedRowModel) {
             for (let i = 0; i < facetedRowModel.flatRows.length; i++) {
-                const value = (_a = facetedRowModel === null || facetedRowModel === void 0 ? void 0 : facetedRowModel.flatRows[i]) === null || _a === void 0 ? void 0 : _a.getValue(columnId);
+                const value = facetedRowModel?.flatRows[i]?.getValue(columnId);
                 if (Array.isArray(value)) {
                     value.map((val) => {
                         updateCountByTerms(facetedUniqueValues, val);
@@ -159,24 +147,23 @@ function getFacetedUniqueValuesWithArrayValues() {
         }
         return facetedUniqueValues;
     }, {
-        debug: () => { var _a; return (_a = table.options.debugAll) !== null && _a !== void 0 ? _a : table.options.debugTable; },
+        debug: () => table.options.debugAll ?? table.options.debugTable,
         key: process.env.NODE_ENV === "development" &&
             "getFacetedUniqueValues_" + columnId,
         // eslint-disable-next-line @typescript-eslint/no-empty-function -- allow dummy function for default.
         onChange: () => { },
     });
 }
-exports.getFacetedUniqueValuesWithArrayValues = getFacetedUniqueValuesWithArrayValues;
 /**
  * Generates a string value for the CSS property grid-template-columns.
  * Defines grid table track sizing (for each visible column).
  * @param columns - Table columns.
  * @returns string value for the css property grid-template-columns.
  */
-function getGridTemplateColumns(columns) {
+export function getGridTemplateColumns(columns) {
     return columns
         .map(({ columnDef: { meta } }) => {
-        const width = meta === null || meta === void 0 ? void 0 : meta.width;
+        const width = meta?.width;
         if (isGridTrackMinMax(width)) {
             return `minmax(${width.min}, ${width.max})`;
         }
@@ -184,14 +171,13 @@ function getGridTemplateColumns(columns) {
     })
         .join(" ");
 }
-exports.getGridTemplateColumns = getGridTemplateColumns;
 /**
  * Returns initial table state.
  * @param columns - Column configuration.
  * @param defaultSort - Column sort configuration.
  * @returns initial table state.
  */
-function getInitialState(columns, defaultSort) {
+export function getInitialState(columns, defaultSort) {
     const columnVisibility = getInitialTableColumnVisibility(columns);
     const sorting = getInitialTableStateSorting(defaultSort);
     return {
@@ -199,66 +185,60 @@ function getInitialState(columns, defaultSort) {
         sorting,
     };
 }
-exports.getInitialState = getInitialState;
 /**
  * Returns the initial table sorting state for the specified column sort configuration.
  * @param defaultSort - Column sort configuration.
  * @returns initial table sorting state.
  */
-function getInitialTableStateSorting(defaultSort) {
+export function getInitialTableStateSorting(defaultSort) {
     if (!defaultSort) {
         return [];
     }
     return [defaultSort];
 }
-exports.getInitialTableStateSorting = getInitialTableStateSorting;
 /**
  * Returns the pinned cell and its index tuple.
  * @param row - Row.
  * @returns pinned cell and index tuple.
  */
-function getPinnedCellIndex(row) {
-    var _a;
+export function getPinnedCellIndex(row) {
     const visibleCells = row.getVisibleCells();
     let pinnedIndex = 0;
     for (let i = 0; i < visibleCells.length; i++) {
-        if ((_a = visibleCells[i].column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.columnPinned) {
+        if (visibleCells[i].column.columnDef.meta?.columnPinned) {
             pinnedIndex = i;
             break;
         }
     }
     return [visibleCells[pinnedIndex], pinnedIndex];
 }
-exports.getPinnedCellIndex = getPinnedCellIndex;
 /**
  * Returns table sort label props.
  * @param column - Table column.
  * @returns table sort label props.
  */
-function getTableSortLabelProps(column) {
+export function getTableSortLabelProps(column) {
     const { getCanSort, getIsSorted, getToggleSortingHandler } = column;
     return {
-        IconComponent: SouthRounded_1.default,
+        IconComponent: SouthRoundedIcon,
         active: isColumnSortActive(getIsSorted()),
         direction: getColumnSortDirection(getIsSorted()),
         disabled: !getCanSort(),
         onClick: getToggleSortingHandler(),
     };
 }
-exports.getTableSortLabelProps = getTableSortLabelProps;
 /**
  * Returns table state pagination.
  * @param pageIndex - Explore state page index.
  * @param pageSize - Explore state page size.
  * @returns table state pagination.
  */
-function getTableStatePagination(pageIndex = 0, pageSize) {
+export function getTableStatePagination(pageIndex = 0, pageSize) {
     return {
         pageIndex,
         pageSize,
     };
 }
-exports.getTableStatePagination = getTableStatePagination;
 /**
  * Returns the list of visible table headers.
  * @param rows - Table rows.
@@ -282,43 +262,39 @@ function getVisibleRowsTableData(rows) {
  * @param table - Table.
  * @returns true if a row is selected.
  */
-function isAnyRowSelected(table) {
+export function isAnyRowSelected(table) {
     const { getIsAllPageRowsSelected, getIsSomePageRowsSelected, options: { enableRowSelection }, } = table;
     return Boolean(enableRowSelection &&
         (getIsSomePageRowsSelected() || getIsAllPageRowsSelected()));
 }
-exports.isAnyRowSelected = isAnyRowSelected;
 /**
  * Returns true if client-side filtering is enabled.
  * @param exploreMode - Explore mode.
  * @returns true if client-side filtering is enabled.
  */
-function isClientFilteringEnabled(exploreMode) {
-    return (exploreMode === useExploreMode_1.EXPLORE_MODE.CS_FETCH_CS_FILTERING ||
-        exploreMode === useExploreMode_1.EXPLORE_MODE.SS_FETCH_CS_FILTERING);
+export function isClientFilteringEnabled(exploreMode) {
+    return (exploreMode === EXPLORE_MODE.CS_FETCH_CS_FILTERING ||
+        exploreMode === EXPLORE_MODE.SS_FETCH_CS_FILTERING);
 }
-exports.isClientFilteringEnabled = isClientFilteringEnabled;
 /**
  * Returns true if the collapsable row is disabled; i.e. only one column is visible.
  * @param tableInstance - Table instance.
  * @returns true if the collapsable row is disabled.
  */
-function isCollapsableRowDisabled(tableInstance) {
+export function isCollapsableRowDisabled(tableInstance) {
     return tableInstance.getVisibleLeafColumns().length === 1;
 }
-exports.isCollapsableRowDisabled = isCollapsableRowDisabled;
 /**
  * Returns true if column has a sort direction.
  * @param sortDirection - Column sort direction.
  * @returns true when column has a sort direction.
  */
-function isColumnSortActive(sortDirection) {
+export function isColumnSortActive(sortDirection) {
     if (!sortDirection) {
         return sortDirection;
     }
     return true;
 }
-exports.isColumnSortActive = isColumnSortActive;
 /**
  * Returns sort return value from the compare function. The compare function is dependent on the row value type:
  * - row values of type "array" use a compare function based off React Table "basic" compare function,
@@ -329,7 +305,7 @@ exports.isColumnSortActive = isColumnSortActive;
  * @param columnId - Sorted column identifier.
  * @returns sort return value from the compare function (0 | 1 | -1).
  */
-function sortingFn(rowA, rowB, columnId) {
+export function sortingFn(rowA, rowB, columnId) {
     const columnAValue = rowA.getValue(columnId);
     const columnBValue = rowB.getValue(columnId);
     if (Array.isArray(columnAValue) && Array.isArray(columnBValue)) {
@@ -340,9 +316,8 @@ function sortingFn(rowA, rowB, columnId) {
         return basicSort(toString(columnAValue[0]).toLowerCase(), toString(columnBValue[0]).toLowerCase());
     }
     // Sort other values with React Table's "alphanumeric" compare function.
-    return react_table_1.sortingFns.alphanumeric(rowA, rowB, columnId);
+    return sortingFns.alphanumeric(rowA, rowB, columnId);
 }
-exports.sortingFn = sortingFn;
 /**
  * Basic compare function, returning a sort return value.
  * See React Table https://github.com/TanStack/table/blob/beccddcab001434f3bb11843b3fda72f8b000cc2/packages/table-core/src/sortingFns.ts#L53
@@ -358,13 +333,12 @@ function basicSort(val0, val1) {
  * @param columns - Column configuration.
  * @returns initial table visibility state.
  */
-function getInitialTableColumnVisibility(columns) {
+export function getInitialTableColumnVisibility(columns) {
     return columns.reduce((acc, { columnVisible = true, id }) => {
         Object.assign(acc, { [id]: columnVisible });
         return acc;
     }, {});
 }
-exports.getInitialTableColumnVisibility = getInitialTableColumnVisibility;
 /**
  * Determine if the given track size width is a size range.
  * @param width - Grid table track size.
@@ -404,9 +378,8 @@ function toString(tValue) {
 function updateFacetedUniqueValues(
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- see React Table FiltersColumn getFacetedUniqueValues
 facetedUniqueValues, columnFilters, columnId) {
-    var _a;
     // Grab the selected category values for the specified column.
-    const filterStateValues = (_a = columnFilters.find(({ id }) => id === columnId)) === null || _a === void 0 ? void 0 : _a.value;
+    const filterStateValues = columnFilters.find(({ id }) => id === columnId)?.value;
     if (Array.isArray(filterStateValues)) {
         filterStateValues.forEach((term) => {
             if (facetedUniqueValues.has(term)) {
@@ -424,9 +397,8 @@ facetedUniqueValues, columnFilters, columnId) {
  * @param term - Category term.
  */
 function updateCountByTerms(countByTerms, term) {
-    var _a;
     if (countByTerms.has(term)) {
-        countByTerms.set(term, ((_a = countByTerms.get(term)) !== null && _a !== void 0 ? _a : 0) + 1);
+        countByTerms.set(term, (countByTerms.get(term) ?? 0) + 1);
     }
     else {
         countByTerms.set(term, 1);

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.js

@@ -1,38 +1,12 @@
-"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.CheckboxMenu = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const buttonTextPrimary_1 = require("../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary");
-const dropdownButton_1 = require("../../../common/Button/components/DropdownButton/dropdownButton");
-const checkedIcon_1 = require("../../../common/CustomIcon/components/CheckedIcon/checkedIcon");
-const uncheckedIcon_1 = require("../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon");
-const checkboxMenu_styles_1 = require("./checkboxMenu.styles");
-const CheckboxMenu = ({ label: buttonLabel, onReset, options, }) => {
-    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+import { Checkbox, ListItem, ListItemButton, ListItemText, } from "@mui/material";
+import React, { useState } from "react";
+import { ButtonTextPrimary } from "../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary";
+import { DropdownButton } from "../../../common/Button/components/DropdownButton/dropdownButton";
+import { CheckedIcon } from "../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedIcon } from "../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+import { Menu } from "./checkboxMenu.styles";
+export const CheckboxMenu = ({ label: buttonLabel, onReset, options, }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const onOpenMenu = (event) => {
         setAnchorEl(event.currentTarget);
@@ -40,16 +14,15 @@ const CheckboxMenu = ({ label: buttonLabel, onReset, options, }) => {
     const onCloseMenu = () => {
         setAnchorEl(null);
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(dropdownButton_1.DropdownButton, { onClick: onOpenMenu, open: open }, buttonLabel),
-        react_1.default.createElement(checkboxMenu_styles_1.Menu, { anchorEl: anchorEl, anchorOrigin: { horizontal: "right", vertical: "bottom" }, onClose: onCloseMenu, open: open, slotProps: { paper: { variant: "menu" } }, transformOrigin: {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DropdownButton, { onClick: onOpenMenu, open: open }, buttonLabel),
+        React.createElement(Menu, { anchorEl: anchorEl, anchorOrigin: { horizontal: "right", vertical: "bottom" }, onClose: onCloseMenu, open: open, slotProps: { paper: { variant: "menu" } }, transformOrigin: {
                 horizontal: "right",
                 vertical: "top",
             } },
-            options.map(({ checked, disabled = false, label, onChange, value }) => (react_1.default.createElement(material_1.ListItemButton, { disabled: disabled, key: value, onClick: onChange, role: undefined },
-                react_1.default.createElement(material_1.Checkbox, { checked: checked, checkedIcon: react_1.default.createElement(checkedIcon_1.CheckedIcon, null), disabled: disabled, icon: react_1.default.createElement(uncheckedIcon_1.UncheckedIcon, null) }),
-                react_1.default.createElement(material_1.ListItemText, { disableTypography: true, primary: react_1.default.createElement("span", null, label) })))),
-            react_1.default.createElement(material_1.ListItem, { component: "div" },
-                react_1.default.createElement(buttonTextPrimary_1.ButtonTextPrimary, { onClick: onReset }, "Reset")))));
+            options.map(({ checked, disabled = false, label, onChange, value }) => (React.createElement(ListItemButton, { disabled: disabled, key: value, onClick: onChange, role: undefined },
+                React.createElement(Checkbox, { checked: checked, checkedIcon: React.createElement(CheckedIcon, null), disabled: disabled, icon: React.createElement(UncheckedIcon, null) }),
+                React.createElement(ListItemText, { disableTypography: true, primary: React.createElement("span", null, label) })))),
+            React.createElement(ListItem, { component: "div" },
+                React.createElement(ButtonTextPrimary, { onClick: onReset }, "Reset")))));
 };
-exports.CheckboxMenu = CheckboxMenu;

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.stories.js

@@ -1,29 +1,23 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxMenuStory = void 0;
-const react_1 = __importDefault(require("react"));
-const checkboxMenu_1 = require("./checkboxMenu");
-exports.default = {
+import React from "react";
+import { CheckboxMenu } from "./checkboxMenu";
+export default {
     argTypes: {
         label: { control: "text" },
         onReset: { control: { disabled: true } },
         options: { control: "array" },
     },
-    component: checkboxMenu_1.CheckboxMenu,
+    component: CheckboxMenu,
     title: "Components/Common/Menu/CheckboxMenu",
 };
-const CheckboxMenuTemplate = (args) => (react_1.default.createElement(checkboxMenu_1.CheckboxMenu, Object.assign({}, args)));
+const CheckboxMenuTemplate = (args) => (React.createElement(CheckboxMenu, { ...args }));
 const onChange = () => {
     // onChange function
 };
 const onReset = () => {
     // onReset function
 };
-exports.CheckboxMenuStory = CheckboxMenuTemplate.bind({});
-exports.CheckboxMenuStory.args = {
+export const CheckboxMenuStory = CheckboxMenuTemplate.bind({});
+CheckboxMenuStory.args = {
     label: "Options",
     onReset: onReset,
     options: [

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.styles.js

@@ -1,12 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Menu = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-exports.Menu = (0, styled_1.default)(material_1.Menu) `
+import styled from "@emotion/styled";
+import { Menu as MMenu } from "@mui/material";
+export const Menu = styled(MMenu) `
   .MuiPaper-menu {
     margin: 4px 0;
   }

package/lib/components/Table/components/DownloadEntityResults/downloadEntityResults.js

@@ -1,24 +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.DownloadEntityResults = void 0;
-const react_1 = __importDefault(require("react"));
-const buttonSecondary_1 = require("../../../common/Button/components/ButtonSecondary/buttonSecondary");
-const fileDownloadButton_1 = require("../../../common/Button/components/FileDownloadButton/fileDownloadButton");
-const downloadIcon_1 = require("../../../common/CustomIcon/components/DownloadIcon/downloadIcon");
-const utils_1 = require("../../common/utils");
-const DownloadEntityResults = ({ entityName, rows, }) => {
-    const [fileUrl, setFileUrl] = react_1.default.useState(undefined);
+import React from "react";
+import { ButtonSecondary } from "../../../common/Button/components/ButtonSecondary/buttonSecondary";
+import { FileDownloadButton } from "../../../common/Button/components/FileDownloadButton/fileDownloadButton";
+import { DownloadIcon } from "../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
+import { generateDownloadBlob } from "../../common/utils";
+export const DownloadEntityResults = ({ entityName, rows, }) => {
+    const [fileUrl, setFileUrl] = React.useState(undefined);
     const onDownload = () => {
-        const blob = (0, utils_1.generateDownloadBlob)(rows);
+        const blob = generateDownloadBlob(rows);
         if (blob) {
             setFileUrl(window.URL.createObjectURL(blob));
         }
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(buttonSecondary_1.ButtonSecondary, { onClick: () => onDownload(), StartIcon: downloadIcon_1.DownloadIcon }, "Download TSV"),
-        react_1.default.createElement(fileDownloadButton_1.FileDownloadButton, { fileName: `${entityName}.tsv`, fileUrl: fileUrl })));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ButtonSecondary, { onClick: () => onDownload(), StartIcon: DownloadIcon }, "Download TSV"),
+        React.createElement(FileDownloadButton, { fileName: `${entityName}.tsv`, fileUrl: fileUrl })));
 };
-exports.DownloadEntityResults = DownloadEntityResults;

package/lib/components/Table/components/Pagination/pagination.js

@@ -1,26 +1,19 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pagination = void 0;
-const EastRounded_1 = __importDefault(require("@mui/icons-material/EastRounded"));
-const WestRounded_1 = __importDefault(require("@mui/icons-material/WestRounded"));
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const iconButton_styles_1 = require("../../../common/IconButton/iconButton.styles");
-const stack_1 = require("../../../common/Stack/stack");
-const pagination_styles_1 = require("./pagination.styles");
-const Pagination = ({ canNextPage = true, canPreviousPage = true, currentPage, onNextPage, onPreviousPage, totalPage, }) => {
-    return (react_1.default.createElement(pagination_styles_1.Pagination, null,
-        react_1.default.createElement("div", null,
-            react_1.default.createElement(material_1.Typography, { variant: "text-body-400" }, "Page "),
-            react_1.default.createElement(material_1.Typography, { variant: "text-body-500" },
+import EastRoundedIcon from "@mui/icons-material/EastRounded";
+import WestRoundedIcon from "@mui/icons-material/WestRounded";
+import { Typography } from "@mui/material";
+import React from "react";
+import { IconButtonSecondary } from "../../../common/IconButton/iconButton.styles";
+import { Stack } from "../../../common/Stack/stack";
+import { Pagination as TablePagination } from "./pagination.styles";
+export const Pagination = ({ canNextPage = true, canPreviousPage = true, currentPage, onNextPage, onPreviousPage, totalPage, }) => {
+    return (React.createElement(TablePagination, null,
+        React.createElement("div", null,
+            React.createElement(Typography, { variant: "text-body-400" }, "Page "),
+            React.createElement(Typography, { variant: "text-body-500" },
                 currentPage,
                 " of ",
                 totalPage)),
-        react_1.default.createElement(stack_1.Stack, { direction: "row", gap: 2 },
-            react_1.default.createElement(iconButton_styles_1.IconButtonSecondary, { disabled: !canPreviousPage, Icon: WestRounded_1.default, onClick: onPreviousPage }),
-            react_1.default.createElement(iconButton_styles_1.IconButtonSecondary, { disabled: !canNextPage, Icon: EastRounded_1.default, onClick: onNextPage }))));
+        React.createElement(Stack, { direction: "row", gap: 2 },
+            React.createElement(IconButtonSecondary, { disabled: !canPreviousPage, Icon: WestRoundedIcon, onClick: onPreviousPage }),
+            React.createElement(IconButtonSecondary, { disabled: !canNextPage, Icon: EastRoundedIcon, onClick: onNextPage }))));
 };
-exports.Pagination = Pagination;

package/lib/components/Table/components/Pagination/pagination.stories.js

@@ -1,12 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PaginationStory = void 0;
-const react_1 = __importDefault(require("react"));
-const pagination_1 = require("./pagination");
-exports.default = {
+import React from "react";
+import { Pagination } from "./pagination";
+export default {
     argTypes: {
         canNextPage: { control: "boolean" },
         canPreviousPage: { control: "boolean" },
@@ -15,12 +9,12 @@ exports.default = {
         onPreviousPage: { action: "previousPage" },
         totalPage: { control: "number" },
     },
-    component: pagination_1.Pagination,
+    component: Pagination,
     title: "Components/Table",
 };
-const PaginationTemplate = (args) => (react_1.default.createElement(pagination_1.Pagination, Object.assign({}, args)));
-exports.PaginationStory = PaginationTemplate.bind({});
-exports.PaginationStory.args = {
+const PaginationTemplate = (args) => (React.createElement(Pagination, { ...args }));
+export const PaginationStory = PaginationTemplate.bind({});
+PaginationStory.args = {
     currentPage: 1,
     totalPage: 25,
 };

package/lib/components/Table/components/Pagination/pagination.styles.js

@@ -1,12 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pagination = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../../../theme/common/breakpoints");
-exports.Pagination = styled_1.default.div `
+import styled from "@emotion/styled";
+import { TABLET } from "../../../../theme/common/breakpoints";
+export const Pagination = styled.div `
   align-items: center;
   background-color: ${({ theme }) => theme.palette.common.white};
   color: ${({ theme }) => theme.palette.ink.main};
@@ -15,7 +9,7 @@ exports.Pagination = styled_1.default.div `
   justify-content: space-between;
   padding: 20px;
 
-  ${({ theme }) => theme.breakpoints.up(breakpoints_1.TABLET)} {
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
     justify-content: flex-start;
   }
 `;

package/lib/components/Table/components/PaginationSummary/paginationSummary.js

@@ -1,20 +1,13 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PaginationSummary = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const PaginationSummary = ({ firstResult, lastResult, totalResult, }) => {
-    return (react_1.default.createElement(material_1.Fade, { in: totalResult > 0 },
-        react_1.default.createElement("div", null,
-            react_1.default.createElement(material_1.Typography, { variant: "text-body-400" }, "Results "),
-            react_1.default.createElement(material_1.Typography, { variant: "text-body-small-500" },
+import { Fade, Typography } from "@mui/material";
+import React from "react";
+export const PaginationSummary = ({ firstResult, lastResult, totalResult, }) => {
+    return (React.createElement(Fade, { in: totalResult > 0 },
+        React.createElement("div", null,
+            React.createElement(Typography, { variant: "text-body-400" }, "Results "),
+            React.createElement(Typography, { variant: "text-body-small-500" },
                 firstResult,
                 " - ",
                 lastResult),
-            react_1.default.createElement(material_1.Typography, { variant: "text-body-400" }, " of "),
-            react_1.default.createElement(material_1.Typography, { variant: "text-body-small-500" }, totalResult))));
+            React.createElement(Typography, { variant: "text-body-400" }, " of "),
+            React.createElement(Typography, { variant: "text-body-small-500" }, totalResult))));
 };
-exports.PaginationSummary = PaginationSummary;