@databiosphere/findable-ui 5.0.0 → 7.0.0

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

@@ -1,19 +1,13 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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.createElement(Typography, { variant: "text-body-400" }, " of "),
+            React.createElement(Typography, { variant: "text-body-small-500" }, totalResult))));
 };
-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("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" },
-            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)));
-};
-exports.PaginationSummary = PaginationSummary;

package/lib/components/Table/components/TableBody/tableBody.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { Table } from "@tanstack/react-table";
+import { RowData, Table } from "@tanstack/react-table";
 import { ROW_DIRECTION } from "../../common/entities";
-export interface TableBodyProps<T> {
+export interface TableBodyProps<T extends RowData> {
     rowDirection: ROW_DIRECTION;
     tableInstance: Table<T>;
 }
-export declare const TableBody: <T extends object>({ rowDirection, tableInstance, }: TableBodyProps<T>) => JSX.Element;
+export declare const TableBody: <T extends unknown>({ rowDirection, tableInstance, }: TableBodyProps<T>) => JSX.Element;

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.d.ts

@@ -1,8 +1,8 @@
-import { TableCellProps as MTableCellProps } from "@mui/material/TableCell/TableCell";
-import { CoreCell, CoreHeader } from "@tanstack/table-core";
+import { TableCellProps as MTableCellProps } from "@mui/material";
+import { CoreCell, CoreHeader, RowData } from "@tanstack/react-table";
 /**
  * Returns table cell padding based on the cell ID.
  * @param id - Cell ID.
  * @returns table cell padding.
  */
-export declare function getTableCellPadding<T extends object, TValue>(id: CoreHeader<T, TValue>["id"] | CoreCell<T, TValue>["id"]): MTableCellProps["padding"];
+export declare function getTableCellPadding<T extends RowData, TValue>(id: CoreHeader<T, TValue>["id"] | CoreCell<T, TValue>["id"]): MTableCellProps["padding"];

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.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+import { TypographyProps } from "../../../../../common/Typography/common/entities";
+export interface BasicCellProps {
+    TypographyProps?: TypographyProps;
+    value?: ReactNode;
+}
+export declare const BasicCell: ({ TypographyProps, value, }: BasicCellProps) => JSX.Element | null;

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

@@ -0,0 +1,28 @@
+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.createElement(Typography, { variant: "inherit", ...TypographyProps }, value));
+    }
+    if (isValueArray(value)) {
+        return (React.createElement(Fragment, null, value.map((v) => (React.createElement(Typography, { key: v, variant: "inherit", ...TypographyProps }, v)))));
+    }
+    return null;
+};
+/**
+ * Returns true if value is an array of strings.
+ * @param value - Value.
+ * @returns value is an array of strings.
+ */
+function isValueArray(value) {
+    return Array.isArray(value) && value.every(isValueNumberOrString);
+}
+/**
+ * Returns true if value is a number or a string.
+ * @param value - Value.
+ * @returns true if value is a number or a string.
+ */
+function isValueNumberOrString(value) {
+    return typeof value === "number" || typeof value === "string";
+}

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.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TooltipProps as MTooltipProps } from "@mui/material";
+export interface TooltipProps extends MTooltipProps {
+    className?: string;
+}
+export declare const Tooltip: ({ children, className, title, ...props }: TooltipProps) => JSX.Element;

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

@@ -0,0 +1,54 @@
+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",
+    options: {
+        fallbackPlacements: ["bottom", "right", "left"],
+    },
+};
+const DEFAULT_PREVENT_OVERFLOW_MODIFIER = {
+    enabled: true,
+    name: "preventOverflow",
+    options: {
+        padding: 16,
+    },
+};
+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)),
+            name: "maxHeight",
+            phase: "main",
+            requiresIfExists: ["offset"],
+        },
+        DEFAULT_FLIP_MODIFIER,
+        DEFAULT_PREVENT_OVERFLOW_MODIFIER,
+    ], []);
+    return (React.createElement(MTooltip, { arrow: true, className: className, onClose: () => setMaxHeight(undefined), slotProps: {
+            popper: { modifiers },
+            tooltip: { style: { display: "flex", maxHeight, padding: 0 } },
+        }, title: React.createElement(TooltipContent, null, title), ...props }, children));
+};
+/**
+ * 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 = detectOverflow(state);
+    const { placement } = state;
+    if (placement === "left" || placement === "right") {
+        return window.innerHeight - 32;
+    }
+    if (placement === "top") {
+        return state.rects.popper.height - overflow.top - 24;
+    }
+    if (placement === "bottom") {
+        return state.rects.popper.height - overflow.bottom - 24;
+    }
+}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const TooltipContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

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

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+export const TooltipContent = styled.span `
+  overflow: scroll;
+  overscroll-behavior: none;
+  padding: 8px 12px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;

package/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/nTag.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from "react";
+export interface NTagProps {
+    className?: string;
+    Tag: ReactElement;
+    TooltipTitle: ReactElement;
+}
+export declare const NTag: ({ className, Tag, TooltipTitle, ...props }: NTagProps) => JSX.Element;

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

@@ -0,0 +1,5 @@
+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));
+};

package/lib/components/Table/components/TableCell/components/NTagCell/nTagCell.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TypographyProps } from "../../../../../common/Typography/common/entities";
+export declare type MetadataValue = string;
+export interface NTagCellProps {
+    label: string;
+    TypographyProps?: TypographyProps;
+    values: MetadataValue[];
+}
+export declare const NTagCell: ({ label, TypographyProps, values, }: NTagCellProps) => JSX.Element;

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

@@ -0,0 +1,26 @@
+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;
+/**
+ * String-concatenates the specified list of metadata values to a string value, joined by a comma ",".
+ * @param metadataValues - List of metadata values.
+ * @returns the metadata values in a string, each value joined by a comma.
+ */
+function stringifyMetadataValues(metadataValues) {
+    return metadataValues.join(", ");
+}
+/**
+ * Renders tag for NTag component.
+ * Tooltip children require forward ref.
+ */
+const Tag = forwardRef(function Tag(props, ref) {
+    return React.createElement(MChip, { ref: ref, ...props });
+});
+export const NTagCell = ({ label, TypographyProps, values, }) => {
+    const metadataCount = values.length;
+    const showNTag = metadataCount > MAX_DISPLAYABLE_VALUES;
+    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))))));
+};

package/lib/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { Row } from "@tanstack/react-table";
-export interface RowSelectionCellProps<T> {
+import { Row, RowData } from "@tanstack/react-table";
+export interface RowSelectionCellProps<T extends RowData> {
     row: Row<T>;
 }
 export declare const RowSelectionCell: <T extends unknown>({ row, }: RowSelectionCellProps<T>) => JSX.Element;

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.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { Table } from "@tanstack/react-table";
-export interface HeadSelectionCellProps<T> {
+import { RowData, Table } from "@tanstack/react-table";
+export interface HeadSelectionCellProps<T extends RowData> {
     tableInstance: Table<T>;
 }
 export declare const HeadSelectionCell: <T extends unknown>({ tableInstance, }: HeadSelectionCellProps<T>) => JSX.Element;

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.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { Table } from "@tanstack/react-table";
+import { RowData, Table } from "@tanstack/react-table";
 import { ROW_DIRECTION } from "../../common/entities";
-export interface TableHeadProps<T> {
+export interface TableHeadProps<T extends RowData> {
     rowDirection: ROW_DIRECTION;
     tableInstance: Table<T>;
 }
-export declare const TableHead: <T extends object>({ rowDirection, tableInstance, }: TableHeadProps<T>) => JSX.Element;
+export declare const TableHead: <T extends unknown>({ rowDirection, tableInstance, }: TableHeadProps<T>) => JSX.Element;