@trackunit/react-table-base-components 2.1.6-alpha-3c308b4aefc.0 → 2.1.7

package/index.cjs.js

@@ -7,6 +7,7 @@ var tailwindMerge = require('tailwind-merge');
 var reactFormComponents = require('@trackunit/react-form-components');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var dateAndTimeUtils = require('@trackunit/date-and-time-utils');
+var reactDateAndTimeHooks = require('@trackunit/react-date-and-time-hooks');
 var react = require('react');
 var sharedUtils = require('@trackunit/shared-utils');
 
@@ -287,7 +288,11 @@ const cvaDateTimeSince$1 = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "
  * @param {DateTimeCellProps} props - The props for the DateTimeCell component
  * @returns {ReactElement} DateTimeCell component
  */
-const DateTimeCell = ({ format, timeZone, locale, date, withTimeSince = true, className, "data-testid": dataTestId, style, }) => {
+const DateTimeCell = ({ format, date, withTimeSince = true, className, "data-testid": dataTestId, style, timeZone: timeZoneProp, locale: localeProp, }) => {
+    const { preferred: preferredTimezone } = reactDateAndTimeHooks.useTimezone();
+    const resolvedLocale = reactDateAndTimeHooks.useLocale();
+    const timeZone = timeZoneProp ?? preferredTimezone.id;
+    const locale = localeProp ?? resolvedLocale;
     if (!date) {
         return null;
     }
@@ -627,12 +632,19 @@ const cvaMultiValueTextCellTooltip = cssClassVarianceUtilities.cvaMerge(["whites
  * @param {MultiValueTextCellProps} props - The props for the MultiValueTextCell component
  * @returns {ReactElement} MultiValueTextCell component
  */
-const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, style, }) => {
+const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, style, unifiedTooltip = false, }) => {
     const [isTooltipVisible, setIsTooltipVisible] = react.useState(false);
     const updateTooltipVisibility = (element) => {
         setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
     };
-    return count !== null && count !== undefined && count > 0 ? (jsxRuntime.jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [icon ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-icon-tooltip` : undefined, disabled: !iconTooltip, label: iconTooltip ?? "", placement: "bottom", children: jsxRuntime.jsx("span", { className: "inline-flex items-center", children: icon }) })) : null, jsxRuntime.jsx("span", { className: cvaMultiValueTextCellTooltip(), ref: elementRef => updateTooltipVisibility(elementRef), children: jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-content-tooltip` : undefined, disabled: !isTooltipVisible, label: content ?? "", placement: "bottom", children: jsxRuntime.jsx(reactComponents.Text, { className: "inline", children: content ?? "" }) }) }), count > 1 ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-count-tooltip` : undefined, disabled: countTooltip === undefined || countTooltip === null, label: countTooltip ?? "", placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Tag, { className: "inline", color: "neutral", onMouseEnter: onMouseEnter, size: "small", children: ["+", count - 1] }) })) : null] })) : null;
+    const isCountDefined = count !== undefined && count !== null;
+    const isMultiValueCell = isCountDefined && count > 1;
+    const unifiedTooltipLabel = isMultiValueCell ? (countTooltip ?? "") : (countTooltip ?? content ?? "");
+    const hasUnifiedTooltipLabel = isMultiValueCell
+        ? countTooltip !== undefined && countTooltip !== null
+        : Boolean(unifiedTooltipLabel);
+    const isUnifiedTooltipEnabled = unifiedTooltip && isCountDefined && (isMultiValueCell || isTooltipVisible) && hasUnifiedTooltipLabel;
+    return count !== null && count !== undefined && count > 0 ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-unified-tooltip` : undefined, disabled: !isUnifiedTooltipEnabled, label: unifiedTooltipLabel, placement: "bottom", children: jsxRuntime.jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, onMouseEnter: unifiedTooltip ? onMouseEnter : undefined, ref: ref, style: style, children: [icon ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-icon-tooltip` : undefined, disabled: isUnifiedTooltipEnabled || !iconTooltip, label: iconTooltip ?? "", placement: "bottom", children: jsxRuntime.jsx("span", { className: "inline-flex items-center", children: icon }) })) : null, jsxRuntime.jsx("span", { className: cvaMultiValueTextCellTooltip(), ref: updateTooltipVisibility, children: unifiedTooltip ? (jsxRuntime.jsx(reactComponents.Text, { className: "inline", children: content ?? "" })) : (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-content-tooltip` : undefined, disabled: !isTooltipVisible, label: content ?? "", placement: "bottom", children: jsxRuntime.jsx(reactComponents.Text, { className: "inline", children: content ?? "" }) })) }), count > 1 ? (unifiedTooltip ? (jsxRuntime.jsxs(reactComponents.Tag, { className: "inline", color: "neutral", size: "small", children: ["+", count - 1] })) : (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-count-tooltip` : undefined, disabled: countTooltip === undefined || countTooltip === null, label: countTooltip ?? "", placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Tag, { className: "inline", color: "neutral", onMouseEnter: onMouseEnter, size: "small", children: ["+", count - 1] }) }))) : null] }) })) : null;
 };
 
 /**

package/index.esm.js

@@ -5,6 +5,7 @@ import { twMerge } from 'tailwind-merge';
 import { Checkbox } from '@trackunit/react-form-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { formatDateUtil, timeSinceAuto, timeSinceInDays, Temporal } from '@trackunit/date-and-time-utils';
+import { useTimezone, useLocale } from '@trackunit/react-date-and-time-hooks';
 import { useMemo, useState, useEffect, isValidElement, cloneElement } from 'react';
 import { DateTimeFormat } from '@trackunit/shared-utils';
 
@@ -285,7 +286,11 @@ const cvaDateTimeSince$1 = cvaMerge(["slashed-zero", "text-neutral-500", "text-x
  * @param {DateTimeCellProps} props - The props for the DateTimeCell component
  * @returns {ReactElement} DateTimeCell component
  */
-const DateTimeCell = ({ format, timeZone, locale, date, withTimeSince = true, className, "data-testid": dataTestId, style, }) => {
+const DateTimeCell = ({ format, date, withTimeSince = true, className, "data-testid": dataTestId, style, timeZone: timeZoneProp, locale: localeProp, }) => {
+    const { preferred: preferredTimezone } = useTimezone();
+    const resolvedLocale = useLocale();
+    const timeZone = timeZoneProp ?? preferredTimezone.id;
+    const locale = localeProp ?? resolvedLocale;
     if (!date) {
         return null;
     }
@@ -625,12 +630,19 @@ const cvaMultiValueTextCellTooltip = cvaMerge(["whitespace-no-wrap", "overflow-h
  * @param {MultiValueTextCellProps} props - The props for the MultiValueTextCell component
  * @returns {ReactElement} MultiValueTextCell component
  */
-const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, style, }) => {
+const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, style, unifiedTooltip = false, }) => {
     const [isTooltipVisible, setIsTooltipVisible] = useState(false);
     const updateTooltipVisibility = (element) => {
         setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
     };
-    return count !== null && count !== undefined && count > 0 ? (jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [icon ? (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-icon-tooltip` : undefined, disabled: !iconTooltip, label: iconTooltip ?? "", placement: "bottom", children: jsx("span", { className: "inline-flex items-center", children: icon }) })) : null, jsx("span", { className: cvaMultiValueTextCellTooltip(), ref: elementRef => updateTooltipVisibility(elementRef), children: jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-content-tooltip` : undefined, disabled: !isTooltipVisible, label: content ?? "", placement: "bottom", children: jsx(Text, { className: "inline", children: content ?? "" }) }) }), count > 1 ? (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-count-tooltip` : undefined, disabled: countTooltip === undefined || countTooltip === null, label: countTooltip ?? "", placement: "bottom", children: jsxs(Tag, { className: "inline", color: "neutral", onMouseEnter: onMouseEnter, size: "small", children: ["+", count - 1] }) })) : null] })) : null;
+    const isCountDefined = count !== undefined && count !== null;
+    const isMultiValueCell = isCountDefined && count > 1;
+    const unifiedTooltipLabel = isMultiValueCell ? (countTooltip ?? "") : (countTooltip ?? content ?? "");
+    const hasUnifiedTooltipLabel = isMultiValueCell
+        ? countTooltip !== undefined && countTooltip !== null
+        : Boolean(unifiedTooltipLabel);
+    const isUnifiedTooltipEnabled = unifiedTooltip && isCountDefined && (isMultiValueCell || isTooltipVisible) && hasUnifiedTooltipLabel;
+    return count !== null && count !== undefined && count > 0 ? (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-unified-tooltip` : undefined, disabled: !isUnifiedTooltipEnabled, label: unifiedTooltipLabel, placement: "bottom", children: jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, onMouseEnter: unifiedTooltip ? onMouseEnter : undefined, ref: ref, style: style, children: [icon ? (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-icon-tooltip` : undefined, disabled: isUnifiedTooltipEnabled || !iconTooltip, label: iconTooltip ?? "", placement: "bottom", children: jsx("span", { className: "inline-flex items-center", children: icon }) })) : null, jsx("span", { className: cvaMultiValueTextCellTooltip(), ref: updateTooltipVisibility, children: unifiedTooltip ? (jsx(Text, { className: "inline", children: content ?? "" })) : (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-content-tooltip` : undefined, disabled: !isTooltipVisible, label: content ?? "", placement: "bottom", children: jsx(Text, { className: "inline", children: content ?? "" }) })) }), count > 1 ? (unifiedTooltip ? (jsxs(Tag, { className: "inline", color: "neutral", size: "small", children: ["+", count - 1] })) : (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-count-tooltip` : undefined, disabled: countTooltip === undefined || countTooltip === null, label: countTooltip ?? "", placement: "bottom", children: jsxs(Tag, { className: "inline", color: "neutral", onMouseEnter: onMouseEnter, size: "small", children: ["+", count - 1] }) }))) : null] }) })) : null;
 };
 
 /**

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "2.1.6-alpha-3c308b4aefc.0",
+  "version": "2.1.7",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "2.1.5-alpha-3c308b4aefc.0",
-    "@trackunit/ui-icons": "1.13.16-alpha-3c308b4aefc.0",
-    "@trackunit/react-form-components": "2.1.6-alpha-3c308b4aefc.0",
-    "@trackunit/css-class-variance-utilities": "1.13.15-alpha-3c308b4aefc.0",
-    "@trackunit/date-and-time-utils": "1.13.16-alpha-3c308b4aefc.0",
-    "@trackunit/shared-utils": "1.15.15-alpha-3c308b4aefc.0",
-    "@trackunit/i18n-library-translation": "2.0.7-alpha-3c308b4aefc.0",
+    "@trackunit/react-components": "2.1.5",
+    "@trackunit/ui-icons": "1.13.16",
+    "@trackunit/react-form-components": "2.1.6",
+    "@trackunit/css-class-variance-utilities": "1.13.15",
+    "@trackunit/date-and-time-utils": "1.13.16",
+    "@trackunit/react-date-and-time-hooks": "2.1.6",
+    "@trackunit/shared-utils": "1.15.15",
+    "@trackunit/i18n-library-translation": "2.0.7",
     "tailwind-merge": "^2.0.0"
   },
   "peerDependencies": {

package/src/components/DateTimeCell/DateTimeCell.d.ts

@@ -1,5 +1,6 @@
 import { TemporalFormat } from "@trackunit/date-and-time-utils";
 import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
+import { ReactElement } from "react";
 export interface DateTimeCellProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
     /**
      * The date to render.
@@ -20,13 +21,16 @@ export interface DateTimeCellProps extends CommonProps, Refable<HTMLDivElement>,
      */
     format?: TemporalFormat;
     /**
-     * The time zone to use for the date.
-     * See the formatDateUtil function for more information.
+     * Explicit timezone override (IANA timezone string, e.g. `"America/New_York"`).
+     * When provided, takes precedence over the automatically resolved timezone from context.
+     *
+     * In most cases you do not need this — the component resolves the correct timezone
+     * automatically via `AssetTimezoneProvider` and user preference context.
      */
     timeZone?: string;
     /**
-     * The locale to use for the date.
-     * See the formatDateUtil function for more information.
+     * Explicit locale override (BCP 47 language tag, e.g. `"en-US"`).
+     * When provided, takes precedence over the locale resolved from context.
      */
     locale?: string;
 }
@@ -86,7 +90,4 @@ export interface DateTimeCellProps extends CommonProps, Refable<HTMLDivElement>,
  * @param {DateTimeCellProps} props - The props for the DateTimeCell component
  * @returns {ReactElement} DateTimeCell component
  */
-export declare const DateTimeCell: ({ format, timeZone, locale, date, withTimeSince, className, "data-testid": dataTestId, style, }: DateTimeCellProps) => import("react/jsx-runtime").JSX.Element | null;
-export interface TimeSinceProps extends Pick<DateTimeCellProps, "date" | "timeZone" | "locale"> {
-    date: Date;
-}
+export declare const DateTimeCell: ({ format, date, withTimeSince, className, "data-testid": dataTestId, style, timeZone: timeZoneProp, locale: localeProp, }: DateTimeCellProps) => ReactElement | null;

package/src/components/MultiValueTextCell/MultiValueTextCell.d.ts

@@ -1,6 +1,6 @@
 import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { MouseEventHandler, ReactElement, ReactNode } from "react";
-export interface MultiValueTextCellProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
+type MultiValueTextCellBaseProps = CommonProps & Refable<HTMLDivElement> & Styleable & {
     /**
      * Icon rendered to the left of the text.
      * Provides visual context for the primary value.
@@ -9,6 +9,8 @@ export interface MultiValueTextCellProps extends CommonProps, Refable<HTMLDivEle
     /**
      * Tooltip text for the icon.
      * If omitted, the icon tooltip is disabled.
+     * When `unifiedTooltip` is true and the unified cell tooltip is active, `iconTooltip` is
+     * suppressed so only the unified tooltip is shown (including over the icon).
      */
     iconTooltip?: string;
     /**
@@ -22,19 +24,57 @@ export interface MultiValueTextCellProps extends CommonProps, Refable<HTMLDivEle
      * - If count > 1, a +N badge is shown where N = count - 1.
      */
     count?: number | null;
+};
+type MultiValueTextCellDefaultProps = MultiValueTextCellBaseProps & {
     /**
-     *   Tooltip content for the +N badge.
-     *   Accepts strings, React elements, or any ReactNode.
-     *   If omitted, the badge tooltip is disabled.
-     *   Recommended: use the `ListTooltip` component to render a list of the remaining items.
+     * Tooltip content for the +N badge.
+     * Accepts strings, React elements, or any ReactNode.
+     * If omitted, the badge tooltip is disabled.
+     * Recommended: use the `ListTooltip` component to render a list of the remaining items.
      */
     countTooltip?: ReactNode;
     /**
-     * Mouse enter handler for the badge.
-     * Useful for lazy-loading tooltip content (e.g., fetching the remaining items).
+     * Mouse enter handler for lazy-loading tooltip content (e.g., fetching the remaining items).
+     * Runs on the +N badge by default; when `unifiedTooltip` is true, runs on the cell wrapper instead
+     * (fires once when the cell is first entered).
      */
     onMouseEnter?: MouseEventHandler<HTMLDivElement>;
-}
+    /**
+     * When true, primary text, the optional icon, and the +N badge share one tooltip over the
+     * whole cell. When false, separate tooltips are shown on the truncated content, icon, and +N badge.
+     * When true, `iconTooltip` is not shown while the unified tooltip is active.
+     * Defaults to false.
+     */
+    unifiedTooltip?: false;
+};
+type MultiValueTextCellUnifiedProps = MultiValueTextCellBaseProps & {
+    /**
+     * Tooltip content for the unified cell tooltip and the +N badge (when `unifiedTooltip` is false).
+     * Required when `unifiedTooltip` is true and `count` > 1 (unless lazy-loading via `onMouseEnter`).
+     * When `count` is 1 and the primary text is truncated, `content` is used if `countTooltip` is omitted.
+     */
+    countTooltip?: ReactNode;
+    /**
+     * Mouse enter handler for lazy-loading tooltip content (e.g., fetching the remaining items).
+     * Runs on the cell wrapper (fires once when the cell is first entered).
+     */
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    /**
+     * When true, primary text, the optional icon, and the +N badge share one tooltip over the
+     * whole cell. `iconTooltip` is not shown while the unified tooltip is active.
+     */
+    unifiedTooltip: true;
+} & ({
+    count: 1;
+} | {
+    countTooltip: ReactNode;
+} | {
+    onMouseEnter: MouseEventHandler<HTMLDivElement>;
+});
+/**
+ * When `unifiedTooltip` is true and `count` is not the literal `1`, provide `countTooltip` or `onMouseEnter`.
+ */
+export type MultiValueTextCellProps = MultiValueTextCellDefaultProps | MultiValueTextCellUnifiedProps;
 /**
  * The `<MultiValueTextCell>` component is used for displaying the text values with multiple values in a table cell. First element is displayed as a text, the rest of the values are displayed as a number. Icon can be passed as an optional prop.
  * The text content is not editable and will be truncated if the cell is too narrow.
@@ -42,4 +82,5 @@ export interface MultiValueTextCellProps extends CommonProps, Refable<HTMLDivEle
  * @param {MultiValueTextCellProps} props - The props for the MultiValueTextCell component
  * @returns {ReactElement} MultiValueTextCell component
  */
-export declare const MultiValueTextCell: ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, style, }: MultiValueTextCellProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const MultiValueTextCell: ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, style, unifiedTooltip, }: MultiValueTextCellProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};