@databiosphere/findable-ui 6.0.0 → 7.0.0

package/lib/components/Table/components/TableBody/tableBody.js

@@ -1,54 +1,27 @@
-"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.TableBody = void 0;
-const material_1 = require("@mui/material");
-const react_virtual_1 = require("@tanstack/react-virtual");
-const react_1 = __importStar(require("react"));
-const entities_1 = require("../../common/entities");
-const collapsableRows_1 = require("../TableRows/components/CollapsableRows/collapsableRows");
-const virtualizedRow_1 = require("../TableRows/components/VirtualizedRow/virtualizedRow");
-const tableRows_1 = require("../TableRows/tableRows");
+import { TableBody as MTableBody } from "@mui/material";
+import { useWindowVirtualizer } from "@tanstack/react-virtual";
+import React, { useCallback } from "react";
+import { ROW_DIRECTION } from "../../common/entities";
+import { CollapsableRows } from "../TableRows/components/CollapsableRows/collapsableRows";
+import { VirtualizedRow } from "../TableRows/components/VirtualizedRow/virtualizedRow";
+import { TableRows } from "../TableRows/tableRows";
 const OVERSCAN = 20;
-const TableBody = ({ rowDirection, tableInstance, }) => {
+export const TableBody = ({ rowDirection, tableInstance, }) => {
     const { getRowModel } = tableInstance;
     const { rows } = getRowModel();
-    const estimateSize = (0, react_1.useCallback)(() => 100, []);
+    const estimateSize = useCallback(() => 100, []);
     const count = rows.length;
-    const virtualizer = (0, react_virtual_1.useWindowVirtualizer)({
+    const virtualizer = useWindowVirtualizer({
         count,
         estimateSize,
         measureElement,
         overscan: OVERSCAN,
     });
-    return (react_1.default.createElement(material_1.TableBody, null,
-        react_1.default.createElement(virtualizedRow_1.VirtualizedRow, { isUpperRow: true, virtualizer: virtualizer }),
-        rowDirection === entities_1.ROW_DIRECTION.DEFAULT ? (react_1.default.createElement(tableRows_1.TableRows, { tableInstance: tableInstance, virtualizer: virtualizer })) : (react_1.default.createElement(collapsableRows_1.CollapsableRows, { tableInstance: tableInstance, virtualizer: virtualizer })),
-        react_1.default.createElement(virtualizedRow_1.VirtualizedRow, { isUpperRow: false, virtualizer: virtualizer })));
+    return (React.createElement(MTableBody, null,
+        React.createElement(VirtualizedRow, { isUpperRow: true, virtualizer: virtualizer }),
+        rowDirection === ROW_DIRECTION.DEFAULT ? (React.createElement(TableRows, { tableInstance: tableInstance, virtualizer: virtualizer })) : (React.createElement(CollapsableRows, { tableInstance: tableInstance, virtualizer: virtualizer })),
+        React.createElement(VirtualizedRow, { isUpperRow: false, virtualizer: virtualizer })));
 };
-exports.TableBody = TableBody;
 /**
  * Measures the height of the element.
  * @param element - Element to measure.

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

@@ -1,15 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTableCellPadding = void 0;
-const constants_1 = require("../../../../TableCreator/common/constants");
+import { ACCESSOR_KEYS } from "../../../../TableCreator/common/constants";
 /**
  * Returns table cell padding based on the cell ID.
  * @param id - Cell ID.
  * @returns table cell padding.
  */
-function getTableCellPadding(id) {
-    if (id === constants_1.ACCESSOR_KEYS.SELECT) {
+export function getTableCellPadding(id) {
+    if (id === ACCESSOR_KEYS.SELECT) {
         return "checkbox";
     }
 }
-exports.getTableCellPadding = getTableCellPadding;

package/lib/components/Table/components/TableCell/components/BasicCell/basicCell.js

@@ -1,42 +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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BasicCell = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const entities_1 = require("../../../../../../apis/azul/common/entities");
-const BasicCell = ({ TypographyProps, value = entities_1.LABEL.UNSPECIFIED, }) => {
+import { Typography } from "@mui/material";
+import React, { Fragment } from "react";
+import { LABEL } from "../../../../../../apis/azul/common/entities";
+export const BasicCell = ({ TypographyProps, value = LABEL.UNSPECIFIED, }) => {
     if (isValueNumberOrString(value)) {
-        return (react_1.default.createElement(material_1.Typography, Object.assign({ variant: "inherit" }, TypographyProps), value));
+        return (React.createElement(Typography, { variant: "inherit", ...TypographyProps }, value));
     }
     if (isValueArray(value)) {
-        return (react_1.default.createElement(react_1.Fragment, null, value.map((v) => (react_1.default.createElement(material_1.Typography, Object.assign({ key: v, variant: "inherit" }, TypographyProps), v)))));
+        return (React.createElement(Fragment, null, value.map((v) => (React.createElement(Typography, { key: v, variant: "inherit", ...TypographyProps }, v)))));
     }
     return null;
 };
-exports.BasicCell = BasicCell;
 /**
  * Returns true if value is an array of strings.
  * @param value - Value.

package/lib/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.js

@@ -1,62 +1,34 @@
-"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.CollapsableCell = void 0;
-const material_1 = require("@mui/material");
-const react_table_1 = require("@tanstack/react-table");
-const react_1 = __importStar(require("react"));
-const typography_1 = require("../../../../../../theme/common/typography");
-const unfoldMoreIcon_1 = require("../../../../../common/CustomIcon/components/UnfoldMoreIcon/unfoldMoreIcon");
-const utils_1 = require("../../../../common/utils");
-const collapsableCell_styles_1 = require("./collapsableCell.styles");
-const CollapsableCell = ({ isDisabled = false, row, }) => {
-    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
-    const [pinnedCell, pinnedIndex] = (0, utils_1.getPinnedCellIndex)(row);
+import { Collapse, IconButton, Typography } from "@mui/material";
+import { flexRender } from "@tanstack/react-table";
+import React, { useState } from "react";
+import { TEXT_BODY_400_2_LINES } from "../../../../../../theme/common/typography";
+import { UnfoldMoreIcon } from "../../../../../common/CustomIcon/components/UnfoldMoreIcon/unfoldMoreIcon";
+import { getPinnedCellIndex } from "../../../../common/utils";
+import { CollapsedContents, Content, PinnedCell, TableCell, } from "./collapsableCell.styles";
+export const CollapsableCell = ({ isDisabled = false, row, }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [pinnedCell, pinnedIndex] = getPinnedCellIndex(row);
     // Toggles open/close table cell.
     const onToggleExpanded = () => {
         setIsExpanded((expanded) => !expanded);
     };
-    return (react_1.default.createElement(collapsableCell_styles_1.TableCell, { isExpanded: isExpanded },
-        react_1.default.createElement(collapsableCell_styles_1.PinnedCell, null,
-            (0, react_table_1.flexRender)(pinnedCell.column.columnDef.cell, pinnedCell.getContext()),
-            react_1.default.createElement(material_1.IconButton, { color: "ink", disabled: isDisabled, edge: "end", onClick: onToggleExpanded, size: "large" },
-                react_1.default.createElement(unfoldMoreIcon_1.UnfoldMoreIcon, { fontSize: "small" }))),
-        react_1.default.createElement(material_1.Collapse, { in: isExpanded },
-            react_1.default.createElement(collapsableCell_styles_1.CollapsedContents, null, getRowVisibleCells(row).map((cell, i) => {
-                var _a;
+    return (React.createElement(TableCell, { isExpanded: isExpanded },
+        React.createElement(PinnedCell, null,
+            flexRender(pinnedCell.column.columnDef.cell, pinnedCell.getContext()),
+            React.createElement(IconButton, { color: "ink", disabled: isDisabled, edge: "end", onClick: onToggleExpanded, size: "large" },
+                React.createElement(UnfoldMoreIcon, { fontSize: "small" }))),
+        React.createElement(Collapse, { in: isExpanded },
+            React.createElement(CollapsedContents, null, getRowVisibleCells(row).map((cell, i) => {
                 if (cell.getIsAggregated())
                     return null; // Display of aggregated cells is currently not supported.
                 if (cell.getIsPlaceholder())
                     return null; // Display of placeholder cells is currently not supported.
-                const header = (_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.header;
-                return (i !== pinnedIndex && (react_1.default.createElement(collapsableCell_styles_1.Content, { key: cell.id },
-                    header && (react_1.default.createElement(material_1.Typography, { component: "div", color: "ink.light", variant: typography_1.TEXT_BODY_400_2_LINES }, header)),
-                    (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()))));
+                const header = cell.column.columnDef.meta?.header;
+                return (i !== pinnedIndex && (React.createElement(Content, { key: cell.id },
+                    header && (React.createElement(Typography, { component: "div", color: "ink.light", variant: TEXT_BODY_400_2_LINES }, header)),
+                    flexRender(cell.column.columnDef.cell, cell.getContext()))));
             })))));
 };
-exports.CollapsableCell = CollapsableCell;
 /**
  * Returns row or sub row visible cells.
  * @param row - Row.

package/lib/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.styles.js

@@ -1,26 +1,9 @@
-"use strict";
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Content = exports.CollapsedContents = exports.PinnedCell = exports.TableCell = void 0;
-const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const colors_1 = require("../../../../../../styles/common/mixins/colors");
-const fonts_1 = require("../../../../../../styles/common/mixins/fonts");
-exports.TableCell = (0, styled_1.default)(material_1.TableCell, {
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { TableCell as MTableCell } from "@mui/material";
+import { smokeLightest } from "../../../../../../styles/common/mixins/colors";
+import { textBody4002Lines } from "../../../../../../styles/common/mixins/fonts";
+export const TableCell = styled(MTableCell, {
     shouldForwardProp: (prop) => prop !== "isExpanded",
 }) `
   && {
@@ -30,18 +13,15 @@ exports.TableCell = (0, styled_1.default)(material_1.TableCell, {
   }
 
   // Expanded.
-  ${(_a) => {
-    var { isExpanded } = _a, props = __rest(_a, ["isExpanded"]);
-    return isExpanded &&
-        (0, react_1.css) `
+  ${({ isExpanded, ...props }) => isExpanded &&
+    css `
       && {
-        background-color: ${(0, colors_1.smokeLightest)(props)};
+        background-color: ${smokeLightest(props)};
       }
-    `;
-}};
+    `};
 }
 `;
-exports.PinnedCell = styled_1.default.div `
+export const PinnedCell = styled.div `
   align-items: center;
   display: flex;
   gap: 16px;
@@ -53,15 +33,15 @@ exports.PinnedCell = styled_1.default.div `
     opacity: 0.5;
   }
 `;
-exports.CollapsedContents = styled_1.default.div `
-  ${fonts_1.textBody4002Lines};
+export const CollapsedContents = styled.div `
+  ${textBody4002Lines};
   display: grid;
   gap: 12px;
   justify-items: flex-start;
   padding: 0 16px 12px;
   word-break: break-word;
 `;
-exports.Content = styled_1.default.div `
+export const Content = styled.div `
   min-width: 0;
   width: 100%;
 `;

package/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/components/Tooltip/tooltip.js

@@ -1,44 +1,7 @@
-"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.Tooltip = void 0;
-const material_1 = require("@mui/material");
-const core_1 = require("@popperjs/core");
-const react_1 = __importStar(require("react"));
-const tooltip_styles_1 = require("./tooltip.styles");
+import { Tooltip as MTooltip, } from "@mui/material";
+import { detectOverflow } from "@popperjs/core";
+import React, { useMemo, useState } from "react";
+import { TooltipContent } from "./tooltip.styles";
 const DEFAULT_FLIP_MODIFIER = {
     enabled: true,
     name: "flip",
@@ -53,10 +16,9 @@ const DEFAULT_PREVENT_OVERFLOW_MODIFIER = {
         padding: 16,
     },
 };
-const Tooltip = (_a) => {
-    var { children, className, title } = _a, props = __rest(_a, ["children", "className", "title"]) /* Spread props to allow for Mui Tooltip specific prop overrides. */;
-    const [maxHeight, setMaxHeight] = (0, react_1.useState)();
-    const modifiers = (0, react_1.useMemo)(() => [
+export const Tooltip = ({ children, className, title, ...props /* Spread props to allow for Mui Tooltip specific prop overrides. */ }) => {
+    const [maxHeight, setMaxHeight] = useState();
+    const modifiers = useMemo(() => [
         {
             enabled: true,
             fn: ({ state }) => setMaxHeight(calculateMaxHeight(state)),
@@ -67,19 +29,18 @@ const Tooltip = (_a) => {
         DEFAULT_FLIP_MODIFIER,
         DEFAULT_PREVENT_OVERFLOW_MODIFIER,
     ], []);
-    return (react_1.default.createElement(material_1.Tooltip, Object.assign({ arrow: true, className: className, onClose: () => setMaxHeight(undefined), slotProps: {
+    return (React.createElement(MTooltip, { arrow: true, className: className, onClose: () => setMaxHeight(undefined), slotProps: {
             popper: { modifiers },
             tooltip: { style: { display: "flex", maxHeight, padding: 0 } },
-        }, title: react_1.default.createElement(tooltip_styles_1.TooltipContent, null, title) }, props), children));
+        }, title: React.createElement(TooltipContent, null, title), ...props }, children));
 };
-exports.Tooltip = Tooltip;
 /**
  * Calculate the max height of the tooltip based on the current popper modifier state.
  * @param state - Popper modifier state.
  * @returns tooltip maximum height.
  */
 function calculateMaxHeight(state) {
-    const overflow = (0, core_1.detectOverflow)(state);
+    const overflow = detectOverflow(state);
     const { placement } = state;
     if (placement === "left" || placement === "right") {
         return window.innerHeight - 32;

package/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/components/Tooltip/tooltip.styles.js

@@ -1,11 +1,5 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TooltipContent = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-exports.TooltipContent = styled_1.default.span `
+import styled from "@emotion/styled";
+export const TooltipContent = styled.span `
   overflow: scroll;
   overscroll-behavior: none;
   padding: 8px 12px;

package/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/nTag.js

@@ -1,24 +1,5 @@
-"use strict";
-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;
+import React from "react";
+import { Tooltip } from "./components/Tooltip/tooltip";
+export const NTag = ({ className, Tag, TooltipTitle, ...props /* Spread props to allow for Mui Tooltip specific prop overrides. */ }) => {
+    return (React.createElement(Tooltip, { className: className, title: TooltipTitle, ...props }, Tag));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NTag = void 0;
-const react_1 = __importDefault(require("react"));
-const tooltip_1 = require("./components/Tooltip/tooltip");
-const NTag = (_a) => {
-    var { className, Tag, TooltipTitle } = _a, props = __rest(_a, ["className", "Tag", "TooltipTitle"]) /* Spread props to allow for Mui Tooltip specific prop overrides. */;
-    return (react_1.default.createElement(tooltip_1.Tooltip, Object.assign({ className: className, title: TooltipTitle }, props), Tag));
-};
-exports.NTag = NTag;

package/lib/components/Table/components/TableCell/components/NTagCell/nTagCell.js

@@ -1,33 +1,7 @@
-"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.NTagCell = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const typography_1 = require("../../../../../../theme/common/typography");
-const nTag_1 = require("./components/NTag/nTag");
+import { Chip as MChip, Typography, } from "@mui/material";
+import React, { forwardRef } from "react";
+import { TEXT_BODY_SMALL_400 } from "../../../../../../theme/common/typography";
+import { NTag } from "./components/NTag/nTag";
 // Template constants
 const MAX_DISPLAYABLE_VALUES = 1;
 /**
@@ -42,12 +16,11 @@ function stringifyMetadataValues(metadataValues) {
  * Renders tag for NTag component.
  * Tooltip children require forward ref.
  */
-const Tag = (0, react_1.forwardRef)(function Tag(props, ref) {
-    return react_1.default.createElement(material_1.Chip, Object.assign({ ref: ref }, props));
+const Tag = forwardRef(function Tag(props, ref) {
+    return React.createElement(MChip, { ref: ref, ...props });
 });
-const NTagCell = ({ label, TypographyProps, values, }) => {
+export const NTagCell = ({ label, TypographyProps, values, }) => {
     const metadataCount = values.length;
     const showNTag = metadataCount > MAX_DISPLAYABLE_VALUES;
-    return (react_1.default.createElement(react_1.default.Fragment, null, showNTag ? (react_1.default.createElement(nTag_1.NTag, { Tag: react_1.default.createElement(Tag, { label: `${metadataCount} ${label}`, variant: "ntag" }), TooltipTitle: react_1.default.createElement(material_1.Typography, { display: "block", variant: typography_1.TEXT_BODY_SMALL_400 }, stringifyMetadataValues(values)) })) : (values.map((value, v) => (react_1.default.createElement(material_1.Typography, Object.assign({ key: `${value}${v}`, variant: "inherit" }, TypographyProps), value))))));
+    return (React.createElement(React.Fragment, null, showNTag ? (React.createElement(NTag, { Tag: React.createElement(Tag, { label: `${metadataCount} ${label}`, variant: "ntag" }), TooltipTitle: React.createElement(Typography, { display: "block", variant: TEXT_BODY_SMALL_400 }, stringifyMetadataValues(values)) })) : (values.map((value, v) => (React.createElement(Typography, { key: `${value}${v}`, variant: "inherit", ...TypographyProps }, value))))));
 };
-exports.NTagCell = NTagCell;

package/lib/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.js

@@ -1,15 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RowSelectionCell = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const checkedIcon_1 = require("../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon");
-const uncheckedIcon_1 = require("../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon");
-const RowSelectionCell = ({ row, }) => {
+import { Checkbox as MCheckbox } from "@mui/material";
+import React from "react";
+import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+export const RowSelectionCell = ({ row, }) => {
     const { getIsSelected, getToggleSelectedHandler } = row;
-    return (react_1.default.createElement(material_1.Checkbox, { checked: getIsSelected(), checkedIcon: react_1.default.createElement(checkedIcon_1.CheckedIcon, null), icon: react_1.default.createElement(uncheckedIcon_1.UncheckedIcon, null), onChange: getToggleSelectedHandler() }));
+    return (React.createElement(MCheckbox, { checked: getIsSelected(), checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null), onChange: getToggleSelectedHandler() }));
 };
-exports.RowSelectionCell = RowSelectionCell;

package/lib/components/Table/components/TableHead/components/HeadSelectionCell/headSelectionCell.js

@@ -1,16 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeadSelectionCell = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const checkedIcon_1 = require("../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon");
-const indeterminateIcon_1 = require("../../../../../common/CustomIcon/components/IndeterminateIcon/indeterminateIcon");
-const uncheckedIcon_1 = require("../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon");
-const HeadSelectionCell = ({ tableInstance, }) => {
+import { Checkbox } from "@mui/material";
+import React from "react";
+import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { IndeterminateIcon } from "../../../../../common/CustomIcon/components/IndeterminateIcon/indeterminateIcon";
+import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+export const HeadSelectionCell = ({ tableInstance, }) => {
     const { getIsAllPageRowsSelected, getIsSomePageRowsSelected, getToggleAllRowsSelectedHandler, } = tableInstance;
-    return (react_1.default.createElement(material_1.Checkbox, { checked: getIsAllPageRowsSelected(), checkedIcon: react_1.default.createElement(checkedIcon_1.CheckedIcon, null), icon: react_1.default.createElement(uncheckedIcon_1.UncheckedIcon, null), indeterminate: getIsSomePageRowsSelected(), indeterminateIcon: react_1.default.createElement(indeterminateIcon_1.IndeterminateIcon, null), onChange: getToggleAllRowsSelectedHandler() }));
+    return (React.createElement(Checkbox, { checked: getIsAllPageRowsSelected(), checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null), indeterminate: getIsSomePageRowsSelected(), indeterminateIcon: React.createElement(IndeterminateIcon, null), onChange: getToggleAllRowsSelectedHandler() }));
 };
-exports.HeadSelectionCell = HeadSelectionCell;

package/lib/components/Table/components/TableHead/tableHead.js

@@ -1,41 +1,14 @@
-"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.TableHead = void 0;
-const material_1 = require("@mui/material");
-const react_table_1 = require("@tanstack/react-table");
-const react_1 = __importStar(require("react"));
-const entities_1 = require("../../common/entities");
-const utils_1 = require("../../common/utils");
-const utils_2 = require("../TableCell/common/utils");
-const TableHead = ({ rowDirection, tableInstance, }) => {
-    return (react_1.default.createElement(react_1.Fragment, null, rowDirection === entities_1.ROW_DIRECTION.DEFAULT &&
-        tableInstance.getHeaderGroups().map((headerGroup) => (react_1.default.createElement(material_1.TableHead, { key: headerGroup.id },
-            react_1.default.createElement(material_1.TableRow, null, headerGroup.headers.map((header) => {
+import { TableCell as MTableCell, TableHead as MTableHead, TableRow as MTableRow, TableSortLabel, } from "@mui/material";
+import { flexRender } from "@tanstack/react-table";
+import React, { Fragment } from "react";
+import { ROW_DIRECTION } from "../../common/entities";
+import { getTableSortLabelProps } from "../../common/utils";
+import { getTableCellPadding } from "../TableCell/common/utils";
+export const TableHead = ({ rowDirection, tableInstance, }) => {
+    return (React.createElement(Fragment, null, rowDirection === ROW_DIRECTION.DEFAULT &&
+        tableInstance.getHeaderGroups().map((headerGroup) => (React.createElement(MTableHead, { key: headerGroup.id },
+            React.createElement(MTableRow, null, headerGroup.headers.map((header) => {
                 const { column: { columnDef: { meta: { enableSortingInteraction = true } = {}, }, }, } = header;
-                return header.column.getIsGrouped() ? null : (react_1.default.createElement(material_1.TableCell, { key: header.id, padding: (0, utils_2.getTableCellPadding)(header.id) }, header.column.getCanSort() && enableSortingInteraction ? (react_1.default.createElement(material_1.TableSortLabel, Object.assign({}, (0, utils_1.getTableSortLabelProps)(header.column)), (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()))) : ((0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()))));
+                return header.column.getIsGrouped() ? null : (React.createElement(MTableCell, { key: header.id, padding: getTableCellPadding(header.id) }, header.column.getCanSort() && enableSortingInteraction ? (React.createElement(TableSortLabel, { ...getTableSortLabelProps(header.column) }, flexRender(header.column.columnDef.header, header.getContext()))) : (flexRender(header.column.columnDef.header, header.getContext()))));
             })))))));
 };
-exports.TableHead = TableHead;