@trackunit/react-table-base-components 0.0.401 → 0.0.403

package/index.cjs.js

@@ -93,6 +93,21 @@ const LinkCell = ({ link, type, ...rest }) => {
     return (jsxRuntime.jsx(reactComponents.ExternalLink, { href: `${linkPrefix}${link}`, ...rest, onClick: handleClick, children: link }));
 };
 
+const cvaMultiRowTableCellSection = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "justify-center", "overflow-hidden"]);
+const cvaMultiRowTableCell = cssClassVarianceUtilities.cvaMerge(["flex", "justify-start", "pl-2"]);
+const cvaMainRowText = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "text-ellipsis", "font-semibold"]);
+const cvaSecondaryRowText = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "text-ellipsis", "text-neutral-400"]);
+
+/**
+ * The MultiRowTableCell component helps to display two rows inside a table cell.
+ *
+ * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
+ * @returns {JSX.Element} MultiRowTableCell component
+ */
+const MultiRowTableCell = ({ main, secondary, dataTestId }) => {
+    return (jsxRuntime.jsx("div", { className: cvaMultiRowTableCell(), children: jsxRuntime.jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsxRuntime.jsx("div", { className: cvaMainRowText(), children: main }) : main, secondary && typeof secondary === "string" ? (jsxRuntime.jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
+};
+
 const cvaMultiValueTextCellWrapper = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "items-center", "gap-1", "overflow-hidden"]);
 const cvaMultiValueTextCellTooltip = cssClassVarianceUtilities.cvaMerge(["whitespace-no-wrap", "overflow-hidden", "text-ellipsis"]);
 
@@ -420,6 +435,7 @@ exports.DateTimeCell = DateTimeCell;
 exports.ImageCell = ImageCell;
 exports.IndicatorCell = IndicatorCell;
 exports.LinkCell = LinkCell;
+exports.MultiRowTableCell = MultiRowTableCell;
 exports.MultiValueTextCell = MultiValueTextCell;
 exports.NoticeCell = NoticeCell;
 exports.NumberCell = NumberCell;

package/index.esm.js

@@ -91,6 +91,21 @@ const LinkCell = ({ link, type, ...rest }) => {
     return (jsx(ExternalLink, { href: `${linkPrefix}${link}`, ...rest, onClick: handleClick, children: link }));
 };
 
+const cvaMultiRowTableCellSection = cvaMerge(["flex", "flex-col", "justify-center", "overflow-hidden"]);
+const cvaMultiRowTableCell = cvaMerge(["flex", "justify-start", "pl-2"]);
+const cvaMainRowText = cvaMerge(["overflow-hidden", "text-ellipsis", "font-semibold"]);
+const cvaSecondaryRowText = cvaMerge(["overflow-hidden", "text-ellipsis", "text-neutral-400"]);
+
+/**
+ * The MultiRowTableCell component helps to display two rows inside a table cell.
+ *
+ * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
+ * @returns {JSX.Element} MultiRowTableCell component
+ */
+const MultiRowTableCell = ({ main, secondary, dataTestId }) => {
+    return (jsx("div", { className: cvaMultiRowTableCell(), children: jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsx("div", { className: cvaMainRowText(), children: main }) : main, secondary && typeof secondary === "string" ? (jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
+};
+
 const cvaMultiValueTextCellWrapper = cvaMerge(["flex", "flex-row", "items-center", "gap-1", "overflow-hidden"]);
 const cvaMultiValueTextCellTooltip = cvaMerge(["whitespace-no-wrap", "overflow-hidden", "text-ellipsis"]);
 
@@ -412,4 +427,4 @@ const cvaTr = cvaMerge(["border-b", "border-neutral-300", "w-full", "h-max"], {
     },
 });
 
-export { ButtonCell, CheckboxCell, DateTimeCell, ImageCell, IndicatorCell, LinkCell, MultiValueTextCell, NoticeCell, NumberCell, PlainDateCell, ResizeHandle, SortIndicator, TableRoot, TagsCell, Tbody, Td, TextCell, Tfoot, Th, Thead, Tr };
+export { ButtonCell, CheckboxCell, DateTimeCell, ImageCell, IndicatorCell, LinkCell, MultiRowTableCell, MultiValueTextCell, NoticeCell, NumberCell, PlainDateCell, ResizeHandle, SortIndicator, TableRoot, TagsCell, Tbody, Td, TextCell, Tfoot, Th, Thead, Tr };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "0.0.401",
+  "version": "0.0.403",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/MultiRowTableCell/MultiRowTableCell.d.ts

@@ -0,0 +1,18 @@
+import { CommonProps } from "@trackunit/react-components";
+export interface MultiRowTableCellProps extends CommonProps {
+    /**
+     * Main row of the cell.
+     */
+    main: React.ReactNode;
+    /**
+     * Secondary row of the cell rendered below the main row.
+     */
+    secondary: React.ReactNode;
+}
+/**
+ * The MultiRowTableCell component helps to display two rows inside a table cell.
+ *
+ * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
+ * @returns {JSX.Element} MultiRowTableCell component
+ */
+export declare const MultiRowTableCell: ({ main, secondary, dataTestId }: MultiRowTableCellProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/MultiRowTableCell/MultiRowTableCell.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { MultiRowTableCell } from "./MultiRowTableCell";
+type Story = StoryObj<typeof MultiRowTableCell>;
+declare const meta: Meta<typeof MultiRowTableCell>;
+export default meta;
+export declare const packageName: () => import("react/jsx-runtime").JSX.Element;
+export declare const Default: Story;
+export declare const Variants: () => import("react/jsx-runtime").JSX.Element;

package/src/components/MultiRowTableCell/MultiRowTableCell.variants.d.ts

@@ -0,0 +1,4 @@
+export declare const cvaMultiRowTableCellSection: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaMultiRowTableCell: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaMainRowText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSecondaryRowText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/MultiRowTableCell/index.d.ts

@@ -0,0 +1 @@
+export * from "./MultiRowTableCell";

package/src/index.d.ts

@@ -4,6 +4,7 @@ export * from "./components/DateTimeCell/DateTimeCell";
 export * from "./components/ImageCell/ImageCell";
 export * from "./components/IndicatorCell/IndicatorCell";
 export * from "./components/LinkCell/LinkCell";
+export * from "./components/MultiRowTableCell/MultiRowTableCell";
 export * from "./components/MultiValueTextCell/MultiValueTextCell";
 export * from "./components/NoticeCell/NoticeCell";
 export * from "./components/NumberCell/NumberCell";