@trackunit/react-table-base-components 2.7.22-alpha-15da733192f.0 → 2.8.1

package/index.cjs.js

@@ -12,8 +12,6 @@ var react = require('react');
 var sharedUtils = require('@trackunit/shared-utils');
 
 var defaultTranslations = {
-	"copyableCell.copied": "Copied!",
-	"copyableCell.copy": "Copy",
 	"rowActions.moreActions": "More actions"
 };
 
@@ -153,85 +151,6 @@ const CheckboxCell = ({ checked, className, "data-testid": dataTestId, style })
     return (jsxRuntime.jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, style: style, children: jsxRuntime.jsx(reactFormComponents.Checkbox, { checked: checked, readOnly: true }) }));
 };
 
-const cvaMultiRowTableCellSection = cssClassVarianceUtilities.cva({
-    base: ["flex", "flex-col", "justify-center", "min-w-0", "max-w-full", "overflow-hidden"],
-});
-const cvaMultiRowTableCell = cssClassVarianceUtilities.cva({ base: ["flex", "justify-start", "min-w-0", "max-w-full"] });
-const cvaMainRowText = cssClassVarianceUtilities.cva({ base: ["overflow-hidden", "text-ellipsis", "text-sm"] });
-const cvaSecondaryRowText = cssClassVarianceUtilities.cva({
-    base: ["overflow-hidden", "text-ellipsis", "text-neutral-500", "text-xs"],
-});
-
-/**
- * MultiRowTableCell renders two stacked rows inside a single table cell — a primary `main` row
- * and a secondary row below it. String values are automatically styled with appropriate text sizes.
- *
- * ### When to use
- * Use MultiRowTableCell when a table cell needs to display a primary value with secondary metadata below —
- * for example, an asset name with its serial number, or a user name with their email.
- *
- * ### When not to use
- * Do not use MultiRowTableCell for single-line text — use `TextCell`.
- *
- * @example Name with description in a table cell
- * ```tsx
- * import { MultiRowTableCell } from "@trackunit/react-table-base-components";
- *
- * const cell = ({ row }) => (
- *   <MultiRowTableCell main={row.original.name} secondary={row.original.serialNumber} />
- * );
- * ```
- * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
- * @returns {ReactElement} MultiRowTableCell component
- */
-const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, className, style, }) => {
-    return (jsxRuntime.jsx("div", { className: cvaMultiRowTableCell({ className }), style: style, children: jsxRuntime.jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsxRuntime.jsx("div", { className: cvaMainRowText(), children: main }) : main, typeof secondary === "string" && secondary !== "" ? (jsxRuntime.jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
-};
-
-const cvaCopyableCell = cssClassVarianceUtilities.cva({ base: ["overflow-hidden", "w-fit"] });
-
-/**
- * CopyableCell renders a table cell with click-to-copy functionality.
- * Supports single-line and multi-line layouts.
- *
- * ### When to use
- * Use CopyableCell inside table column definitions when a cell value (ID, name, reference) should be copyable.
- *
- * ### When not to use
- * For standalone copyable text outside of tables, use `CopyableText` from `@trackunit/react-components`.
- *
- * @example Single-line copyable cell
- * ```tsx
- * import { CopyableCell } from "@trackunit/react-table-base-components";
- *
- * const cell = ({ getValue }) => (
- *   <CopyableCell text={getValue()} />
- * );
- * ```
- * @example Multi-line copyable cell
- * ```tsx
- * import { CopyableCell } from "@trackunit/react-table-base-components";
- *
- * const cell = ({ row }) => (
- *   <CopyableCell
- *     text={String(row.original.customerId)}
- *     secondary={{ text: row.original.name }}
- *   />
- * );
- * ```
- * @param {CopyableCellProps} props - The props for the CopyableCell component
- * @returns {ReactElement} CopyableCell component
- */
-const CopyableCell = ({ text, secondary, "data-testid": dataTestId, className, style, }) => {
-    const [t] = useTranslation();
-    const copyLabel = t("copyableCell.copy");
-    const copiedLabel = t("copyableCell.copied");
-    if (secondary !== undefined) {
-        return (jsxRuntime.jsx(MultiRowTableCell, { className: cvaCopyableCell({ className }), "data-testid": dataTestId, main: jsxRuntime.jsx(reactComponents.CopyableText, { className: "self-start", copiedLabel: copiedLabel, copyLabel: copyLabel, text: text }), secondary: jsxRuntime.jsx(reactComponents.CopyableText, { className: "self-start", copiedLabel: copiedLabel, copyLabel: copyLabel, size: "xs", text: secondary.text }), style: style }));
-    }
-    return (jsxRuntime.jsx(reactComponents.CopyableText, { className: cvaCopyableCell({ className }), copiedLabel: copiedLabel, copyLabel: copyLabel, "data-testid": dataTestId, style: style, text: text }));
-};
-
 const cvaDateTimeCell = cssClassVarianceUtilities.cva({ base: [""] });
 const cvaDateTime$1 = cssClassVarianceUtilities.cva({ base: ["slashed-zero", "text-sm", "text-ellipsis"] });
 const cvaDateTimeSince$1 = cssClassVarianceUtilities.cva({ base: ["slashed-zero", "text-neutral-500", "text-xs", "text-ellipsis"] });
@@ -578,6 +497,41 @@ const LinkCell = ({ link, type, className, ref, ...rest }) => {
     return (jsxRuntime.jsx(reactComponents.ExternalLink, { className: cvaLinkCell({ className }), href: `${linkPrefix}${link}`, ref: ref, ...rest, color: "neutral", onClick: handleClick, children: link }));
 };
 
+const cvaMultiRowTableCellSection = cssClassVarianceUtilities.cva({
+    base: ["flex", "flex-col", "justify-center", "min-w-0", "max-w-full", "overflow-hidden"],
+});
+const cvaMultiRowTableCell = cssClassVarianceUtilities.cva({ base: ["flex", "justify-start", "min-w-0", "max-w-full"] });
+const cvaMainRowText = cssClassVarianceUtilities.cva({ base: ["overflow-hidden", "text-ellipsis", "text-sm"] });
+const cvaSecondaryRowText = cssClassVarianceUtilities.cva({
+    base: ["overflow-hidden", "text-ellipsis", "text-neutral-500", "text-xs"],
+});
+
+/**
+ * MultiRowTableCell renders two stacked rows inside a single table cell — a primary `main` row
+ * and a secondary row below it. String values are automatically styled with appropriate text sizes.
+ *
+ * ### When to use
+ * Use MultiRowTableCell when a table cell needs to display a primary value with secondary metadata below —
+ * for example, an asset name with its serial number, or a user name with their email.
+ *
+ * ### When not to use
+ * Do not use MultiRowTableCell for single-line text — use `TextCell`.
+ *
+ * @example Name with description in a table cell
+ * ```tsx
+ * import { MultiRowTableCell } from "@trackunit/react-table-base-components";
+ *
+ * const cell = ({ row }) => (
+ *   <MultiRowTableCell main={row.original.name} secondary={row.original.serialNumber} />
+ * );
+ * ```
+ * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
+ * @returns {ReactElement} MultiRowTableCell component
+ */
+const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, className, style, }) => {
+    return (jsxRuntime.jsx("div", { className: cvaMultiRowTableCell({ className }), style: style, children: jsxRuntime.jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsxRuntime.jsx("div", { className: cvaMainRowText(), children: main }) : main, typeof secondary === "string" && secondary !== "" ? (jsxRuntime.jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
+};
+
 /**
  * Generic list to be used as tooltip content.
  * The component is data-shape agnostic. It supports primitives, React elements,
@@ -1367,7 +1321,6 @@ setupLibraryTranslations();
 
 exports.ButtonCell = ButtonCell;
 exports.CheckboxCell = CheckboxCell;
-exports.CopyableCell = CopyableCell;
 exports.DateTimeCell = DateTimeCell;
 exports.HighlightCell = HighlightCell;
 exports.IdentityCell = IdentityCell;

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { Button, Icon, CopyableText, Highlight, Heading, ExternalLink, DetailsList, Indicator, Spinner, Tooltip, Text, Tag, Notice, IconButton, MoreMenu, MenuContent, MenuItem, MenuDivider, useMeasure, useMergeRefs } from '@trackunit/react-components';
+import { Button, Icon, Highlight, Heading, ExternalLink, DetailsList, Indicator, Spinner, Tooltip, Text, Tag, Notice, IconButton, MoreMenu, MenuContent, MenuItem, MenuDivider, useMeasure, useMergeRefs } from '@trackunit/react-components';
 import { twMerge } from 'tailwind-merge';
 import { Checkbox } from '@trackunit/react-form-components';
 import { cva } from '@trackunit/css-class-variance-utilities';
@@ -10,8 +10,6 @@ import { useMemo, useState, useEffect, isValidElement, cloneElement } from 'reac
 import { DateTimeFormat } from '@trackunit/shared-utils';
 
 var defaultTranslations = {
-	"copyableCell.copied": "Copied!",
-	"copyableCell.copy": "Copy",
 	"rowActions.moreActions": "More actions"
 };
 
@@ -151,85 +149,6 @@ const CheckboxCell = ({ checked, className, "data-testid": dataTestId, style })
     return (jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, style: style, children: jsx(Checkbox, { checked: checked, readOnly: true }) }));
 };
 
-const cvaMultiRowTableCellSection = cva({
-    base: ["flex", "flex-col", "justify-center", "min-w-0", "max-w-full", "overflow-hidden"],
-});
-const cvaMultiRowTableCell = cva({ base: ["flex", "justify-start", "min-w-0", "max-w-full"] });
-const cvaMainRowText = cva({ base: ["overflow-hidden", "text-ellipsis", "text-sm"] });
-const cvaSecondaryRowText = cva({
-    base: ["overflow-hidden", "text-ellipsis", "text-neutral-500", "text-xs"],
-});
-
-/**
- * MultiRowTableCell renders two stacked rows inside a single table cell — a primary `main` row
- * and a secondary row below it. String values are automatically styled with appropriate text sizes.
- *
- * ### When to use
- * Use MultiRowTableCell when a table cell needs to display a primary value with secondary metadata below —
- * for example, an asset name with its serial number, or a user name with their email.
- *
- * ### When not to use
- * Do not use MultiRowTableCell for single-line text — use `TextCell`.
- *
- * @example Name with description in a table cell
- * ```tsx
- * import { MultiRowTableCell } from "@trackunit/react-table-base-components";
- *
- * const cell = ({ row }) => (
- *   <MultiRowTableCell main={row.original.name} secondary={row.original.serialNumber} />
- * );
- * ```
- * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
- * @returns {ReactElement} MultiRowTableCell component
- */
-const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, className, style, }) => {
-    return (jsx("div", { className: cvaMultiRowTableCell({ className }), style: style, children: jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsx("div", { className: cvaMainRowText(), children: main }) : main, typeof secondary === "string" && secondary !== "" ? (jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
-};
-
-const cvaCopyableCell = cva({ base: ["overflow-hidden", "w-fit"] });
-
-/**
- * CopyableCell renders a table cell with click-to-copy functionality.
- * Supports single-line and multi-line layouts.
- *
- * ### When to use
- * Use CopyableCell inside table column definitions when a cell value (ID, name, reference) should be copyable.
- *
- * ### When not to use
- * For standalone copyable text outside of tables, use `CopyableText` from `@trackunit/react-components`.
- *
- * @example Single-line copyable cell
- * ```tsx
- * import { CopyableCell } from "@trackunit/react-table-base-components";
- *
- * const cell = ({ getValue }) => (
- *   <CopyableCell text={getValue()} />
- * );
- * ```
- * @example Multi-line copyable cell
- * ```tsx
- * import { CopyableCell } from "@trackunit/react-table-base-components";
- *
- * const cell = ({ row }) => (
- *   <CopyableCell
- *     text={String(row.original.customerId)}
- *     secondary={{ text: row.original.name }}
- *   />
- * );
- * ```
- * @param {CopyableCellProps} props - The props for the CopyableCell component
- * @returns {ReactElement} CopyableCell component
- */
-const CopyableCell = ({ text, secondary, "data-testid": dataTestId, className, style, }) => {
-    const [t] = useTranslation();
-    const copyLabel = t("copyableCell.copy");
-    const copiedLabel = t("copyableCell.copied");
-    if (secondary !== undefined) {
-        return (jsx(MultiRowTableCell, { className: cvaCopyableCell({ className }), "data-testid": dataTestId, main: jsx(CopyableText, { className: "self-start", copiedLabel: copiedLabel, copyLabel: copyLabel, text: text }), secondary: jsx(CopyableText, { className: "self-start", copiedLabel: copiedLabel, copyLabel: copyLabel, size: "xs", text: secondary.text }), style: style }));
-    }
-    return (jsx(CopyableText, { className: cvaCopyableCell({ className }), copiedLabel: copiedLabel, copyLabel: copyLabel, "data-testid": dataTestId, style: style, text: text }));
-};
-
 const cvaDateTimeCell = cva({ base: [""] });
 const cvaDateTime$1 = cva({ base: ["slashed-zero", "text-sm", "text-ellipsis"] });
 const cvaDateTimeSince$1 = cva({ base: ["slashed-zero", "text-neutral-500", "text-xs", "text-ellipsis"] });
@@ -576,6 +495,41 @@ const LinkCell = ({ link, type, className, ref, ...rest }) => {
     return (jsx(ExternalLink, { className: cvaLinkCell({ className }), href: `${linkPrefix}${link}`, ref: ref, ...rest, color: "neutral", onClick: handleClick, children: link }));
 };
 
+const cvaMultiRowTableCellSection = cva({
+    base: ["flex", "flex-col", "justify-center", "min-w-0", "max-w-full", "overflow-hidden"],
+});
+const cvaMultiRowTableCell = cva({ base: ["flex", "justify-start", "min-w-0", "max-w-full"] });
+const cvaMainRowText = cva({ base: ["overflow-hidden", "text-ellipsis", "text-sm"] });
+const cvaSecondaryRowText = cva({
+    base: ["overflow-hidden", "text-ellipsis", "text-neutral-500", "text-xs"],
+});
+
+/**
+ * MultiRowTableCell renders two stacked rows inside a single table cell — a primary `main` row
+ * and a secondary row below it. String values are automatically styled with appropriate text sizes.
+ *
+ * ### When to use
+ * Use MultiRowTableCell when a table cell needs to display a primary value with secondary metadata below —
+ * for example, an asset name with its serial number, or a user name with their email.
+ *
+ * ### When not to use
+ * Do not use MultiRowTableCell for single-line text — use `TextCell`.
+ *
+ * @example Name with description in a table cell
+ * ```tsx
+ * import { MultiRowTableCell } from "@trackunit/react-table-base-components";
+ *
+ * const cell = ({ row }) => (
+ *   <MultiRowTableCell main={row.original.name} secondary={row.original.serialNumber} />
+ * );
+ * ```
+ * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
+ * @returns {ReactElement} MultiRowTableCell component
+ */
+const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, className, style, }) => {
+    return (jsx("div", { className: cvaMultiRowTableCell({ className }), style: style, children: jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsx("div", { className: cvaMainRowText(), children: main }) : main, typeof secondary === "string" && secondary !== "" ? (jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
+};
+
 /**
  * Generic list to be used as tooltip content.
  * The component is data-shape agnostic. It supports primitives, React elements,
@@ -1363,4 +1317,4 @@ const cvaTr = cva({
  */
 setupLibraryTranslations();
 
-export { ButtonCell, CheckboxCell, CopyableCell, DateTimeCell, HighlightCell, IdentityCell, ImageCell, IndicatorCell, LinkCell, ListTooltip, MultiRowTableCell, MultiValueTextCell, NoticeCell, NumberCell, PlainDateCell, ResizeHandle, RowActions, SortIndicator, TableRoot, TagsCell, Tbody, Td, TextCell, Tfoot, Th, Thead, Tr };
+export { ButtonCell, CheckboxCell, DateTimeCell, HighlightCell, IdentityCell, ImageCell, IndicatorCell, LinkCell, ListTooltip, MultiRowTableCell, MultiValueTextCell, NoticeCell, NumberCell, PlainDateCell, ResizeHandle, RowActions, SortIndicator, TableRoot, TagsCell, Tbody, Td, TextCell, Tfoot, Th, Thead, Tr };

package/migrations/utils/jsx-utils.js

@@ -0,0 +1,201 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.insertAttributeIntoOpeningTag = exports.logSummary = exports.parseTsx = exports.hasSpreadAttribute = exports.findJsxAttribute = exports.findJsxElements = exports.getLocalAliasFor = exports.getImportedAliases = exports.visitTsFiles = exports.visitTsxFiles = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const ts = tslib_1.__importStar(require("typescript"));
+const TSX_EXTENSIONS = [".tsx", ".jsx"];
+const TS_EXTENSIONS = [".ts", ".tsx", ".jsx"];
+const isTsxFile = (filePath) => TSX_EXTENSIONS.some(ext => filePath.endsWith(ext));
+const isTsFile = (filePath) => TS_EXTENSIONS.some(ext => filePath.endsWith(ext));
+const isUnderNodeModules = (filePath) => filePath.includes("/node_modules/") || filePath.startsWith("node_modules/");
+const isUnderDist = (filePath) => filePath.includes("/dist/") || filePath.startsWith("dist/") || filePath.includes("/.nx/");
+/**
+ * Visits every `.tsx`/`.jsx` file under the workspace root and invokes the
+ * callback with the file path and its current contents. Files that don't
+ * include the marker substring are skipped, which makes large workspaces
+ * cheap to scan.
+ */
+const visitTsxFiles = (tree, marker, callback) => {
+    let touched = 0;
+    (0, devkit_1.visitNotIgnoredFiles)(tree, "/", filePath => {
+        if (!isTsxFile(filePath))
+            return;
+        if (isUnderNodeModules(filePath) || isUnderDist(filePath))
+            return;
+        const content = tree.read(filePath, "utf-8");
+        if (content === null)
+            return;
+        if (!content.includes(marker))
+            return;
+        const updated = callback(filePath, content);
+        if (updated !== null && updated !== undefined && updated !== content) {
+            tree.write(filePath, updated);
+            touched += 1;
+        }
+    });
+    return touched;
+};
+exports.visitTsxFiles = visitTsxFiles;
+/**
+ * Same as {@link visitTsxFiles} but also includes plain `.ts` files. Use this
+ * when the codemod also rewrites non-JSX files such as helpers or hooks.
+ */
+const visitTsFiles = (tree, marker, callback) => {
+    let touched = 0;
+    (0, devkit_1.visitNotIgnoredFiles)(tree, "/", filePath => {
+        if (!isTsFile(filePath))
+            return;
+        if (isUnderNodeModules(filePath) || isUnderDist(filePath))
+            return;
+        const content = tree.read(filePath, "utf-8");
+        if (content === null)
+            return;
+        if (!content.includes(marker))
+            return;
+        const updated = callback(filePath, content);
+        if (updated !== null && updated !== undefined && updated !== content) {
+            tree.write(filePath, updated);
+            touched += 1;
+        }
+    });
+    return touched;
+};
+exports.visitTsFiles = visitTsFiles;
+/**
+ * Mapping of imported component aliases to their original names for a given
+ * package. For `import { IconButton as Btn } from "@trackunit/react-components"`
+ * this returns `{ Btn: "IconButton" }`.
+ *
+ * Returns `null` when the file imports nothing from the package, which lets
+ * callers short-circuit before parsing JSX.
+ */
+const getImportedAliases = (sourceFile, packageName) => {
+    const result = {};
+    let found = false;
+    for (const stmt of sourceFile.statements) {
+        if (!ts.isImportDeclaration(stmt))
+            continue;
+        const moduleSpecifier = stmt.moduleSpecifier;
+        if (!ts.isStringLiteral(moduleSpecifier))
+            continue;
+        if (moduleSpecifier.text !== packageName)
+            continue;
+        const namedBindings = stmt.importClause?.namedBindings;
+        if (namedBindings === undefined || !ts.isNamedImports(namedBindings))
+            continue;
+        for (const element of namedBindings.elements) {
+            const localName = element.name.text;
+            const importedName = element.propertyName?.text ?? localName;
+            result[localName] = importedName;
+            found = true;
+        }
+    }
+    return found ? result : null;
+};
+exports.getImportedAliases = getImportedAliases;
+/**
+ * Returns the local alias used in this file for `originalName` when imported
+ * from `packageName`, or `null` if the component is not imported.
+ */
+const getLocalAliasFor = (sourceFile, packageName, originalName) => {
+    const aliases = (0, exports.getImportedAliases)(sourceFile, packageName);
+    if (aliases === null)
+        return null;
+    for (const [local, original] of Object.entries(aliases)) {
+        if (original === originalName)
+            return local;
+    }
+    return null;
+};
+exports.getLocalAliasFor = getLocalAliasFor;
+/**
+ * Finds every JSX element whose tag name resolves to one of `tagNames`
+ * (typically the local aliases returned by {@link getImportedAliases}).
+ *
+ * The result intentionally includes both opening and full elements so callers
+ * can manipulate attributes (via `openingElement`) or wrap/replace the whole
+ * element (via `element`).
+ */
+const findJsxElements = (sourceFile, tagNames) => {
+    const matches = [];
+    const tagSet = new Set(tagNames);
+    const visit = (node) => {
+        if (ts.isJsxSelfClosingElement(node)) {
+            if (ts.isIdentifier(node.tagName) && tagSet.has(node.tagName.text)) {
+                matches.push({ openingElement: node, element: node });
+            }
+        }
+        else if (ts.isJsxElement(node)) {
+            const opening = node.openingElement;
+            if (ts.isIdentifier(opening.tagName) && tagSet.has(opening.tagName.text)) {
+                matches.push({ openingElement: opening, element: node });
+            }
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return matches;
+};
+exports.findJsxElements = findJsxElements;
+/**
+ * Looks up a named JSX attribute on the opening element. Returns `null` when
+ * the attribute is missing or part of a spread attribute (which we cannot
+ * statically inspect).
+ */
+const findJsxAttribute = (openingElement, attributeName) => {
+    for (const attr of openingElement.attributes.properties) {
+        if (!ts.isJsxAttribute(attr))
+            continue;
+        if (!ts.isIdentifier(attr.name))
+            continue;
+        if (attr.name.text === attributeName)
+            return attr;
+    }
+    return null;
+};
+exports.findJsxAttribute = findJsxAttribute;
+/**
+ * `true` when the element forwards a spread expression such as `{...rest}`,
+ * which means we can't be sure which attributes are actually set.
+ */
+const hasSpreadAttribute = (openingElement) => {
+    return openingElement.attributes.properties.some(prop => ts.isJsxSpreadAttribute(prop));
+};
+exports.hasSpreadAttribute = hasSpreadAttribute;
+/**
+ * Parses the file as TSX so JSX is recognised. We do not need a full program
+ * here; tsquery's `ast` helper produces a script-kind source file which loses
+ * JSX context, so we go through `createSourceFile` directly.
+ */
+const parseTsx = (content, fileName = "file.tsx") => ts.createSourceFile(fileName, content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+exports.parseTsx = parseTsx;
+/**
+ * Helper for codemods to log a one-line summary at the end of a run. Migration
+ * runners aggregate logs per migration, so this keeps output focused.
+ */
+const logSummary = (migrationName, touched, manualReviewNeeded) => {
+    if (touched === 0) {
+        devkit_1.logger.info(`  ${migrationName}: no files changed`);
+        return;
+    }
+    const reviewSuffix = manualReviewNeeded !== undefined && manualReviewNeeded > 0
+        ? ` (${manualReviewNeeded} location(s) need manual review)`
+        : "";
+    devkit_1.logger.info(`  ${migrationName}: updated ${touched} file(s)${reviewSuffix}`);
+};
+exports.logSummary = logSummary;
+/**
+ * Inserts an attribute string immediately after the tag name (so the new
+ * attribute appears first). Returns the resulting source content.
+ *
+ * The added attribute is rendered verbatim, so callers are responsible for
+ * including the leading space (e.g. ` title="Close"`).
+ */
+const insertAttributeIntoOpeningTag = (content, openingElement, attributeText) => {
+    const tagName = openingElement.tagName;
+    const insertPos = tagName.getEnd();
+    return `${content.slice(0, insertPos)} ${attributeText}${content.slice(insertPos)}`;
+};
+exports.insertAttributeIntoOpeningTag = insertAttributeIntoOpeningTag;
+//# sourceMappingURL=jsx-utils.js.map

package/migrations/v3-0-0/copyablecell-to-copy-pair.js

@@ -0,0 +1,193 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.copyableCellToCopyPair = void 0;
+const tslib_1 = require("tslib");
+const ts = tslib_1.__importStar(require("typescript"));
+const jsx_utils_1 = require("../utils/jsx-utils");
+const TABLE_PACKAGE = "@trackunit/react-table-base-components";
+const COMPONENTS_PACKAGE = "@trackunit/react-components";
+const COMPONENT_NAME = "CopyableCell";
+/**
+ * The expression a `text`-like attribute resolves to: `text="abc"` yields
+ * `"abc"`, `text={value}` yields `value`.
+ */
+const textExpression = (attr) => {
+    const initializer = attr.initializer;
+    if (initializer === undefined)
+        return null;
+    if (ts.isStringLiteral(initializer))
+        return initializer.getText();
+    if (ts.isJsxExpression(initializer) && initializer.expression !== undefined) {
+        return initializer.expression.getText();
+    }
+    return null;
+};
+/** For `secondary={{ text: X }}` returns the text of `X`; anything else is null. */
+const secondaryTextExpression = (attr) => {
+    const initializer = attr.initializer;
+    if (initializer === undefined || !ts.isJsxExpression(initializer) || initializer.expression === undefined) {
+        return null;
+    }
+    const expression = initializer.expression;
+    if (!ts.isObjectLiteralExpression(expression))
+        return null;
+    for (const prop of expression.properties) {
+        if (ts.isPropertyAssignment(prop) && ts.isIdentifier(prop.name) && prop.name.text === "text") {
+            return prop.initializer.getText();
+        }
+    }
+    return null;
+};
+const renderPair = (textExpr, secondaryRow) => {
+    const textProps = [
+        `className="min-w-0 truncate${secondaryRow ? " text-neutral-500" : ""}"`,
+        secondaryRow ? `size="small"` : null,
+        `type="span"`,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return `<div className="flex min-w-0 max-w-full items-center overflow-hidden"><Text ${textProps}>{${textExpr}}</Text><CopyButton className="shrink-0" size="extraSmall" value={${textExpr}} /></div>`;
+};
+const attributeSourceText = (attr) => attr !== null && attr.initializer !== undefined ? attr.initializer.getText() : null;
+const removeNamedImport = (content, packageName, name) => {
+    const sourceFile = (0, jsx_utils_1.parseTsx)(content, "source.tsx");
+    for (const stmt of sourceFile.statements) {
+        if (!ts.isImportDeclaration(stmt))
+            continue;
+        const moduleSpecifier = stmt.moduleSpecifier;
+        if (!ts.isStringLiteral(moduleSpecifier) || moduleSpecifier.text !== packageName)
+            continue;
+        const namedBindings = stmt.importClause?.namedBindings;
+        if (namedBindings === undefined || !ts.isNamedImports(namedBindings))
+            continue;
+        const remaining = namedBindings.elements.filter(el => (el.propertyName?.text ?? el.name.text) !== name);
+        if (remaining.length === namedBindings.elements.length)
+            continue;
+        if (remaining.length === 0) {
+            const start = stmt.getFullStart();
+            const end = stmt.getEnd();
+            const trailing = content.slice(end).startsWith("\n") ? end + 1 : end;
+            return `${content.slice(0, start)}${content.slice(trailing)}`;
+        }
+        const elementsText = remaining.map(el => el.getText()).join(", ");
+        return `${content.slice(0, namedBindings.getStart())}{ ${elementsText} }${content.slice(namedBindings.getEnd())}`;
+    }
+    return content;
+};
+const ensureNamedImport = (content, packageName, namesToAdd) => {
+    const sourceFile = (0, jsx_utils_1.parseTsx)(content, "source.tsx");
+    const aliases = (0, jsx_utils_1.getImportedAliases)(sourceFile, packageName) ?? {};
+    const missing = namesToAdd.filter(name => !Object.values(aliases).includes(name));
+    if (missing.length === 0)
+        return content;
+    for (const stmt of sourceFile.statements) {
+        if (!ts.isImportDeclaration(stmt))
+            continue;
+        const moduleSpecifier = stmt.moduleSpecifier;
+        if (!ts.isStringLiteral(moduleSpecifier) || moduleSpecifier.text !== packageName)
+            continue;
+        const namedBindings = stmt.importClause?.namedBindings;
+        if (namedBindings === undefined || !ts.isNamedImports(namedBindings))
+            continue;
+        const elementsText = namedBindings.elements.map(el => el.getText()).join(", ");
+        const merged = [elementsText, ...missing].join(", ");
+        return `${content.slice(0, namedBindings.getStart())}{ ${merged} }${content.slice(namedBindings.getEnd())}`;
+    }
+    const importLine = `import { ${missing.join(", ")} } from "${packageName}";\n`;
+    return `${importLine}${content}`;
+};
+let manualReviewCount = 0;
+const transformCopyableCellUsage = (filePath, content) => {
+    const sourceFile = (0, jsx_utils_1.parseTsx)(content, filePath);
+    const aliases = (0, jsx_utils_1.getImportedAliases)(sourceFile, TABLE_PACKAGE);
+    if (aliases === null)
+        return null;
+    const cellAlias = Object.entries(aliases).find(([, name]) => name === COMPONENT_NAME)?.[0];
+    if (cellAlias === undefined)
+        return null;
+    if (Object.values(aliases).includes("CopyableCellProps")) {
+        manualReviewCount += 1;
+        return null;
+    }
+    const matches = (0, jsx_utils_1.findJsxElements)(sourceFile, [cellAlias]);
+    if (matches.length === 0)
+        return null;
+    const edits = [];
+    let needsMultiRow = false;
+    for (const { openingElement, element } of matches) {
+        if ((0, jsx_utils_1.hasSpreadAttribute)(openingElement)) {
+            manualReviewCount += 1;
+            continue;
+        }
+        const textAttr = (0, jsx_utils_1.findJsxAttribute)(openingElement, "text");
+        const textExpr = textAttr !== null ? textExpression(textAttr) : null;
+        if (textExpr === null) {
+            manualReviewCount += 1;
+            continue;
+        }
+        const classNameAttr = (0, jsx_utils_1.findJsxAttribute)(openingElement, "className");
+        if (classNameAttr !== null) {
+            // The old cell forwarded className to its own cva root; there is no
+            // 1:1 slot for it on the pair, so leave these for a human.
+            manualReviewCount += 1;
+            continue;
+        }
+        const secondaryAttr = (0, jsx_utils_1.findJsxAttribute)(openingElement, "secondary");
+        const testIdText = attributeSourceText((0, jsx_utils_1.findJsxAttribute)(openingElement, "data-testid"));
+        let replacement;
+        if (secondaryAttr === null) {
+            replacement = renderPair(textExpr, false);
+            if (testIdText !== null) {
+                replacement = replacement.replace(`<div className="flex min-w-0 max-w-full items-center overflow-hidden">`, `<div className="flex min-w-0 max-w-full items-center overflow-hidden" data-testid=${testIdText}>`);
+            }
+        }
+        else {
+            const secondaryExpr = secondaryTextExpression(secondaryAttr);
+            if (secondaryExpr === null) {
+                // `secondary` was something other than an inline `{{ text: … }}`.
+                manualReviewCount += 1;
+                continue;
+            }
+            needsMultiRow = true;
+            const testIdProp = testIdText !== null ? ` data-testid=${testIdText}` : "";
+            replacement = `<MultiRowTableCell className="w-fit overflow-hidden"${testIdProp} main={${renderPair(textExpr, false)}} secondary={${renderPair(secondaryExpr, true)}} />`;
+        }
+        edits.push({ start: element.getStart(), end: element.getEnd(), replacement });
+    }
+    if (edits.length === 0)
+        return null;
+    edits.sort((a, b) => b.start - a.start);
+    let updated = content;
+    for (const { start, end, replacement } of edits) {
+        updated = `${updated.slice(0, start)}${replacement}${updated.slice(end)}`;
+    }
+    const remaining = (0, jsx_utils_1.findJsxElements)((0, jsx_utils_1.parseTsx)(updated, filePath), [cellAlias]);
+    if (remaining.length === 0) {
+        updated = removeNamedImport(updated, TABLE_PACKAGE, COMPONENT_NAME);
+    }
+    else {
+        manualReviewCount += 1;
+    }
+    if (needsMultiRow) {
+        updated = ensureNamedImport(updated, TABLE_PACKAGE, ["MultiRowTableCell"]);
+    }
+    updated = ensureNamedImport(updated, COMPONENTS_PACKAGE, ["Text", "CopyButton"]);
+    return updated;
+};
+/**
+ * Rewrites `<CopyableCell text={x} secondary={{ text: y }} …/>` (removed in
+ * v3) into the value/copy pair used by table cells: a truncating `Text` next
+ * to an `extraSmall` `CopyButton`, wrapped for two-row cells in
+ * `MultiRowTableCell` with the `w-fit overflow-hidden` guard that keeps the
+ * pair inside the cell's grid track. Usages with spreads, dynamic
+ * `secondary` values, forwarded classNames, or a referenced
+ * `CopyableCellProps` type are left for manual review.
+ */
+const copyableCellToCopyPair = (tree) => {
+    manualReviewCount = 0;
+    const touched = (0, jsx_utils_1.visitTsxFiles)(tree, COMPONENT_NAME, transformCopyableCellUsage);
+    (0, jsx_utils_1.logSummary)("copyablecell-to-copy-pair", touched, manualReviewCount);
+};
+exports.copyableCellToCopyPair = copyableCellToCopyPair;
+exports.default = exports.copyableCellToCopyPair;
+//# sourceMappingURL=copyablecell-to-copy-pair.js.map

package/migrations.json

@@ -1,3 +1,9 @@
 {
-  "generators": {}
+  "generators": {
+    "v3-0-0-copyablecell-to-copy-pair": {
+      "version": "3.0.0",
+      "description": "Replace the removed CopyableCell with the Text + CopyButton pair, wrapped in MultiRowTableCell for two-row cells.",
+      "implementation": "./migrations/v3-0-0/copyablecell-to-copy-pair"
+    }
+  }
 }

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "2.7.22-alpha-15da733192f.0",
+  "version": "2.8.1",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "2.13.28-alpha-15da733192f.0",
-    "@trackunit/ui-icons": "1.14.45-alpha-15da733192f.0",
-    "@trackunit/react-form-components": "2.6.76-alpha-15da733192f.0",
-    "@trackunit/css-class-variance-utilities": "2.0.16-alpha-15da733192f.0",
-    "@trackunit/date-and-time-utils": "1.14.47-alpha-15da733192f.0",
-    "@trackunit/react-date-and-time-hooks": "2.6.74-alpha-15da733192f.0",
-    "@trackunit/shared-utils": "1.16.51-alpha-15da733192f.0",
-    "@trackunit/i18n-library-translation": "2.4.66-alpha-15da733192f.0",
+    "@trackunit/react-components": "3.0.1",
+    "@trackunit/ui-icons": "1.14.44",
+    "@trackunit/react-form-components": "2.6.77",
+    "@trackunit/css-class-variance-utilities": "2.0.15",
+    "@trackunit/date-and-time-utils": "1.14.46",
+    "@trackunit/react-date-and-time-hooks": "2.6.75",
+    "@trackunit/shared-utils": "1.16.50",
+    "@trackunit/i18n-library-translation": "2.4.65",
     "tailwind-merge": "^2.0.0"
   },
   "peerDependencies": {

package/src/index.d.ts

@@ -1,7 +1,5 @@
 export * from "./components/ButtonCell/ButtonCell";
 export * from "./components/CheckboxCell/CheckboxCell";
-export { CopyableCell } from "./components/CopyableCell/CopyableCell";
-export type { CopyableCellProps } from "./components/CopyableCell/CopyableCell";
 export * from "./components/DateTimeCell/DateTimeCell";
 export { HighlightCell } from "./components/HighlightCell/HighlightCell";
 export type { HighlightCellProps } from "./components/HighlightCell/HighlightCell";

package/src/translation.d.ts

@@ -6,8 +6,8 @@ export declare const translations: TranslationResource<TranslationKeys>;
 /**
  *  Local useTranslation for this specific library
  */
-export declare const useTranslation: () => [TransForLibs<"copyableCell.copied" | "copyableCell.copy" | "rowActions.moreActions">, import("i18next").i18n, boolean] & {
-    t: TransForLibs<"copyableCell.copied" | "copyableCell.copy" | "rowActions.moreActions">;
+export declare const useTranslation: () => [TransForLibs<"rowActions.moreActions">, import("i18next").i18n, boolean] & {
+    t: TransForLibs<"rowActions.moreActions">;
     i18n: import("i18next").i18n;
     ready: boolean;
 };

package/migrations/entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"entry.js","sourceRoot":"","sources":["../../../../../libs/react/table-base-components/migrations/entry.ts"],"names":[],"mappings":"","sourcesContent":["export {};\n"]}

package/src/components/CopyableCell/CopyableCell.d.ts

@@ -1,44 +0,0 @@
-import { CommonProps, type CopyableTextProps, type Styleable } from "@trackunit/react-components";
-import type { ReactElement } from "react";
-type CopyableCellSecondary = Pick<CopyableTextProps, "text">;
-export interface CopyableCellProps extends CommonProps, Pick<CopyableTextProps, "text">, Styleable {
-    /**
-     * When provided, renders a multi-line cell with a secondary row below the primary.
-     * The secondary row is independently copyable.
-     */
-    readonly secondary?: CopyableCellSecondary;
-}
-/**
- * CopyableCell renders a table cell with click-to-copy functionality.
- * Supports single-line and multi-line layouts.
- *
- * ### When to use
- * Use CopyableCell inside table column definitions when a cell value (ID, name, reference) should be copyable.
- *
- * ### When not to use
- * For standalone copyable text outside of tables, use `CopyableText` from `@trackunit/react-components`.
- *
- * @example Single-line copyable cell
- * ```tsx
- * import { CopyableCell } from "@trackunit/react-table-base-components";
- *
- * const cell = ({ getValue }) => (
- *   <CopyableCell text={getValue()} />
- * );
- * ```
- * @example Multi-line copyable cell
- * ```tsx
- * import { CopyableCell } from "@trackunit/react-table-base-components";
- *
- * const cell = ({ row }) => (
- *   <CopyableCell
- *     text={String(row.original.customerId)}
- *     secondary={{ text: row.original.name }}
- *   />
- * );
- * ```
- * @param {CopyableCellProps} props - The props for the CopyableCell component
- * @returns {ReactElement} CopyableCell component
- */
-export declare const CopyableCell: ({ text, secondary, "data-testid": dataTestId, className, style, }: CopyableCellProps) => ReactElement;
-export {};

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

@@ -1,6 +0,0 @@
-export declare const cvaCopyableCell: import("cva").CVAComponent<Omit<{
-    base: string[];
-}, "defaultVariants"> & {
-    variants: unknown;
-    defaultVariants: Omit<{}, never>;
-}, unknown>;