@dynatrace/strato-components 3.5.2 → 3.7.0

package/esm/tables/DataTable/components/DataTableCell.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { flexRender } from "@tanstack/react-table";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import clsx from "clsx";
 import {
@@ -17,15 +16,15 @@ import {
   useDataTableContent
 } from "../contexts/DataTableContext.js";
 import * as tableStyles from "../DataTable.sty.js";
-import { SPACER_COLUMN } from "../features/Layout/Layout.js";
+import { SPACER_COLUMN } from "../features/Layout/LayoutColumnDef.js";
 import { isRowDetailsColumnDef } from "../features/RowDetails/RowDetails.js";
 import { isRowDragColumnDef } from "../features/RowOrder/row-order-column-utils.js";
 import { isRowSelectionColumnDef } from "../features/RowSelection/RowSelection.js";
-import { SubrowCellContext } from "../features/SubRows/SubRowCellContext.js";
-import { SubRowsCellExpander } from "../features/SubRows/SubRowExpanders.js";
+import { SubrowCellContext } from "../features/SubRows/components/SubRowCellContext.js";
+import { SubRowsCellExpander } from "../features/SubRows/components/SubRowExpanders.js";
 import * as thresholdStyles from "../features/Thresholds/Thresholds.sty.js";
 import { InlineUserActionsMenu } from "../features/UserActions/InlineUserActionsMenu.js";
-import { ROW_ACTIONS_COLUMN } from "../features/UserActions/RowActions.js";
+import { ROW_ACTIONS_COLUMN } from "../features/UserActions/RowActionsColumnDef.js";
 function InternalMemoizedCell(props) {
   const {
     rowId,
@@ -122,7 +121,6 @@ function arePropsEqual(prevProps, nextProps) {
 const DataTableCellMemo = memo(InternalMemoizedCell, arePropsEqual);
 function DataTableCell(props) {
   const {
-    cell,
     virtualColumnIndex,
     virtualRowIndex,
     isInDragOverlay,
@@ -137,29 +135,28 @@ function DataTableCell(props) {
   const table = useDataTable();
   const { cellActionAriaLabel } = useDataTableContent();
   const subrowContext = useContext(SubrowCellContext);
-  const { row, column, getThresholdColors, getContext } = cell;
-  const visualVariantOptions = table.getVisualVariantOptions();
-  const isLineWrapped = column.getIsLineWrapped();
+  const isLineWrapped = props.cell.column.getIsLineWrapped();
   const pillColor = virtualColumnIndex === 0 ? thresholdPill : null;
-  const thresholdCellColors = getThresholdColors();
-  const columnId = column.id;
-  const columnDef = column.columnDef;
+  const thresholdCellColors = props.cell.getThresholdColors();
+  const columnId = props.cell.column.id;
+  const columnDef = props.cell.column.columnDef;
   const hasCustomCellRenderer = columnDef.meta?.hasCustomCellRenderer;
   const isFirstColumn = virtualColumnIndex === 0;
   const isPrefixColumn = isRowSelectionColumnDef(columnDef) || isRowDetailsColumnDef(columnDef) || isRowDragColumnDef(columnDef);
-  const pinningState = column.getIsPinned();
-  const leftPinnedPosition = pinningState === "left" ? column.getLeftPinnedPosition() : void 0;
-  const rightPinnedPosition = pinningState === "right" ? column.getRightPinnedPosition() : void 0;
-  const pinnedColumnBg = pinningState && visualVariantOptions.rowSeparation !== "zebraStripes" && (visualVariantOptions.contained ? "contained" : "uncontained");
+  const visualVariantConfig = table.atoms.visualVariantConfig?.get();
+  const pinningState = props.cell.column.getIsPinned();
+  const leftPinnedPosition = pinningState === "left" ? props.cell.column.getLeftPinnedPosition() : void 0;
+  const rightPinnedPosition = pinningState === "right" ? props.cell.column.getRightPinnedPosition() : void 0;
+  const pinnedColumnBg = pinningState && visualVariantConfig.rowSeparation !== "zebraStripes" && (visualVariantConfig.contained ? "contained" : "uncontained");
   return /* @__PURE__ */ jsx(
     DataTableCellMemo,
     {
-      rowId: row.id,
+      rowId: props.cell.row.id,
       virtualRowIndex: isInDragOverlay ? void 0 : virtualRowIndex,
       virtualColumnIndex,
       columnId,
       subRowDepth,
-      canCellAction: column.getCanCellActions(),
+      canCellAction: props.cell.column.getCanCellActions(),
       columnMeasure,
       dragAndDropRef: !isInDragOverlay && isFirstColumn ? dragAndDropRef : void 0,
       pillColor,
@@ -176,10 +173,10 @@ function DataTableCell(props) {
       className: clsx(
         cellStyles.outerCell({
           lineWrap: isLineWrapped,
-          fontStyle: column.getFontStyle(),
-          rowDensity: hasCustomCellRenderer ? "customCellRenderer" : visualVariantOptions.rowDensity,
+          fontStyle: props.cell.column.getFontStyle(),
+          rowDensity: hasCustomCellRenderer ? "customCellRenderer" : visualVariantConfig.rowDensity,
           interactiveRows: table.options.enableRowInteractivity,
-          verticalDividers: visualVariantOptions.verticalDividers,
+          verticalDividers: visualVariantConfig.verticalDividers,
           pinnedColumn: pinningState,
           background: pinnedColumnBg
         }),
@@ -195,13 +192,7 @@ function DataTableCell(props) {
       rowData,
       tableColumns: table.options.columns,
       cellDeps,
-      children: hasCustomCellRenderer ? /* @__PURE__ */ jsx(
-        DataTableColumnContextProvider,
-        {
-          value: column,
-          children: flexRender(column.columnDef.cell, getContext())
-        }
-      ) : flexRender(column.columnDef.cell, getContext())
+      children: hasCustomCellRenderer ? /* @__PURE__ */ jsx(DataTableColumnContextProvider, { value: props.cell.column, children: /* @__PURE__ */ jsx(table.FlexRender, { cell: props.cell }) }) : /* @__PURE__ */ jsx(table.FlexRender, { cell: props.cell })
     }
   );
 }

package/esm/tables/DataTable/components/DataTableCell.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableCell.tsx"],
-  "sourcesContent": ["import { flexRender } from '@tanstack/react-table';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport clsx from 'clsx';\nimport {\n  type JSX,\n  memo,\n  type PropsWithChildren,\n  useContext,\n  useState,\n} from 'react';\n\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT } from '../constants.js';\nimport * as alignmentStyles from './Alignment.sty.js';\nimport * as cellStyles from './DataTableCell.sty.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport {\n  DataTableColumnContextProvider,\n  useDataTable,\n  useDataTableContent,\n} from '../contexts/DataTableContext.js';\nimport * as tableStyles from '../DataTable.sty.js';\nimport type { DataTableColumnType } from '../features/ColumnTypes/column-types-types.js';\nimport { SPACER_COLUMN } from '../features/Layout/Layout.js';\nimport { isRowDetailsColumnDef } from '../features/RowDetails/RowDetails.js';\nimport { isRowDragColumnDef } from '../features/RowOrder/row-order-column-utils.js';\nimport { isRowSelectionColumnDef } from '../features/RowSelection/RowSelection.js';\nimport { SubrowCellContext } from '../features/SubRows/SubRowCellContext.js';\nimport { SubRowsCellExpander } from '../features/SubRows/SubRowExpanders.js';\nimport * as thresholdStyles from '../features/Thresholds/Thresholds.sty.js';\nimport { InlineUserActionsMenu } from '../features/UserActions/InlineUserActionsMenu.js';\nimport { ROW_ACTIONS_COLUMN } from '../features/UserActions/RowActions.js';\nimport type { ColumnDef, Cell, Column } from '../hooks/useTable/types.js';\n\ninterface DataTableCellProps<TData, TValue> extends StylingProps {\n  cell: Cell<TData, TValue>;\n\n  /**\n   * Column index in order to map it to the cells data attributes for identification.\n   */\n  virtualColumnIndex: number;\n\n  /**\n   * Row index in order to map it to the cells data attributes for identification.\n   */\n  virtualRowIndex: number;\n\n  /**\n   * Indicates whether the rendered cell is inside the drag overlay.\n   */\n  isInDragOverlay?: boolean;\n\n  /**\n   * Indicates whether the floating menu for the rendered cell is currently open.\n   */\n  hasActiveFloatingMenu?: boolean;\n\n  /**\n   * This function measures column sizes and is triggered when the cell is rendered in the DOM.\n   */\n  columnMeasure?: (element: Element | null) => void;\n\n  /**\n   * Node ref for row order drag and drop.\n   */\n  dragAndDropRef?: (element: HTMLElement | null) => void;\n\n  /**\n   * Indicates the nesting level of the row. Top level parent rows have depth 0.\n   */\n  subRowDepth: number;\n\n  /**\n   * Threshold pill color displayed in the first cell in a row.\n   * Needs to be a valid css color definition.\n   */\n  thresholdPill: string | null;\n\n  /**\n   * Data for this row. Necessary for memoization to work correctly.\n   * If the data changes, the cell should re-render.\n   */\n  rowData?: TData;\n\n  /**\n   * Stringified cell dependencies that act as a memo invalidation for the memoized\n   * component. If something on the table state changes that does not affect the\n   * `cell` prop passed here, it can be added to the cellDeps `columnDef.meta` field\n   * in order to use it as cache control.\n   */\n  cellDeps?: string;\n}\n\ninterface InternalMemoizedCellProps<TData> extends PropsWithChildren {\n  /**\n   * RowId from the TanStack/table cell object.\n   */\n  rowId: string;\n\n  /**\n   * RowIndex based on the virtualization index.\n   */\n  virtualRowIndex?: number;\n\n  /**\n   * ColumnId from the TanStack/table column object.\n   */\n  columnId: string;\n\n  /**\n   * ColumnIndex based on the virtualization index.\n   */\n  virtualColumnIndex: number;\n\n  /**\n   * This function measures column sizes and is triggered when the cell is rendered in the DOM.\n   */\n  columnMeasure?: (element: Element | null) => void;\n\n  /**\n   * Optional ref intended for drag and drop.\n   */\n  dragAndDropRef?: (element: HTMLElement | null) => void;\n\n  /**\n   * Determines whether the DataTable has expanding rows (subRows).\n   */\n  enableExpanding?: boolean;\n\n  /**\n   * Determines if the cell has a custom cell renderer defined by the column definition.\n   */\n  hasCustomCellRenderer?: boolean;\n\n  /**\n   * Determines if the given cell within the column contains the sub row expanding trigger.\n   */\n  isSubRowIndicatorColumn?: boolean;\n\n  /**\n   * Determines the column type for the given cell.\n   */\n  columnType?: DataTableColumnType;\n\n  /**\n   * Determines if the current cell can currently wrap its lines.\n   */\n  isLineWrapped?: boolean;\n\n  /**\n   * Stringified cell dependencies that act as a memo invalidation for the memoized\n   * component. If something on the table state changes that does not affect the\n   * `cell` prop passed here, it can be added to the cellDeps `columnDef.meta` field\n   * in order to use it as cache control.\n   */\n  cellDeps?: string; // NOSONAR - suppress unused prop warning\n\n  /**\n   * Threshold pill color displayed in the first cell in a row.\n   * Needs to be a valid css color definition.\n   */\n  pillColor: string | null;\n\n  /**\n   * Determines if the current cell can receive user actions and displays a menu trigger.\n   */\n  canCellAction?: boolean;\n\n  /**\n   * Aria label for the cell action menu trigger.\n   */\n  cellActionAriaLabel: string;\n\n  /**\n   * Indicates the nesting level of the row. Top level parent rows have depth 0.\n   */\n  subRowDepth: number;\n\n  /**\n   * Defines css positioning for the left pinned columns.\n   */\n  leftPosition?: string;\n\n  /**\n   * Defines css positioning for the right pinned columns.\n   */\n  rightPosition?: string;\n\n  /**\n   * CSS class name for the cell.\n   */\n  className?: string;\n\n  /**\n   * Color of the cell text, if a given threshold applies to the cell.\n   * Needs to be a valid css color definition.\n   */\n  thresholdColor?: string;\n\n  /**\n   * Color of the cell background, if a given threshold applies to the cell.\n   * Needs to be a valid css color definition.\n   */\n  thresholdBackgroundColor?: string;\n\n  /**\n   * Data for this row. Necessary for memoization to work correctly.\n   * If the data changes, the cell should re-render.\n   */\n  rowData?: TData;\n\n  /**\n   * Table column definition. Necessary for memoization to work correctly.\n   */\n  tableColumns?: ColumnDef<unknown, unknown>[];\n}\n\n// This component should only receive primitive or memoized props in order\n// to optimize render performance when committing to the DOM.\nfunction InternalMemoizedCell<TData>(\n  props: Readonly<InternalMemoizedCellProps<TData>>,\n): JSX.Element | null {\n  const {\n    rowId,\n    virtualRowIndex,\n    columnId,\n    virtualColumnIndex,\n    className,\n    columnMeasure,\n    dragAndDropRef,\n    pillColor,\n    enableExpanding,\n    hasCustomCellRenderer,\n    isSubRowIndicatorColumn,\n    columnType,\n    isLineWrapped,\n    children,\n    canCellAction,\n    subRowDepth,\n    leftPosition,\n    rightPosition,\n    cellActionAriaLabel,\n    thresholdColor,\n    thresholdBackgroundColor,\n  } = props;\n\n  // Handling the hovered state via React instead of via css allows us\n  // to omit the button from the default render, which will reduce the\n  // amount of elements rendered quite heavily.\n  const [hovered, setHovered] = useState(false);\n  const mergedRef = useMergeRefs<HTMLElement | null>([\n    dragAndDropRef,\n    columnMeasure,\n  ]);\n\n  return (\n    <div\n      role={columnId === SPACER_COLUMN.id ? 'presentation' : 'cell'}\n      ref={mergedRef}\n      data-index={`row-${virtualRowIndex}-column-${virtualColumnIndex}`}\n      data-columnid={columnId}\n      data-column={virtualColumnIndex}\n      data-columntype={columnType}\n      data-subrow-depth={subRowDepth}\n      className={className}\n      onMouseEnter={() => canCellAction && setHovered(true)}\n      onMouseLeave={() => canCellAction && setHovered(false)}\n      style={{\n        ...assignInlineVars({\n          [thresholdStyles.thresholdPillColor]: pillColor,\n          [cellStyles.leftPositionVar]: leftPosition,\n          [cellStyles.rightPositionVar]: rightPosition,\n        }),\n        gridColumnStart: (virtualColumnIndex ?? 0) + 1,\n        gridColumnEnd: 'span 1',\n        gridRowStart: 1,\n        gridRowEnd: 'span 1',\n        color: thresholdColor,\n        backgroundColor: thresholdBackgroundColor,\n        minWidth:\n          columnId === ROW_ACTIONS_COLUMN.id ? 'max-content' : undefined,\n      }}\n    >\n      {/* Only render the subrow expander in the subrow indicator column\n          and if no custom cell renderer is exposed. */}\n      {enableExpanding === true &&\n      !hasCustomCellRenderer &&\n      isSubRowIndicatorColumn === true ? (\n        <SubRowsCellExpander columnType={columnType} />\n      ) : null}\n\n      {!hasCustomCellRenderer &&\n      columnType !== 'sparkline' &&\n      columnType !== 'meterbar' &&\n      columnType !== 'log-content' ? (\n        <div\n          className={clsx(\n            cellStyles.innerCell({\n              lineWrap: isLineWrapped,\n            }),\n          )}\n        >\n          {children}\n        </div>\n      ) : (\n        children\n      )}\n      {canCellAction && (\n        <InlineUserActionsMenu\n          headerGroupOrRowId={rowId}\n          columnId={columnId}\n          type=\"cell\"\n          aria-label={cellActionAriaLabel}\n          data-column={virtualColumnIndex}\n          hovered={hovered}\n        />\n      )}\n    </div>\n  );\n}\n\n/**\n * Custom prop comparison for the memoized `DataTableCell` component.\n * Compares all props except `children`, as they are not stable and would cause unnecessary re-renders.\n * If the cell has a custom renderer, it will always re-render to ensure dynamic content updates correctly.\n * @param prevProps - Previous props of the cell.\n * @param nextProps - Next props of the cell.\n * @returns boolean - true if props are equal (skip render), false otherwise (re-render).\n */\nfunction arePropsEqual<TData>(\n  prevProps: Readonly<InternalMemoizedCellProps<TData>>,\n  nextProps: Readonly<InternalMemoizedCellProps<TData>>,\n): boolean {\n  // If the cell has a custom cell renderer, always re-render, since children can always change.\n  // in case it is a built-in column cellDeps are defined and we can rely on them for memoization\n  if (nextProps.hasCustomCellRenderer && nextProps.cellDeps === undefined) {\n    return false;\n  }\n\n  // Extract children to skip them in the comparison\n  const { children: _prevChildren, ...prevRest } = prevProps;\n  const { children: _nextChildren, ...nextRest } = nextProps;\n\n  // Shallow compare all other props - if any of them changed, re-render\n  const keys = Object.keys(nextRest) as Array<keyof typeof nextRest>;\n  return keys.every((key) => prevRest[key] === nextRest[key]);\n}\n\nconst DataTableCellMemo = memo(InternalMemoizedCell, arePropsEqual);\n\nexport function DataTableCell<TData, TValue>(\n  props: Readonly<DataTableCellProps<TData, TValue>>,\n): JSX.Element | null {\n  const {\n    cell,\n    virtualColumnIndex,\n    virtualRowIndex,\n    isInDragOverlay,\n    dragAndDropRef,\n    columnMeasure,\n    hasActiveFloatingMenu,\n    subRowDepth,\n    thresholdPill,\n    rowData,\n    cellDeps,\n  } = props;\n\n  const table = useDataTable();\n  const { cellActionAriaLabel } = useDataTableContent();\n  const subrowContext = useContext(SubrowCellContext);\n\n  const { row, column, getThresholdColors, getContext } = cell;\n\n  const visualVariantOptions = table.getVisualVariantOptions();\n  const isLineWrapped = column.getIsLineWrapped();\n\n  // thresholds - both row and cell highlighting\n  const pillColor = virtualColumnIndex === 0 ? thresholdPill : null;\n  const thresholdCellColors = getThresholdColors();\n\n  const columnId = column.id;\n  const columnDef = column.columnDef as ColumnDef<unknown, unknown>;\n  const hasCustomCellRenderer = columnDef.meta?.hasCustomCellRenderer;\n\n  const isFirstColumn = virtualColumnIndex === 0;\n  const isPrefixColumn: boolean =\n    isRowSelectionColumnDef(columnDef) ||\n    isRowDetailsColumnDef(columnDef) ||\n    isRowDragColumnDef(columnDef);\n\n  const pinningState = column.getIsPinned();\n  const leftPinnedPosition =\n    pinningState === 'left' ? column.getLeftPinnedPosition() : undefined;\n  const rightPinnedPosition =\n    pinningState === 'right' ? column.getRightPinnedPosition() : undefined;\n  const pinnedColumnBg =\n    pinningState &&\n    visualVariantOptions.rowSeparation !== 'zebraStripes' &&\n    (visualVariantOptions.contained ? 'contained' : 'uncontained');\n\n  return (\n    <DataTableCellMemo\n      rowId={row.id}\n      virtualRowIndex={isInDragOverlay ? undefined : virtualRowIndex}\n      virtualColumnIndex={virtualColumnIndex}\n      columnId={columnId}\n      subRowDepth={subRowDepth}\n      canCellAction={column.getCanCellActions()}\n      columnMeasure={columnMeasure}\n      dragAndDropRef={\n        !isInDragOverlay && isFirstColumn ? dragAndDropRef : undefined\n      }\n      pillColor={pillColor}\n      thresholdColor={thresholdCellColors.color}\n      thresholdBackgroundColor={thresholdCellColors.backgroundColor}\n      enableExpanding={table.options.enableExpanding}\n      leftPosition={\n        leftPinnedPosition !== undefined ? `${leftPinnedPosition}px` : undefined\n      }\n      rightPosition={\n        rightPinnedPosition !== undefined\n          ? `${rightPinnedPosition}px`\n          : undefined\n      }\n      hasCustomCellRenderer={hasCustomCellRenderer}\n      isSubRowIndicatorColumn={subrowContext.isSubRowIndicatorColumn}\n      columnType={columnDef.columnType}\n      isLineWrapped={isLineWrapped}\n      cellActionAriaLabel={cellActionAriaLabel}\n      className={clsx(\n        cellStyles.outerCell({\n          lineWrap: isLineWrapped,\n          fontStyle: column.getFontStyle(),\n          rowDensity: hasCustomCellRenderer\n            ? 'customCellRenderer'\n            : visualVariantOptions.rowDensity,\n          interactiveRows: table.options.enableRowInteractivity,\n          verticalDividers: visualVariantOptions.verticalDividers,\n          pinnedColumn: pinningState,\n          background: pinnedColumnBg,\n        }),\n        alignmentStyles.horizontalAlignment[\n          columnDef.alignment ?? DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT\n        ],\n        alignmentStyles.verticalAlignment[table.getBodyVerticalAlignment()],\n        {\n          [thresholdStyles.thresholdPill]:\n            pillColor !== undefined && pillColor !== null,\n          [tableStyles.prefixColumn]: isPrefixColumn,\n          [tableStyles.pinnedCellInDragOverlay]:\n            pinningState && isInDragOverlay,\n          [cellStyles.activeInteraction]: hasActiveFloatingMenu,\n        },\n      )}\n      rowData={rowData}\n      tableColumns={table.options.columns}\n      cellDeps={cellDeps}\n    >\n      {hasCustomCellRenderer ? (\n        <DataTableColumnContextProvider\n          value={column as Column<unknown, unknown>}\n        >\n          {flexRender(column.columnDef.cell, getContext())}\n        </DataTableColumnContextProvider>\n      ) : (\n        flexRender(column.columnDef.cell, getContext())\n      )}\n    </DataTableCellMemo>\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type {\n  CellData,\n  RowData,\n  Cell,\n  ColumnDef,\n  Column,\n} from '@tanstack/react-table';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport clsx from 'clsx';\nimport {\n  type JSX,\n  memo,\n  type PropsWithChildren,\n  useContext,\n  useState,\n} from 'react';\n\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT } from '../constants.js';\nimport * as alignmentStyles from './Alignment.sty.js';\nimport * as cellStyles from './DataTableCell.sty.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport {\n  DataTableColumnContextProvider,\n  useDataTable,\n  useDataTableContent,\n} from '../contexts/DataTableContext.js';\nimport * as tableStyles from '../DataTable.sty.js';\nimport type { DataTableColumnType } from '../features/ColumnTypes/column-types-types.js';\nimport { SPACER_COLUMN } from '../features/Layout/LayoutColumnDef.js';\nimport { isRowDetailsColumnDef } from '../features/RowDetails/RowDetails.js';\nimport { isRowDragColumnDef } from '../features/RowOrder/row-order-column-utils.js';\nimport { isRowSelectionColumnDef } from '../features/RowSelection/RowSelection.js';\nimport { SubrowCellContext } from '../features/SubRows/components/SubRowCellContext.js';\nimport { SubRowsCellExpander } from '../features/SubRows/components/SubRowExpanders.js';\nimport * as thresholdStyles from '../features/Thresholds/Thresholds.sty.js';\nimport type { TDataTableFeatures } from '../features/types/features.types.js';\nimport { InlineUserActionsMenu } from '../features/UserActions/InlineUserActionsMenu.js';\nimport { ROW_ACTIONS_COLUMN } from '../features/UserActions/RowActionsColumnDef.js';\n\ninterface DataTableCellProps extends StylingProps {\n  cell: Cell<TDataTableFeatures, RowData, CellData>;\n\n  /**\n   * Column index in order to map it to the cells data attributes for identification.\n   */\n  virtualColumnIndex: number;\n\n  /**\n   * Row index in order to map it to the cells data attributes for identification.\n   */\n  virtualRowIndex: number;\n\n  /**\n   * Indicates whether the rendered cell is inside the drag overlay.\n   */\n  isInDragOverlay?: boolean;\n\n  /**\n   * Indicates whether the floating menu for the rendered cell is currently open.\n   */\n  hasActiveFloatingMenu?: boolean;\n\n  /**\n   * This function measures column sizes and is triggered when the cell is rendered in the DOM.\n   */\n  columnMeasure?: (element: Element | null) => void;\n\n  /**\n   * Node ref for row order drag and drop.\n   */\n  dragAndDropRef?: (element: HTMLElement | null) => void;\n\n  /**\n   * Indicates the nesting level of the row. Top level parent rows have depth 0.\n   */\n  subRowDepth: number;\n\n  /**\n   * Threshold pill color displayed in the first cell in a row.\n   * Needs to be a valid css color definition.\n   */\n  thresholdPill: string | null;\n\n  /**\n   * Data for this row. Necessary for memoization to work correctly.\n   * If the data changes, the cell should re-render.\n   */\n  rowData?: RowData;\n\n  /**\n   * Stringified cell dependencies that act as a memo invalidation for the memoized\n   * component. If something on the table state changes that does not affect the\n   * `cell` prop passed here, it can be added to the cellDeps `columnDef.meta` field\n   * in order to use it as cache control.\n   */\n  cellDeps?: string;\n}\n\ninterface InternalMemoizedCellProps<\n  TFeatures extends TDataTableFeatures,\n  TData extends RowData,\n> extends PropsWithChildren {\n  /**\n   * RowId from the TanStack/table cell object.\n   */\n  rowId: string;\n\n  /**\n   * RowIndex based on the virtualization index.\n   */\n  virtualRowIndex?: number;\n\n  /**\n   * ColumnId from the TanStack/table column object.\n   */\n  columnId: string;\n\n  /**\n   * ColumnIndex based on the virtualization index.\n   */\n  virtualColumnIndex: number;\n\n  /**\n   * This function measures column sizes and is triggered when the cell is rendered in the DOM.\n   */\n  columnMeasure?: (element: Element | null) => void;\n\n  /**\n   * Optional ref intended for drag and drop.\n   */\n  dragAndDropRef?: (element: HTMLElement | null) => void;\n\n  /**\n   * Determines whether the DataTable has expanding rows (subRows).\n   */\n  enableExpanding?: boolean;\n\n  /**\n   * Determines if the cell has a custom cell renderer defined by the column definition.\n   */\n  hasCustomCellRenderer?: boolean;\n\n  /**\n   * Determines if the given cell within the column contains the sub row expanding trigger.\n   */\n  isSubRowIndicatorColumn?: boolean;\n\n  /**\n   * Determines the column type for the given cell.\n   */\n  columnType?: DataTableColumnType;\n\n  /**\n   * Determines if the current cell can currently wrap its lines.\n   */\n  isLineWrapped?: boolean;\n\n  /**\n   * Stringified cell dependencies that act as a memo invalidation for the memoized\n   * component. If something on the table state changes that does not affect the\n   * `cell` prop passed here, it can be added to the cellDeps `columnDef.meta` field\n   * in order to use it as cache control.\n   */\n  cellDeps?: string; // NOSONAR - suppress unused prop warning\n\n  /**\n   * Threshold pill color displayed in the first cell in a row.\n   * Needs to be a valid css color definition.\n   */\n  pillColor: string | null;\n\n  /**\n   * Determines if the current cell can receive user actions and displays a menu trigger.\n   */\n  canCellAction?: boolean;\n\n  /**\n   * Aria label for the cell action menu trigger.\n   */\n  cellActionAriaLabel: string;\n\n  /**\n   * Indicates the nesting level of the row. Top level parent rows have depth 0.\n   */\n  subRowDepth: number;\n\n  /**\n   * Defines css positioning for the left pinned columns.\n   */\n  leftPosition?: string;\n\n  /**\n   * Defines css positioning for the right pinned columns.\n   */\n  rightPosition?: string;\n\n  /**\n   * CSS class name for the cell.\n   */\n  className?: string;\n\n  /**\n   * Color of the cell text, if a given threshold applies to the cell.\n   * Needs to be a valid css color definition.\n   */\n  thresholdColor?: string;\n\n  /**\n   * Color of the cell background, if a given threshold applies to the cell.\n   * Needs to be a valid css color definition.\n   */\n  thresholdBackgroundColor?: string;\n\n  /**\n   * Data for this row. Necessary for memoization to work correctly.\n   * If the data changes, the cell should re-render.\n   */\n  rowData?: TData;\n\n  /**\n   * Table column definition. Necessary for memoization to work correctly.\n   */\n  tableColumns?: readonly ColumnDef<TFeatures, TData>[];\n}\n\n// This component should only receive primitive or memoized props in order\n// to optimize render performance when committing to the DOM.\nfunction InternalMemoizedCell<\n  TFeatures extends TDataTableFeatures,\n  TData extends RowData,\n>(\n  props: Readonly<InternalMemoizedCellProps<TFeatures, TData>>,\n): JSX.Element | null {\n  const {\n    rowId,\n    virtualRowIndex,\n    columnId,\n    virtualColumnIndex,\n    className,\n    columnMeasure,\n    dragAndDropRef,\n    pillColor,\n    enableExpanding,\n    hasCustomCellRenderer,\n    isSubRowIndicatorColumn,\n    columnType,\n    isLineWrapped,\n    children,\n    canCellAction,\n    subRowDepth,\n    leftPosition,\n    rightPosition,\n    cellActionAriaLabel,\n    thresholdColor,\n    thresholdBackgroundColor,\n  } = props;\n\n  // Handling the hovered state via React instead of via css allows us\n  // to omit the button from the default render, which will reduce the\n  // amount of elements rendered quite heavily.\n  const [hovered, setHovered] = useState(false);\n  const mergedRef = useMergeRefs<HTMLElement | null>([\n    dragAndDropRef,\n    columnMeasure,\n  ]);\n\n  return (\n    <div\n      role={columnId === SPACER_COLUMN.id ? 'presentation' : 'cell'}\n      ref={mergedRef}\n      data-index={`row-${virtualRowIndex}-column-${virtualColumnIndex}`}\n      data-columnid={columnId}\n      data-column={virtualColumnIndex}\n      data-columntype={columnType}\n      data-subrow-depth={subRowDepth}\n      className={className}\n      onMouseEnter={() => canCellAction && setHovered(true)}\n      onMouseLeave={() => canCellAction && setHovered(false)}\n      style={{\n        ...assignInlineVars({\n          [thresholdStyles.thresholdPillColor]: pillColor,\n          [cellStyles.leftPositionVar]: leftPosition,\n          [cellStyles.rightPositionVar]: rightPosition,\n        }),\n        gridColumnStart: (virtualColumnIndex ?? 0) + 1,\n        gridColumnEnd: 'span 1',\n        gridRowStart: 1,\n        gridRowEnd: 'span 1',\n        color: thresholdColor,\n        backgroundColor: thresholdBackgroundColor,\n        minWidth:\n          columnId === ROW_ACTIONS_COLUMN.id ? 'max-content' : undefined,\n      }}\n    >\n      {/* Only render the subrow expander in the subrow indicator column\n          and if no custom cell renderer is exposed. */}\n      {enableExpanding === true &&\n      !hasCustomCellRenderer &&\n      isSubRowIndicatorColumn === true ? (\n        <SubRowsCellExpander columnType={columnType} />\n      ) : null}\n\n      {!hasCustomCellRenderer &&\n      columnType !== 'sparkline' &&\n      columnType !== 'meterbar' &&\n      columnType !== 'log-content' ? (\n        <div\n          className={clsx(\n            cellStyles.innerCell({\n              lineWrap: isLineWrapped,\n            }),\n          )}\n        >\n          {children}\n        </div>\n      ) : (\n        children\n      )}\n      {canCellAction && (\n        <InlineUserActionsMenu\n          headerGroupOrRowId={rowId}\n          columnId={columnId}\n          type=\"cell\"\n          aria-label={cellActionAriaLabel}\n          data-column={virtualColumnIndex}\n          hovered={hovered}\n        />\n      )}\n    </div>\n  );\n}\n\n/**\n * Custom prop comparison for the memoized `DataTableCell` component.\n * Compares all props except `children`, as they are not stable and would cause unnecessary re-renders.\n * If the cell has a custom renderer, it will always re-render to ensure dynamic content updates correctly.\n * @param prevProps - Previous props of the cell.\n * @param nextProps - Next props of the cell.\n * @returns boolean - true if props are equal (skip render), false otherwise (re-render).\n */\nfunction arePropsEqual<\n  TFeatures extends TDataTableFeatures,\n  TData extends RowData,\n>(\n  prevProps: Readonly<InternalMemoizedCellProps<TFeatures, TData>>,\n  nextProps: Readonly<InternalMemoizedCellProps<TFeatures, TData>>,\n): boolean {\n  // If the cell has a custom cell renderer, always re-render, since children can always change.\n  // in case it is a built-in column cellDeps are defined and we can rely on them for memoization\n  if (nextProps.hasCustomCellRenderer && nextProps.cellDeps === undefined) {\n    return false;\n  }\n\n  // Extract children to skip them in the comparison\n  const { children: _prevChildren, ...prevRest } = prevProps;\n  const { children: _nextChildren, ...nextRest } = nextProps;\n\n  // Shallow compare all other props - if any of them changed, re-render\n  const keys = Object.keys(nextRest) as Array<keyof typeof nextRest>;\n  return keys.every((key) => prevRest[key] === nextRest[key]);\n}\n\nconst DataTableCellMemo = memo(InternalMemoizedCell, arePropsEqual);\n\nexport function DataTableCell(\n  props: Readonly<DataTableCellProps>,\n): JSX.Element | null {\n  const {\n    virtualColumnIndex,\n    virtualRowIndex,\n    isInDragOverlay,\n    dragAndDropRef,\n    columnMeasure,\n    hasActiveFloatingMenu,\n    subRowDepth,\n    thresholdPill,\n    rowData,\n    cellDeps,\n  } = props;\n\n  const table = useDataTable();\n  const { cellActionAriaLabel } = useDataTableContent();\n  const subrowContext = useContext(SubrowCellContext);\n\n  const isLineWrapped = props.cell.column.getIsLineWrapped();\n\n  // thresholds - both row and cell highlighting\n  const pillColor = virtualColumnIndex === 0 ? thresholdPill : null;\n  const thresholdCellColors = props.cell.getThresholdColors();\n  const columnId = props.cell.column.id;\n  const columnDef = props.cell.column.columnDef;\n  const hasCustomCellRenderer = columnDef.meta?.hasCustomCellRenderer;\n\n  const isFirstColumn = virtualColumnIndex === 0;\n  const isPrefixColumn: boolean =\n    isRowSelectionColumnDef(columnDef) ||\n    isRowDetailsColumnDef(columnDef) ||\n    isRowDragColumnDef(columnDef);\n\n  const visualVariantConfig = table.atoms.visualVariantConfig?.get();\n  const pinningState = (\n    props.cell.column as unknown as Column<TDataTableFeatures, RowData>\n  ).getIsPinned();\n  const leftPinnedPosition =\n    pinningState === 'left'\n      ? props.cell.column.getLeftPinnedPosition()\n      : undefined;\n  const rightPinnedPosition =\n    pinningState === 'right'\n      ? props.cell.column.getRightPinnedPosition()\n      : undefined;\n  const pinnedColumnBg =\n    pinningState &&\n    visualVariantConfig.rowSeparation !== 'zebraStripes' &&\n    (visualVariantConfig.contained ? 'contained' : 'uncontained');\n\n  return (\n    <DataTableCellMemo\n      rowId={props.cell.row.id}\n      virtualRowIndex={isInDragOverlay ? undefined : virtualRowIndex}\n      virtualColumnIndex={virtualColumnIndex}\n      columnId={columnId}\n      subRowDepth={subRowDepth}\n      canCellAction={props.cell.column.getCanCellActions()}\n      columnMeasure={columnMeasure}\n      dragAndDropRef={\n        !isInDragOverlay && isFirstColumn ? dragAndDropRef : undefined\n      }\n      pillColor={pillColor}\n      thresholdColor={thresholdCellColors.color}\n      thresholdBackgroundColor={thresholdCellColors.backgroundColor}\n      enableExpanding={table.options.enableExpanding}\n      leftPosition={\n        leftPinnedPosition !== undefined ? `${leftPinnedPosition}px` : undefined\n      }\n      rightPosition={\n        rightPinnedPosition !== undefined\n          ? `${rightPinnedPosition}px`\n          : undefined\n      }\n      hasCustomCellRenderer={hasCustomCellRenderer}\n      isSubRowIndicatorColumn={subrowContext.isSubRowIndicatorColumn}\n      columnType={columnDef.columnType}\n      isLineWrapped={isLineWrapped}\n      cellActionAriaLabel={cellActionAriaLabel}\n      className={clsx(\n        cellStyles.outerCell({\n          lineWrap: isLineWrapped,\n          fontStyle: props.cell.column.getFontStyle(),\n          rowDensity: hasCustomCellRenderer\n            ? 'customCellRenderer'\n            : visualVariantConfig.rowDensity,\n          interactiveRows: table.options.enableRowInteractivity,\n          verticalDividers: visualVariantConfig.verticalDividers,\n          pinnedColumn: pinningState,\n          background: pinnedColumnBg,\n        }),\n        alignmentStyles.horizontalAlignment[\n          columnDef.alignment ?? DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT\n        ],\n        alignmentStyles.verticalAlignment[table.getBodyVerticalAlignment()],\n        {\n          [thresholdStyles.thresholdPill]:\n            pillColor !== undefined && pillColor !== null,\n          [tableStyles.prefixColumn]: isPrefixColumn,\n          [tableStyles.pinnedCellInDragOverlay]:\n            pinningState && isInDragOverlay,\n          [cellStyles.activeInteraction]: hasActiveFloatingMenu,\n        },\n      )}\n      rowData={rowData}\n      tableColumns={table.options.columns}\n      cellDeps={cellDeps}\n    >\n      {hasCustomCellRenderer ? (\n        <DataTableColumnContextProvider value={props.cell.column}>\n          <table.FlexRender cell={props.cell} />\n        </DataTableColumnContextProvider>\n      ) : (\n        <table.FlexRender cell={props.cell} />\n      )}\n    </DataTableCellMemo>\n  );\n}\n"],
+  "mappings": "AA4QI,SAgCI,KAhCJ;AArQJ,SAAS,wBAAwB;AACjC,OAAO,UAAU;AACjB;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,+CAA+C;AACxD,YAAY,qBAAqB;AACjC,YAAY,gBAAgB;AAC5B,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,YAAY,iBAAiB;AAE7B,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AACpC,YAAY,qBAAqB;AAEjC,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AA8LnC,SAAS,qBAIP,OACoB;AACpB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAKJ,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,YAAY,aAAiC;AAAA,IACjD;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,aAAa,cAAc,KAAK,iBAAiB;AAAA,MACvD,KAAK;AAAA,MACL,cAAY,OAAO,eAAe,WAAW,kBAAkB;AAAA,MAC/D,iBAAe;AAAA,MACf,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,qBAAmB;AAAA,MACnB;AAAA,MACA,cAAc,MAAM,iBAAiB,WAAW,IAAI;AAAA,MACpD,cAAc,MAAM,iBAAiB,WAAW,KAAK;AAAA,MACrD,OAAO;AAAA,QACL,GAAG,iBAAiB;AAAA,UAClB,CAAC,gBAAgB,kBAAkB,GAAG;AAAA,UACtC,CAAC,WAAW,eAAe,GAAG;AAAA,UAC9B,CAAC,WAAW,gBAAgB,GAAG;AAAA,QACjC,CAAC;AAAA,QACD,kBAAkB,sBAAsB,KAAK;AAAA,QAC7C,eAAe;AAAA,QACf,cAAc;AAAA,QACd,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,iBAAiB;AAAA,QACjB,UACE,aAAa,mBAAmB,KAAK,gBAAgB;AAAA,MACzD;AAAA,MAIC;AAAA,4BAAoB,QACrB,CAAC,yBACD,4BAA4B,OAC1B,oBAAC,uBAAoB,YAAwB,IAC3C;AAAA,QAEH,CAAC,yBACF,eAAe,eACf,eAAe,cACf,eAAe,gBACb;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,WAAW,UAAU;AAAA,gBACnB,UAAU;AAAA,cACZ,CAAC;AAAA,YACH;AAAA,YAEC;AAAA;AAAA,QACH,IAEA;AAAA,QAED,iBACC;AAAA,UAAC;AAAA;AAAA,YACC,oBAAoB;AAAA,YACpB;AAAA,YACA,MAAK;AAAA,YACL,cAAY;AAAA,YACZ,eAAa;AAAA,YACb;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAUA,SAAS,cAIP,WACA,WACS;AAGT,MAAI,UAAU,yBAAyB,UAAU,aAAa,QAAW;AACvE,WAAO;AAAA,EACT;AAGA,QAAM,EAAE,UAAU,eAAe,GAAG,SAAS,IAAI;AACjD,QAAM,EAAE,UAAU,eAAe,GAAG,SAAS,IAAI;AAGjD,QAAM,OAAO,OAAO,KAAK,QAAQ;AACjC,SAAO,KAAK,MAAM,CAAC,QAAQ,SAAS,GAAG,MAAM,SAAS,GAAG,CAAC;AAC5D;AAEA,MAAM,oBAAoB,KAAK,sBAAsB,aAAa;AAE3D,SAAS,cACd,OACoB;AACpB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,QAAQ,aAAa;AAC3B,QAAM,EAAE,oBAAoB,IAAI,oBAAoB;AACpD,QAAM,gBAAgB,WAAW,iBAAiB;AAElD,QAAM,gBAAgB,MAAM,KAAK,OAAO,iBAAiB;AAGzD,QAAM,YAAY,uBAAuB,IAAI,gBAAgB;AAC7D,QAAM,sBAAsB,MAAM,KAAK,mBAAmB;AAC1D,QAAM,WAAW,MAAM,KAAK,OAAO;AACnC,QAAM,YAAY,MAAM,KAAK,OAAO;AACpC,QAAM,wBAAwB,UAAU,MAAM;AAE9C,QAAM,gBAAgB,uBAAuB;AAC7C,QAAM,iBACJ,wBAAwB,SAAS,KACjC,sBAAsB,SAAS,KAC/B,mBAAmB,SAAS;AAE9B,QAAM,sBAAsB,MAAM,MAAM,qBAAqB,IAAI;AACjE,QAAM,eACJ,MAAM,KAAK,OACX,YAAY;AACd,QAAM,qBACJ,iBAAiB,SACb,MAAM,KAAK,OAAO,sBAAsB,IACxC;AACN,QAAM,sBACJ,iBAAiB,UACb,MAAM,KAAK,OAAO,uBAAuB,IACzC;AACN,QAAM,iBACJ,gBACA,oBAAoB,kBAAkB,mBACrC,oBAAoB,YAAY,cAAc;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,MAAM,KAAK,IAAI;AAAA,MACtB,iBAAiB,kBAAkB,SAAY;AAAA,MAC/C;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,MAAM,KAAK,OAAO,kBAAkB;AAAA,MACnD;AAAA,MACA,gBACE,CAAC,mBAAmB,gBAAgB,iBAAiB;AAAA,MAEvD;AAAA,MACA,gBAAgB,oBAAoB;AAAA,MACpC,0BAA0B,oBAAoB;AAAA,MAC9C,iBAAiB,MAAM,QAAQ;AAAA,MAC/B,cACE,uBAAuB,SAAY,GAAG,kBAAkB,OAAO;AAAA,MAEjE,eACE,wBAAwB,SACpB,GAAG,mBAAmB,OACtB;AAAA,MAEN;AAAA,MACA,yBAAyB,cAAc;AAAA,MACvC,YAAY,UAAU;AAAA,MACtB;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,WAAW,UAAU;AAAA,UACnB,UAAU;AAAA,UACV,WAAW,MAAM,KAAK,OAAO,aAAa;AAAA,UAC1C,YAAY,wBACR,uBACA,oBAAoB;AAAA,UACxB,iBAAiB,MAAM,QAAQ;AAAA,UAC/B,kBAAkB,oBAAoB;AAAA,UACtC,cAAc;AAAA,UACd,YAAY;AAAA,QACd,CAAC;AAAA,QACD,gBAAgB,oBACd,UAAU,aAAa,uCACzB;AAAA,QACA,gBAAgB,kBAAkB,MAAM,yBAAyB,CAAC;AAAA,QAClE;AAAA,UACE,CAAC,gBAAgB,aAAa,GAC5B,cAAc,UAAa,cAAc;AAAA,UAC3C,CAAC,YAAY,YAAY,GAAG;AAAA,UAC5B,CAAC,YAAY,uBAAuB,GAClC,gBAAgB;AAAA,UAClB,CAAC,WAAW,iBAAiB,GAAG;AAAA,QAClC;AAAA,MACF;AAAA,MACA;AAAA,MACA,cAAc,MAAM,QAAQ;AAAA,MAC5B;AAAA,MAEC,kCACC,oBAAC,kCAA+B,OAAO,MAAM,KAAK,QAChD,8BAAC,MAAM,YAAN,EAAiB,MAAM,MAAM,MAAM,GACtC,IAEA,oBAAC,MAAM,YAAN,EAAiB,MAAM,MAAM,MAAM;AAAA;AAAA,EAExC;AAEJ;",
   "names": []
 }

package/esm/tables/DataTable/components/DataTableCell.sty.js

@@ -5,18 +5,23 @@ import "../features/RowOrder/RowOrder.css";
 import "../features/RowDetails/RowDetails.css";
 import "../features/RowInteractivity/RowInteractivity.css";
 import "./DataTableRow.css";
+import "../features/ColumnSizing/ColumnSizing.css";
 import "../features/Thresholds/Thresholds.css";
 import "./DataTableCell.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var activeInteraction = "_1ons7qup-3-5-2";
-var innerCell = _7a468({ defaultClassName: "_1ons7qum-3-5-2", variantClassNames: { lineWrap: { true: "_1ons7qun-3-5-2", false: "_1ons7quo-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
-var leftPositionVar = "var(--_1ons7qu0-3-5-2)";
-var outerCell = _7a468({ defaultClassName: "_1ons7qu2-3-5-2", variantClassNames: { prefixColumn: { true: "_1ons7qu3-3-5-2" }, lineWrap: { true: "_1ons7qu4-3-5-2", false: "_1ons7qu5-3-5-2" }, fontStyle: { text: "_1ons7qu6-3-5-2", code: "_1ons7qu7-3-5-2", inherit: "_1ons7qu8-3-5-2" }, rowDensity: { customCellRenderer: "_1ons7qu9-3-5-2", "default": "_1ons7qua-3-5-2", condensed: "_1ons7qub-3-5-2", comfortable: "_1ons7quc-3-5-2" }, verticalDividers: { true: "_1ons7qud-3-5-2", false: "_1ons7que-3-5-2" }, interactiveRows: { false: "_1ons7quf-3-5-2" }, pinnedColumn: { false: "_1ons7qug-3-5-2", left: "_1ons7quh-3-5-2", right: "_1ons7qui-3-5-2" }, background: { false: "_1ons7quj-3-5-2", contained: "_1ons7quk-3-5-2", uncontained: "_1ons7qul-3-5-2" } }, defaultVariants: { fontStyle: "text", rowDensity: "default", verticalDividers: false }, compoundVariants: [] });
-var rightPositionVar = "var(--_1ons7qu1-3-5-2)";
+var activeInteraction = "_1ons7qup-3-7-0";
+var innerCell = _7a468({ defaultClassName: "_1ons7qum-3-7-0", variantClassNames: { lineWrap: { true: "_1ons7qun-3-7-0", false: "_1ons7quo-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
+var leftPositionVar = "var(--_1ons7qu0-3-7-0)";
+var lineWrapFalse = { overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", maxWidth: "100%", minWidth: 0 };
+var lineWrapTrue = { whiteSpace: "normal", textOverflow: "initial", wordBreak: "normal", overflowWrap: "anywhere" };
+var outerCell = _7a468({ defaultClassName: "_1ons7qu2-3-7-0", variantClassNames: { prefixColumn: { true: "_1ons7qu3-3-7-0" }, lineWrap: { true: "_1ons7qu4-3-7-0", false: "_1ons7qu5-3-7-0" }, fontStyle: { text: "_1ons7qu6-3-7-0", code: "_1ons7qu7-3-7-0", inherit: "_1ons7qu8-3-7-0" }, rowDensity: { customCellRenderer: "_1ons7qu9-3-7-0", "default": "_1ons7qua-3-7-0", condensed: "_1ons7qub-3-7-0", comfortable: "_1ons7quc-3-7-0" }, verticalDividers: { true: "_1ons7qud-3-7-0", false: "_1ons7que-3-7-0" }, interactiveRows: { false: "_1ons7quf-3-7-0" }, pinnedColumn: { false: "_1ons7qug-3-7-0", left: "_1ons7quh-3-7-0", right: "_1ons7qui-3-7-0" }, background: { false: "_1ons7quj-3-7-0", contained: "_1ons7quk-3-7-0", uncontained: "_1ons7qul-3-7-0" } }, defaultVariants: { fontStyle: "text", rowDensity: "default", verticalDividers: false }, compoundVariants: [] });
+var rightPositionVar = "var(--_1ons7qu1-3-7-0)";
 export {
   activeInteraction,
   innerCell,
   leftPositionVar,
+  lineWrapFalse,
+  lineWrapTrue,
   outerCell,
   rightPositionVar
 };

package/esm/tables/DataTable/components/DataTableCell.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableCell.css.ts"],
-  "sourcesContent": ["import '../DataTable.css';\nimport '../../../core/components/app-root/AppRoot.css';\nimport './DataTableVirtualizationContainer.css';\nimport '../features/RowOrder/RowOrder.css';\nimport '../features/RowDetails/RowDetails.css';\nimport '../features/RowInteractivity/RowInteractivity.css';\nimport './DataTableRow.css';\nimport '../features/Thresholds/Thresholds.css';\nimport './DataTableCell.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var activeInteraction = '_1ons7qup-3-5-2';\nexport var innerCell = _7a468({defaultClassName:'_1ons7qum-3-5-2',variantClassNames:{lineWrap:{true:'_1ons7qun-3-5-2',false:'_1ons7quo-3-5-2'}},defaultVariants:{},compoundVariants:[]});\nexport var leftPositionVar = 'var(--_1ons7qu0-3-5-2)';\nexport var outerCell = _7a468({defaultClassName:'_1ons7qu2-3-5-2',variantClassNames:{prefixColumn:{true:'_1ons7qu3-3-5-2'},lineWrap:{true:'_1ons7qu4-3-5-2',false:'_1ons7qu5-3-5-2'},fontStyle:{text:'_1ons7qu6-3-5-2',code:'_1ons7qu7-3-5-2',inherit:'_1ons7qu8-3-5-2'},rowDensity:{customCellRenderer:'_1ons7qu9-3-5-2','default':'_1ons7qua-3-5-2',condensed:'_1ons7qub-3-5-2',comfortable:'_1ons7quc-3-5-2'},verticalDividers:{true:'_1ons7qud-3-5-2',false:'_1ons7que-3-5-2'},interactiveRows:{false:'_1ons7quf-3-5-2'},pinnedColumn:{false:'_1ons7qug-3-5-2',left:'_1ons7quh-3-5-2',right:'_1ons7qui-3-5-2'},background:{false:'_1ons7quj-3-5-2',contained:'_1ons7quk-3-5-2',uncontained:'_1ons7qul-3-5-2'}},defaultVariants:{fontStyle:'text',rowDensity:'default',verticalDividers:false},compoundVariants:[]});\nexport var rightPositionVar = 'var(--_1ons7qu1-3-5-2)';"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,oBAAoB;AACxB,IAAI,YAAY,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAChL,IAAI,kBAAkB;AACtB,IAAI,YAAY,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,cAAa,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,WAAU,EAAC,MAAK,mBAAkB,MAAK,mBAAkB,SAAQ,kBAAiB,GAAE,YAAW,EAAC,oBAAmB,mBAAkB,WAAU,mBAAkB,WAAU,mBAAkB,aAAY,kBAAiB,GAAE,kBAAiB,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,iBAAgB,EAAC,OAAM,kBAAiB,GAAE,cAAa,EAAC,OAAM,mBAAkB,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,YAAW,EAAC,OAAM,mBAAkB,WAAU,mBAAkB,aAAY,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,WAAU,QAAO,YAAW,WAAU,kBAAiB,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC/wB,IAAI,mBAAmB;",
+  "sourcesContent": ["import '../DataTable.css';\nimport '../../../core/components/app-root/AppRoot.css';\nimport './DataTableVirtualizationContainer.css';\nimport '../features/RowOrder/RowOrder.css';\nimport '../features/RowDetails/RowDetails.css';\nimport '../features/RowInteractivity/RowInteractivity.css';\nimport './DataTableRow.css';\nimport '../features/ColumnSizing/ColumnSizing.css';\nimport '../features/Thresholds/Thresholds.css';\nimport './DataTableCell.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var activeInteraction = '_1ons7qup-3-7-0';\nexport var innerCell = _7a468({defaultClassName:'_1ons7qum-3-7-0',variantClassNames:{lineWrap:{true:'_1ons7qun-3-7-0',false:'_1ons7quo-3-7-0'}},defaultVariants:{},compoundVariants:[]});\nexport var leftPositionVar = 'var(--_1ons7qu0-3-7-0)';\nexport var lineWrapFalse = {overflow:'hidden',whiteSpace:'nowrap',textOverflow:'ellipsis',maxWidth:'100%',minWidth:0};\nexport var lineWrapTrue = {whiteSpace:'normal',textOverflow:'initial',wordBreak:'normal',overflowWrap:'anywhere'};\nexport var outerCell = _7a468({defaultClassName:'_1ons7qu2-3-7-0',variantClassNames:{prefixColumn:{true:'_1ons7qu3-3-7-0'},lineWrap:{true:'_1ons7qu4-3-7-0',false:'_1ons7qu5-3-7-0'},fontStyle:{text:'_1ons7qu6-3-7-0',code:'_1ons7qu7-3-7-0',inherit:'_1ons7qu8-3-7-0'},rowDensity:{customCellRenderer:'_1ons7qu9-3-7-0','default':'_1ons7qua-3-7-0',condensed:'_1ons7qub-3-7-0',comfortable:'_1ons7quc-3-7-0'},verticalDividers:{true:'_1ons7qud-3-7-0',false:'_1ons7que-3-7-0'},interactiveRows:{false:'_1ons7quf-3-7-0'},pinnedColumn:{false:'_1ons7qug-3-7-0',left:'_1ons7quh-3-7-0',right:'_1ons7qui-3-7-0'},background:{false:'_1ons7quj-3-7-0',contained:'_1ons7quk-3-7-0',uncontained:'_1ons7qul-3-7-0'}},defaultVariants:{fontStyle:'text',rowDensity:'default',verticalDividers:false},compoundVariants:[]});\nexport var rightPositionVar = 'var(--_1ons7qu1-3-7-0)';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,oBAAoB;AACxB,IAAI,YAAY,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAChL,IAAI,kBAAkB;AACtB,IAAI,gBAAgB,EAAC,UAAS,UAAS,YAAW,UAAS,cAAa,YAAW,UAAS,QAAO,UAAS,EAAC;AAC7G,IAAI,eAAe,EAAC,YAAW,UAAS,cAAa,WAAU,WAAU,UAAS,cAAa,WAAU;AACzG,IAAI,YAAY,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,cAAa,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,WAAU,EAAC,MAAK,mBAAkB,MAAK,mBAAkB,SAAQ,kBAAiB,GAAE,YAAW,EAAC,oBAAmB,mBAAkB,WAAU,mBAAkB,WAAU,mBAAkB,aAAY,kBAAiB,GAAE,kBAAiB,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,iBAAgB,EAAC,OAAM,kBAAiB,GAAE,cAAa,EAAC,OAAM,mBAAkB,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,YAAW,EAAC,OAAM,mBAAkB,WAAU,mBAAkB,aAAY,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,WAAU,QAAO,YAAW,WAAU,kBAAiB,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC/wB,IAAI,mBAAmB;",
   "names": []
 }

package/esm/tables/DataTable/components/DataTableContent.js

@@ -10,7 +10,7 @@ import { CellActionFloatingMenu } from "../features/UserActions/FloatingMenu.js"
 import { dataTableMessages } from "../messages.js";
 import { DataTableScrollShadow } from "./DataTableScrollShadow.js";
 import { getDataTableBorderWidth } from "../../utils/data-table-border-width.js";
-const DataTableContent = (props) => {
+function DataTableContent(props) {
   const intl = useIntl();
   const table = useDataTable();
   const visibleLeafColumnsWithoutBuiltin = table.getVisibleLeafColumnsWithoutBuiltin();
@@ -20,7 +20,7 @@ const DataTableContent = (props) => {
   }
   const { rowVirtualizer, columnVirtualizer } = props;
   const rows = table.getRowModel().rows;
-  const draggingRow = table.getState().draggingRowInfo;
+  const draggingRow = table.atoms.draggingRowInfo?.get();
   const isDraggingRow = !!draggingRow;
   const isDataEmpty = rowVirtualizer.options.count === 0;
   const isColumnsEmpty = columnVirtualizer.options.count === 0;
@@ -29,10 +29,9 @@ const DataTableContent = (props) => {
   const scrollElement = columnVirtualizer.scrollElement;
   const tableViewportWidth = scrollElement?.clientWidth ?? 0;
   const scrollElementWidth = scrollElement?.scrollWidth ?? 0;
-  const visualVariantOptions = table.getVisualVariantOptions();
   const hasOverflowLeft = scrollOffset > 0;
   const gridHeight = isEmpty ? "auto" : rowVirtualizer.getTotalSize();
-  const borderWidth = visualVariantOptions.contained ? getDataTableBorderWidth() : 0;
+  const borderWidth = table.atoms.visualVariantConfig?.get()?.contained ? getDataTableBorderWidth() : 0;
   const hasOverflowRight = scrollElementWidth - scrollOffset - borderWidth > tableViewportWidth;
   const cellActionAriaLabel = intl.formatMessage(
     dataTableMessages.cellActionLabel
@@ -80,7 +79,7 @@ const DataTableContent = (props) => {
               cellActionAriaLabel
             },
             children: [
-              visualVariantOptions.headers === "default" && /* @__PURE__ */ jsx(DataTableHeader, {}),
+              table.atoms.visualVariantConfig?.get()?.headers === "default" && /* @__PURE__ */ jsx(DataTableHeader, {}),
               /* @__PURE__ */ jsx(
                 DataTableBody,
                 {
@@ -103,7 +102,7 @@ const DataTableContent = (props) => {
       ]
     }
   );
-};
+}
 export {
   DataTableContent
 };

package/esm/tables/DataTable/components/DataTableContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableContent.tsx"],
-  "sourcesContent": ["import type { Virtualizer } from '@tanstack/react-virtual';\nimport type { JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DataTableBody } from './DataTableBody.js';\nimport { DataTableHeader } from './DataTableHeader.js';\nimport {\n  DataTableContentContextProvider,\n  useDataTable,\n} from '../contexts/DataTableContext.js';\nimport { CellActionFloatingMenu } from '../features/UserActions/FloatingMenu.js';\nimport { dataTableMessages } from '../messages.js';\nimport { DataTableScrollShadow } from './DataTableScrollShadow.js';\nimport { getDataTableBorderWidth } from '../../utils/data-table-border-width.js';\n\n/**\n * Renders the content of the `DataTable`.\n *\n * This component is responsible for displaying the header and the main body of the datatable,\n * including rows and columns.\n */\nexport const DataTableContent = (props: {\n  rowVirtualizer: Virtualizer<HTMLDivElement, Element>;\n  columnVirtualizer: Virtualizer<HTMLDivElement, Element>;\n}): JSX.Element | null => {\n  const intl = useIntl();\n  const table = useDataTable();\n\n  const visibleLeafColumnsWithoutBuiltin =\n    table.getVisibleLeafColumnsWithoutBuiltin();\n  const hasVisibleColumns = visibleLeafColumnsWithoutBuiltin.length > 0;\n\n  if (!hasVisibleColumns) {\n    return null;\n  }\n\n  const { rowVirtualizer, columnVirtualizer } = props;\n\n  const rows = table.getRowModel().rows;\n\n  const draggingRow = table.getState().draggingRowInfo;\n  const isDraggingRow = !!draggingRow;\n\n  const isDataEmpty = rowVirtualizer.options.count === 0;\n  const isColumnsEmpty = columnVirtualizer.options.count === 0;\n  const isEmpty = isDataEmpty || isColumnsEmpty;\n\n  // We need to detect overflow on either side, so the scroll shadow can be displayed only if the scrollable content is actually overflowing\n  const scrollOffset = columnVirtualizer.scrollOffset ?? 0;\n  const scrollElement = columnVirtualizer.scrollElement;\n  const tableViewportWidth = scrollElement?.clientWidth ?? 0;\n  const scrollElementWidth = scrollElement?.scrollWidth ?? 0;\n\n  const visualVariantOptions = table.getVisualVariantOptions();\n  const hasOverflowLeft = scrollOffset > 0;\n\n  const gridHeight = isEmpty ? 'auto' : rowVirtualizer.getTotalSize();\n  const borderWidth = visualVariantOptions.contained\n    ? getDataTableBorderWidth()\n    : 0;\n  const hasOverflowRight =\n    scrollElementWidth - scrollOffset - borderWidth > tableViewportWidth;\n\n  const cellActionAriaLabel = intl.formatMessage(\n    dataTableMessages.cellActionLabel,\n  );\n\n  return (\n    <div\n      role=\"grid\"\n      style={{\n        display: 'grid',\n        height: gridHeight,\n        gridTemplateColumns: table.getGridTemplateColumns(),\n        gridTemplateRows: table.getGridTemplateRows(),\n      }}\n      onMouseOver={(event) => {\n        if (!isDraggingRow) {\n          table.handleInteractiveRowMouseOver(event);\n        }\n      }}\n      onMouseLeave={(event) => {\n        table.handleInteractiveRowMouseLeave(event);\n      }}\n      onMouseDown={(event) => {\n        if (\n          // main button (left button)\n          event.button === 0 ||\n          // auxiliary button (wheel/middle button)\n          event.button === 1\n        ) {\n          table.handleInteractiveRowClick(event);\n        }\n      }}\n      onContextMenu={(event) => {\n        // disable context menu for links, we need to show the browser menu instead\n        if (event.target instanceof Element && event.target.closest('a')) {\n          return;\n        }\n\n        table.getUserActionFloatingMenuContextMenuHandler()(event);\n      }}\n    >\n      <DataTableContentContextProvider\n        value={{\n          hasOverflowLeft,\n          hasOverflowRight,\n          cellActionAriaLabel,\n        }}\n      >\n        {visualVariantOptions.headers === 'default' && <DataTableHeader />}\n        <DataTableBody\n          rows={rows}\n          rowVirtualizer={rowVirtualizer}\n          columnVirtualizer={columnVirtualizer}\n        />\n        {(table.options.enableCellActions ||\n          table.options.enableColumnActions ||\n          table.options.enableSorting) && <CellActionFloatingMenu />}\n      </DataTableContentContextProvider>\n      <DataTableScrollShadow\n        hasOverflowLeft={hasOverflowLeft}\n        hasOverflowRight={hasOverflowRight}\n      />\n    </div>\n  );\n};\n"],
-  "mappings": "AAuGM,SAOiD,KAPjD;AArGN,SAAS,eAAe;AAExB,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AACtC,SAAS,+BAA+B;AAQjC,MAAM,mBAAmB,CAAC,UAGP;AACxB,QAAM,OAAO,QAAQ;AACrB,QAAM,QAAQ,aAAa;AAE3B,QAAM,mCACJ,MAAM,oCAAoC;AAC5C,QAAM,oBAAoB,iCAAiC,SAAS;AAEpE,MAAI,CAAC,mBAAmB;AACtB,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,gBAAgB,kBAAkB,IAAI;AAE9C,QAAM,OAAO,MAAM,YAAY,EAAE;AAEjC,QAAM,cAAc,MAAM,SAAS,EAAE;AACrC,QAAM,gBAAgB,CAAC,CAAC;AAExB,QAAM,cAAc,eAAe,QAAQ,UAAU;AACrD,QAAM,iBAAiB,kBAAkB,QAAQ,UAAU;AAC3D,QAAM,UAAU,eAAe;AAG/B,QAAM,eAAe,kBAAkB,gBAAgB;AACvD,QAAM,gBAAgB,kBAAkB;AACxC,QAAM,qBAAqB,eAAe,eAAe;AACzD,QAAM,qBAAqB,eAAe,eAAe;AAEzD,QAAM,uBAAuB,MAAM,wBAAwB;AAC3D,QAAM,kBAAkB,eAAe;AAEvC,QAAM,aAAa,UAAU,SAAS,eAAe,aAAa;AAClE,QAAM,cAAc,qBAAqB,YACrC,wBAAwB,IACxB;AACJ,QAAM,mBACJ,qBAAqB,eAAe,cAAc;AAEpD,QAAM,sBAAsB,KAAK;AAAA,IAC/B,kBAAkB;AAAA,EACpB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,OAAO;AAAA,QACL,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,qBAAqB,MAAM,uBAAuB;AAAA,QAClD,kBAAkB,MAAM,oBAAoB;AAAA,MAC9C;AAAA,MACA,aAAa,CAAC,UAAU;AACtB,YAAI,CAAC,eAAe;AAClB,gBAAM,8BAA8B,KAAK;AAAA,QAC3C;AAAA,MACF;AAAA,MACA,cAAc,CAAC,UAAU;AACvB,cAAM,+BAA+B,KAAK;AAAA,MAC5C;AAAA,MACA,aAAa,CAAC,UAAU;AACtB;AAAA;AAAA,UAEE,MAAM,WAAW;AAAA,UAEjB,MAAM,WAAW;AAAA,UACjB;AACA,gBAAM,0BAA0B,KAAK;AAAA,QACvC;AAAA,MACF;AAAA,MACA,eAAe,CAAC,UAAU;AAExB,YAAI,MAAM,kBAAkB,WAAW,MAAM,OAAO,QAAQ,GAAG,GAAG;AAChE;AAAA,QACF;AAEA,cAAM,4CAA4C,EAAE,KAAK;AAAA,MAC3D;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,YAEC;AAAA,mCAAqB,YAAY,aAAa,oBAAC,mBAAgB;AAAA,cAChE;AAAA,gBAAC;AAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA;AAAA;AAAA,cACF;AAAA,eACE,MAAM,QAAQ,qBACd,MAAM,QAAQ,uBACd,MAAM,QAAQ,kBAAkB,oBAAC,0BAAuB;AAAA;AAAA;AAAA,QAC5D;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import type { Virtualizer } from '@tanstack/react-virtual';\nimport type { JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DataTableBody } from './DataTableBody.js';\nimport { DataTableHeader } from './DataTableHeader.js';\nimport {\n  DataTableContentContextProvider,\n  useDataTable,\n} from '../contexts/DataTableContext.js';\nimport { CellActionFloatingMenu } from '../features/UserActions/FloatingMenu.js';\nimport { dataTableMessages } from '../messages.js';\nimport { DataTableScrollShadow } from './DataTableScrollShadow.js';\nimport { getDataTableBorderWidth } from '../../utils/data-table-border-width.js';\n\n/**\n * Renders the content of the `DataTable`.\n *\n * This component is responsible for displaying the header and the main body of the datatable,\n * including rows and columns.\n */\nexport function DataTableContent(\n  props: Readonly<{\n    rowVirtualizer: Virtualizer<HTMLDivElement, Element>;\n    columnVirtualizer: Virtualizer<HTMLDivElement, Element>;\n  }>,\n): JSX.Element | null {\n  const intl = useIntl();\n  const table = useDataTable();\n\n  const visibleLeafColumnsWithoutBuiltin =\n    table.getVisibleLeafColumnsWithoutBuiltin();\n  const hasVisibleColumns = visibleLeafColumnsWithoutBuiltin.length > 0;\n\n  if (!hasVisibleColumns) {\n    return null;\n  }\n\n  const { rowVirtualizer, columnVirtualizer } = props;\n\n  const rows = table.getRowModel().rows;\n\n  const draggingRow = table.atoms.draggingRowInfo?.get();\n  const isDraggingRow = !!draggingRow;\n\n  const isDataEmpty = rowVirtualizer.options.count === 0;\n  const isColumnsEmpty = columnVirtualizer.options.count === 0;\n  const isEmpty = isDataEmpty || isColumnsEmpty;\n\n  // We need to detect overflow on either side, so the scroll shadow can be displayed only if the scrollable content is actually overflowing\n  const scrollOffset = columnVirtualizer.scrollOffset ?? 0;\n  const scrollElement = columnVirtualizer.scrollElement;\n  const tableViewportWidth = scrollElement?.clientWidth ?? 0;\n  const scrollElementWidth = scrollElement?.scrollWidth ?? 0;\n\n  const hasOverflowLeft = scrollOffset > 0;\n\n  const gridHeight = isEmpty ? 'auto' : rowVirtualizer.getTotalSize();\n  const borderWidth = table.atoms.visualVariantConfig?.get()?.contained\n    ? getDataTableBorderWidth()\n    : 0;\n  const hasOverflowRight =\n    scrollElementWidth - scrollOffset - borderWidth > tableViewportWidth;\n\n  const cellActionAriaLabel = intl.formatMessage(\n    dataTableMessages.cellActionLabel,\n  );\n\n  return (\n    <div\n      role=\"grid\"\n      style={{\n        display: 'grid',\n        height: gridHeight,\n        gridTemplateColumns: table.getGridTemplateColumns(),\n        gridTemplateRows: table.getGridTemplateRows(),\n      }}\n      onMouseOver={(event) => {\n        if (!isDraggingRow) {\n          table.handleInteractiveRowMouseOver(event);\n        }\n      }}\n      onMouseLeave={(event) => {\n        table.handleInteractiveRowMouseLeave(event);\n      }}\n      onMouseDown={(event) => {\n        if (\n          // main button (left button)\n          event.button === 0 ||\n          // auxiliary button (wheel/middle button)\n          event.button === 1\n        ) {\n          table.handleInteractiveRowClick(event);\n        }\n      }}\n      onContextMenu={(event) => {\n        // disable context menu for links, we need to show the browser menu instead\n        if (event.target instanceof Element && event.target.closest('a')) {\n          return;\n        }\n\n        table.getUserActionFloatingMenuContextMenuHandler()(event);\n      }}\n    >\n      <DataTableContentContextProvider\n        value={{\n          hasOverflowLeft,\n          hasOverflowRight,\n          cellActionAriaLabel,\n        }}\n      >\n        {table.atoms.visualVariantConfig?.get()?.headers === 'default' && (\n          <DataTableHeader />\n        )}\n        <DataTableBody\n          rows={rows}\n          rowVirtualizer={rowVirtualizer}\n          columnVirtualizer={columnVirtualizer}\n        />\n        {(table.options.enableCellActions ||\n          table.options.enableColumnActions ||\n          table.options.enableSorting) && <CellActionFloatingMenu />}\n      </DataTableContentContextProvider>\n      <DataTableScrollShadow\n        hasOverflowLeft={hasOverflowLeft}\n        hasOverflowRight={hasOverflowRight}\n      />\n    </div>\n  );\n}\n"],
+  "mappings": "AAwGM,SAQI,KARJ;AAtGN,SAAS,eAAe;AAExB,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AACtC,SAAS,+BAA+B;AAQjC,SAAS,iBACd,OAIoB;AACpB,QAAM,OAAO,QAAQ;AACrB,QAAM,QAAQ,aAAa;AAE3B,QAAM,mCACJ,MAAM,oCAAoC;AAC5C,QAAM,oBAAoB,iCAAiC,SAAS;AAEpE,MAAI,CAAC,mBAAmB;AACtB,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,gBAAgB,kBAAkB,IAAI;AAE9C,QAAM,OAAO,MAAM,YAAY,EAAE;AAEjC,QAAM,cAAc,MAAM,MAAM,iBAAiB,IAAI;AACrD,QAAM,gBAAgB,CAAC,CAAC;AAExB,QAAM,cAAc,eAAe,QAAQ,UAAU;AACrD,QAAM,iBAAiB,kBAAkB,QAAQ,UAAU;AAC3D,QAAM,UAAU,eAAe;AAG/B,QAAM,eAAe,kBAAkB,gBAAgB;AACvD,QAAM,gBAAgB,kBAAkB;AACxC,QAAM,qBAAqB,eAAe,eAAe;AACzD,QAAM,qBAAqB,eAAe,eAAe;AAEzD,QAAM,kBAAkB,eAAe;AAEvC,QAAM,aAAa,UAAU,SAAS,eAAe,aAAa;AAClE,QAAM,cAAc,MAAM,MAAM,qBAAqB,IAAI,GAAG,YACxD,wBAAwB,IACxB;AACJ,QAAM,mBACJ,qBAAqB,eAAe,cAAc;AAEpD,QAAM,sBAAsB,KAAK;AAAA,IAC/B,kBAAkB;AAAA,EACpB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,OAAO;AAAA,QACL,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,qBAAqB,MAAM,uBAAuB;AAAA,QAClD,kBAAkB,MAAM,oBAAoB;AAAA,MAC9C;AAAA,MACA,aAAa,CAAC,UAAU;AACtB,YAAI,CAAC,eAAe;AAClB,gBAAM,8BAA8B,KAAK;AAAA,QAC3C;AAAA,MACF;AAAA,MACA,cAAc,CAAC,UAAU;AACvB,cAAM,+BAA+B,KAAK;AAAA,MAC5C;AAAA,MACA,aAAa,CAAC,UAAU;AACtB;AAAA;AAAA,UAEE,MAAM,WAAW;AAAA,UAEjB,MAAM,WAAW;AAAA,UACjB;AACA,gBAAM,0BAA0B,KAAK;AAAA,QACvC;AAAA,MACF;AAAA,MACA,eAAe,CAAC,UAAU;AAExB,YAAI,MAAM,kBAAkB,WAAW,MAAM,OAAO,QAAQ,GAAG,GAAG;AAChE;AAAA,QACF;AAEA,cAAM,4CAA4C,EAAE,KAAK;AAAA,MAC3D;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,YAEC;AAAA,oBAAM,MAAM,qBAAqB,IAAI,GAAG,YAAY,aACnD,oBAAC,mBAAgB;AAAA,cAEnB;AAAA,gBAAC;AAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA;AAAA;AAAA,cACF;AAAA,eACE,MAAM,QAAQ,qBACd,MAAM,QAAQ,uBACd,MAAM,QAAQ,kBAAkB,oBAAC,0BAAuB;AAAA;AAAA;AAAA,QAC5D;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/tables/DataTable/components/DataTableDefaultCell.css

@@ -1,4 +1,4 @@
-._14k72810-3-5-2 {
+._14k72810-3-7-0 {
   height: 100%;
   width: 100%;
   max-width: 100%;
@@ -8,81 +8,88 @@
   align-items: inherit;
   overflow: hidden;
 }
-._11pvd3zt-3-5-2 ._14k72810-3-5-2 {
+._11pvd3zt-3-7-0:not(:where(._11pvd3zx-3-7-0)._11pvd3z5-3-7-0) ._14k72810-3-7-0 {
   width: fit-content;
 }
-._14sp6az3-3-5-2+._14sp6az3-3-5-2 ._14k72810-3-5-2 {
+._14sp6az3-3-7-0+._14sp6az3-3-7-0 ._14k72810-3-7-0 {
   padding-left: var(--dt-spacings-size-0, 0);
 }
-._11pvd3z4-3-5-2._11pvd3z6-3-5-2 ._14k72810-3-5-2:where(._yj6voi1-3-5-2, ._yj6voi2-3-5-2), ._11pvd3z4-3-5-2 ._14k72810-3-5-2:where(._yj6voi1-3-5-2, ._yj6voi2-3-5-2):has(+ [data-trigger="useraction"]) {
+._11pvd3z0-3-7-0._11pvd3z2-3-7-0 ._14k72810-3-7-0:where(._yj6voi1-3-7-0, ._yj6voi2-3-7-0) {
   padding-right: var(--dt-spacings-size-0, 0);
 }
-._11pvd3z4-3-5-2._11pvd3z6-3-5-2 ._14k72810-3-5-2._yj6voi0-3-5-2, ._11pvd3z4-3-5-2 ._14k72810-3-5-2._yj6voi0-3-5-2:has(+ [data-trigger="useraction"]) {
+._11pvd3z0-3-7-0 ._14k72810-3-7-0:where(._yj6voi1-3-7-0, ._yj6voi2-3-7-0):has(+ [data-trigger="useraction"]) {
+  padding-right: var(--dt-spacings-size-0, 0);
+}
+._11pvd3z0-3-7-0._11pvd3z2-3-7-0 ._14k72810-3-7-0._yj6voi0-3-7-0 {
+  padding-left: var(--dt-spacings-size-0, 0);
+}
+._11pvd3z0-3-7-0 ._14k72810-3-7-0._yj6voi0-3-7-0:has(+ [data-trigger="useraction"]) {
   padding-left: var(--dt-spacings-size-0, 0);
 }
-:where(._11pvd3zx-3-5-2):is([aria-sort="ascending"], [aria-sort="descending"]) ._14k72810-3-5-2:not(._yj6voi0-3-5-2) {
+:where(._11pvd3zx-3-7-0):is([aria-sort="ascending"], [aria-sort="descending"]) ._14k72810-3-7-0:not(._yj6voi0-3-7-0) {
   padding-right: var(--dt-spacings-size-0, 0);
 }
-:where(._11pvd3zx-3-5-2):is([aria-sort="ascending"], [aria-sort="descending"]) ._14k72810-3-5-2._yj6voi0-3-5-2 {
+:where(._11pvd3zx-3-7-0):is([aria-sort="ascending"], [aria-sort="descending"]) ._14k72810-3-7-0._yj6voi0-3-7-0 {
   padding-left: var(--dt-spacings-size-0, 0);
 }
-._14k72811-3-5-2 {
+._14k72811-3-7-0 {
   white-space: normal;
   text-overflow: initial;
   word-break: normal;
   overflow-wrap: anywhere;
 }
-._14k72812-3-5-2 {
+._14k72812-3-7-0 {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   max-width: 100%;
+  min-width: 0;
 }
-._14k72813-3-5-2 {
+._14k72813-3-7-0 {
   padding-top: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-8, 8px);
   padding-left: var(--dt-spacings-size-12, 12px);
 }
-._1jrjqrd1-3-5-2 ._1ons7qu2-3-5-2:first-child:not(._14sp6az3-3-5-2) ._14k72813-3-5-2 {
+._1jrjqrd1-3-7-0 ._1ons7qu2-3-7-0:first-child:not(._14sp6az3-3-7-0) ._14k72813-3-7-0 {
   padding-left: var(--dt-spacings-size-16, 16px);
 }
-._1jrjqrd1-3-5-2 ._14sp6az3-3-5-2:first-child ._14k72813-3-5-2 {
+._1jrjqrd1-3-7-0 ._14sp6az3-3-7-0:first-child ._14k72813-3-7-0 {
   padding-left: var(--dt-spacings-size-12, 12px);
 }
-._14sp6az3-3-5-2 ._14k72813-3-5-2 {
+._14sp6az3-3-7-0 ._14k72813-3-7-0 {
   padding-right: var(--dt-spacings-size-8, 8px);
   padding-left: var(--dt-spacings-size-8, 8px);
 }
-._14k72814-3-5-2 {
+._14k72814-3-7-0 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._1jrjqrd1-3-5-2 ._1ons7qu2-3-5-2:first-child:not(._14sp6az3-3-5-2) ._14k72814-3-5-2 {
+._1jrjqrd1-3-7-0 ._1ons7qu2-3-7-0:first-child:not(._14sp6az3-3-7-0) ._14k72814-3-7-0 {
   padding-left: calc(var(--dt-spacings-size-6, 6px) + var(--dt-spacings-size-4, 4px));
 }
-._1jrjqrd1-3-5-2 ._14sp6az3-3-5-2:first-child ._14k72814-3-5-2 {
+._1jrjqrd1-3-7-0 ._14sp6az3-3-7-0:first-child ._14k72814-3-7-0 {
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._14sp6az3-3-5-2 ._14k72814-3-5-2 {
+._14sp6az3-3-7-0 ._14k72814-3-7-0 {
   padding-right: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-2, 2px);
 }
-._14k72815-3-5-2 {
+._14k72815-3-7-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-16, 16px);
   padding-bottom: var(--dt-spacings-size-12, 12px);
   padding-left: var(--dt-spacings-size-16, 16px);
 }
-._1jrjqrd1-3-5-2 ._1ons7qu2-3-5-2:first-child::not(._14sp6az3-3-5-2) ._14k72815-3-5-2 {
+._1jrjqrd1-3-7-0 ._1ons7qu2-3-7-0:first-child:not(._14sp6az3-3-7-0) ._14k72815-3-7-0 {
   padding-left: var(--dt-spacings-size-20, 20px);
 }
-._1jrjqrd1-3-5-2 ._14sp6az3-3-5-2:first-child ._14k72815-3-5-2 {
+._1jrjqrd1-3-7-0 ._14sp6az3-3-7-0:first-child ._14k72815-3-7-0 {
   padding-left: var(--dt-spacings-size-16, 16px);
 }
-._14sp6az3-3-5-2 ._14k72815-3-5-2 {
+._14sp6az3-3-7-0 ._14k72815-3-7-0 {
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-left: var(--dt-spacings-size-12, 12px);
 }

package/esm/tables/DataTable/components/DataTableDefaultCell.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { forwardRef } from "react";
+import {
+  forwardRef
+} from "react";
 import { DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT } from "../constants.js";
 import * as alignmentStyles from "./Alignment.sty.js";
 import * as cellStyles from "./DataTableCell.sty.js";
@@ -13,8 +15,8 @@ import {
 import {
   SubRowsCellExpander,
   SubRowsHeaderExpander
-} from "../features/SubRows/SubRowExpanders.js";
-const DataTableDefaultCell = forwardRef((props, forwardedRef) => {
+} from "../features/SubRows/components/SubRowExpanders.js";
+const DataTableDefaultCell = forwardRef(function(props, forwardedRef) {
   const {
     children,
     style: consumerStyle,
@@ -31,7 +33,7 @@ const DataTableDefaultCell = forwardRef((props, forwardedRef) => {
       ref: forwardedRef,
       className: clsx(
         defaultCellStyles.defaultCell({
-          rowDensity: table.getVisualVariantOptions().rowDensity
+          rowDensity: table.atoms.visualVariantConfig?.get().rowDensity
         }),
         alignmentStyles.horizontalAlignment[column.columnDef.alignment ?? DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT],
         consumerClassName

package/esm/tables/DataTable/components/DataTableDefaultCell.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableDefaultCell.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, type HTMLAttributes, type ReactElement } from 'react';\n\nimport type { DataTestId } from '../../../core/types/data-props.js';\nimport type { StylingProps } from '../../../core/types/styling-props.js';\nimport type { WithChildren } from '../../../core/types/with-children.js';\nimport { DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT } from '../constants.js';\nimport * as alignmentStyles from './Alignment.sty.js';\nimport * as cellStyles from './DataTableCell.sty.js';\nimport * as defaultCellStyles from './DataTableDefaultCell.sty.js';\nimport {\n  useDataTable,\n  useDataTableColumn,\n  useDataTableIsHeaderContextProvider,\n} from '../contexts/DataTableContext.js';\nimport {\n  SubRowsCellExpander,\n  SubRowsHeaderExpander,\n} from '../features/SubRows/SubRowExpanders.js';\n\n/**\n * Props for the DataTable.DefaultCell\n * @public\n */\nexport type DataTableDefaultCellProps = WithChildren &\n  StylingProps &\n  DataTestId &\n  HTMLAttributes<HTMLDivElement>;\n\n/**\n * DataTable custom Cell renderer wrapper. This component automatically deals\n * with applying the correct cell styles.\n * @public\n */\nexport const DataTableDefaultCell = forwardRef<\n  HTMLDivElement,\n  DataTableDefaultCellProps\n>((props, forwardedRef): ReactElement | null => {\n  const {\n    children,\n    style: consumerStyle,\n    className: consumerClassName,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = props;\n\n  const table = useDataTable();\n  const column = useDataTableColumn();\n  const isHeader = useDataTableIsHeaderContextProvider();\n\n  return (\n    <div\n      ref={forwardedRef}\n      className={clsx(\n        defaultCellStyles.defaultCell({\n          rowDensity: table.getVisualVariantOptions().rowDensity,\n        }),\n        alignmentStyles.horizontalAlignment[\n          column.columnDef.alignment ?? DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT\n        ],\n        consumerClassName,\n      )}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      {...remainingProps}\n    >\n      {table.options.enableExpanding === true &&\n        table.getSubRowIndicatorColumnId() === column.columnDef.id &&\n        (isHeader ? (\n          <SubRowsHeaderExpander\n            isAllRowsExpanded={table.getIsAllRowsExpanded()}\n          />\n        ) : (\n          <SubRowsCellExpander columnType={column.columnDef.columnType} />\n        ))}\n      {!column.columnDef.meta?.builtin ? (\n        <div\n          className={clsx(\n            cellStyles.innerCell({\n              lineWrap: !isHeader && column.getIsLineWrapped(),\n            }),\n          )}\n        >\n          {children}\n        </div>\n      ) : (\n        children\n      )}\n    </div>\n  );\n});\n\n(\n  DataTableDefaultCell as typeof DataTableDefaultCell & {\n    displayName: string;\n  }\n).displayName = 'DataTable.DefaultCell';\n"],
-  "mappings": "AAmDI,SAkBM,KAlBN;AAnDJ,OAAO,UAAU;AACjB,SAAS,kBAA0D;AAKnE,SAAS,+CAA+C;AACxD,YAAY,qBAAqB;AACjC,YAAY,gBAAgB;AAC5B,YAAY,uBAAuB;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAgBA,MAAM,uBAAuB,WAGlC,CAAC,OAAO,iBAAsC;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,WAAW;AAAA,IACX,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,QAAQ,aAAa;AAC3B,QAAM,SAAS,mBAAmB;AAClC,QAAM,WAAW,oCAAoC;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT,kBAAkB,YAAY;AAAA,UAC5B,YAAY,MAAM,wBAAwB,EAAE;AAAA,QAC9C,CAAC;AAAA,QACD,gBAAgB,oBACd,OAAO,UAAU,aAAa,uCAChC;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACP,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA,cAAM,QAAQ,oBAAoB,QACjC,MAAM,2BAA2B,MAAM,OAAO,UAAU,OACvD,WACC;AAAA,UAAC;AAAA;AAAA,YACC,mBAAmB,MAAM,qBAAqB;AAAA;AAAA,QAChD,IAEA,oBAAC,uBAAoB,YAAY,OAAO,UAAU,YAAY;AAAA,QAEjE,CAAC,OAAO,UAAU,MAAM,UACvB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,WAAW,UAAU;AAAA,gBACnB,UAAU,CAAC,YAAY,OAAO,iBAAiB;AAAA,cACjD,CAAC;AAAA,YACH;AAAA,YAEC;AAAA;AAAA,QACH,IAEA;AAAA;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAGC,qBAGA,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type ReactElement,\n  type Ref,\n} from 'react';\n\nimport type { DataTestId } from '../../../core/types/data-props.js';\nimport type { StylingProps } from '../../../core/types/styling-props.js';\nimport type { WithChildren } from '../../../core/types/with-children.js';\nimport { DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT } from '../constants.js';\nimport * as alignmentStyles from './Alignment.sty.js';\nimport * as cellStyles from './DataTableCell.sty.js';\nimport * as defaultCellStyles from './DataTableDefaultCell.sty.js';\nimport {\n  useDataTable,\n  useDataTableColumn,\n  useDataTableIsHeaderContextProvider,\n} from '../contexts/DataTableContext.js';\nimport {\n  SubRowsCellExpander,\n  SubRowsHeaderExpander,\n} from '../features/SubRows/components/SubRowExpanders.js';\n\n/**\n * Props for the DataTable.DefaultCell\n * @public\n */\nexport type DataTableDefaultCellProps = WithChildren &\n  StylingProps &\n  DataTestId &\n  HTMLAttributes<HTMLDivElement>;\n\n/**\n * DataTable custom Cell renderer wrapper. This component automatically deals\n * with applying the correct cell styles.\n * @public\n */\nexport const DataTableDefaultCell = forwardRef(function (\n  props: DataTableDefaultCellProps,\n  forwardedRef: Ref<HTMLDivElement>,\n): ReactElement | null {\n  const {\n    children,\n    style: consumerStyle,\n    className: consumerClassName,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = props;\n\n  const table = useDataTable();\n  const column = useDataTableColumn();\n  const isHeader = useDataTableIsHeaderContextProvider();\n\n  return (\n    <div\n      ref={forwardedRef}\n      className={clsx(\n        defaultCellStyles.defaultCell({\n          rowDensity: table.atoms.visualVariantConfig?.get().rowDensity,\n        }),\n        alignmentStyles.horizontalAlignment[\n          column.columnDef.alignment ?? DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT\n        ],\n        consumerClassName,\n      )}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      {...remainingProps}\n    >\n      {table.options.enableExpanding === true &&\n        table.getSubRowIndicatorColumnId() === column.columnDef.id &&\n        (isHeader ? (\n          <SubRowsHeaderExpander\n            isAllRowsExpanded={table.getIsAllRowsExpanded()}\n          />\n        ) : (\n          <SubRowsCellExpander columnType={column.columnDef.columnType} />\n        ))}\n      {!column.columnDef.meta?.builtin ? (\n        <div\n          className={clsx(\n            cellStyles.innerCell({\n              lineWrap: !isHeader && column.getIsLineWrapped(),\n            }),\n          )}\n        >\n          {children}\n        </div>\n      ) : (\n        children\n      )}\n    </div>\n  );\n});\n\n(\n  DataTableDefaultCell as typeof DataTableDefaultCell & {\n    displayName: string;\n  }\n).displayName = 'DataTable.DefaultCell';\n"],
+  "mappings": "AAwDI,SAkBM,KAlBN;AAxDJ,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,OAIK;AAKP,SAAS,+CAA+C;AACxD,YAAY,qBAAqB;AACjC,YAAY,gBAAgB;AAC5B,YAAY,uBAAuB;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAgBA,MAAM,uBAAuB,WAAW,SAC7C,OACA,cACqB;AACrB,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,WAAW;AAAA,IACX,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,QAAQ,aAAa;AAC3B,QAAM,SAAS,mBAAmB;AAClC,QAAM,WAAW,oCAAoC;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT,kBAAkB,YAAY;AAAA,UAC5B,YAAY,MAAM,MAAM,qBAAqB,IAAI,EAAE;AAAA,QACrD,CAAC;AAAA,QACD,gBAAgB,oBACd,OAAO,UAAU,aAAa,uCAChC;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACP,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA,cAAM,QAAQ,oBAAoB,QACjC,MAAM,2BAA2B,MAAM,OAAO,UAAU,OACvD,WACC;AAAA,UAAC;AAAA;AAAA,YACC,mBAAmB,MAAM,qBAAqB;AAAA;AAAA,QAChD,IAEA,oBAAC,uBAAoB,YAAY,OAAO,UAAU,YAAY;AAAA,QAEjE,CAAC,OAAO,UAAU,MAAM,UACvB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,WAAW,UAAU;AAAA,gBACnB,UAAU,CAAC,YAAY,OAAO,iBAAiB;AAAA,cACjD,CAAC;AAAA,YACH;AAAA,YAEC;AAAA;AAAA,QACH,IAEA;AAAA;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAGC,qBAGA,cAAc;",
   "names": []
 }

package/esm/tables/DataTable/components/DataTableDefaultCell.sty.js

@@ -6,13 +6,14 @@ import "../features/RowOrder/RowOrder.css";
 import "../features/RowDetails/RowDetails.css";
 import "../features/RowInteractivity/RowInteractivity.css";
 import "./DataTableRow.css";
+import "../features/ColumnSizing/ColumnSizing.css";
 import "../features/Thresholds/Thresholds.css";
 import "./DataTableCell.css";
 import "../features/ColumnOrder/ColumnOrder.css";
 import "./DataTableHeaderCell.css";
 import "./DataTableDefaultCell.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var defaultCell = _7a468({ defaultClassName: "_14k72810-3-5-2", variantClassNames: { lineWrap: { true: "_14k72811-3-5-2", false: "_14k72812-3-5-2" }, rowDensity: { "default": "_14k72813-3-5-2", condensed: "_14k72814-3-5-2", comfortable: "_14k72815-3-5-2" } }, defaultVariants: { rowDensity: "default" }, compoundVariants: [] });
+var defaultCell = _7a468({ defaultClassName: "_14k72810-3-7-0", variantClassNames: { lineWrap: { true: "_14k72811-3-7-0", false: "_14k72812-3-7-0" }, rowDensity: { "default": "_14k72813-3-7-0", condensed: "_14k72814-3-7-0", comfortable: "_14k72815-3-7-0" } }, defaultVariants: { rowDensity: "default" }, compoundVariants: [] });
 export {
   defaultCell
 };

package/esm/tables/DataTable/components/DataTableDefaultCell.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableDefaultCell.css.ts"],
-  "sourcesContent": ["import './Alignment.css';\nimport '../DataTable.css';\nimport '../../../core/components/app-root/AppRoot.css';\nimport './DataTableVirtualizationContainer.css';\nimport '../features/RowOrder/RowOrder.css';\nimport '../features/RowDetails/RowDetails.css';\nimport '../features/RowInteractivity/RowInteractivity.css';\nimport './DataTableRow.css';\nimport '../features/Thresholds/Thresholds.css';\nimport './DataTableCell.css';\nimport '../features/ColumnOrder/ColumnOrder.css';\nimport './DataTableHeaderCell.css';\nimport './DataTableDefaultCell.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var defaultCell = _7a468({defaultClassName:'_14k72810-3-5-2',variantClassNames:{lineWrap:{true:'_14k72811-3-5-2',false:'_14k72812-3-5-2'},rowDensity:{'default':'_14k72813-3-5-2',condensed:'_14k72814-3-5-2',comfortable:'_14k72815-3-5-2'}},defaultVariants:{rowDensity:'default'},compoundVariants:[]});"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,cAAc,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,YAAW,EAAC,WAAU,mBAAkB,WAAU,mBAAkB,aAAY,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,YAAW,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
+  "sourcesContent": ["import './Alignment.css';\nimport '../DataTable.css';\nimport '../../../core/components/app-root/AppRoot.css';\nimport './DataTableVirtualizationContainer.css';\nimport '../features/RowOrder/RowOrder.css';\nimport '../features/RowDetails/RowDetails.css';\nimport '../features/RowInteractivity/RowInteractivity.css';\nimport './DataTableRow.css';\nimport '../features/ColumnSizing/ColumnSizing.css';\nimport '../features/Thresholds/Thresholds.css';\nimport './DataTableCell.css';\nimport '../features/ColumnOrder/ColumnOrder.css';\nimport './DataTableHeaderCell.css';\nimport './DataTableDefaultCell.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var defaultCell = _7a468({defaultClassName:'_14k72810-3-7-0',variantClassNames:{lineWrap:{true:'_14k72811-3-7-0',false:'_14k72812-3-7-0'},rowDensity:{'default':'_14k72813-3-7-0',condensed:'_14k72814-3-7-0',comfortable:'_14k72815-3-7-0'}},defaultVariants:{rowDensity:'default'},compoundVariants:[]});"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,cAAc,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,YAAW,EAAC,WAAU,mBAAkB,WAAU,mBAAkB,aAAY,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,YAAW,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/tables/DataTable/components/DataTableEmptyState.css

@@ -1,11 +1,30 @@
-._lvf8p50-3-5-2 {
+._lvf8p50-3-7-0 {
+  position: sticky;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+._lvf8p51-3-7-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   display: flex;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
   padding: var(--dt-spacings-size-0, 0) var(--dt-spacings-size-12, 12px);
 }
-._lvf8p51-3-5-2 {
+._lvf8p52-3-7-0 {
   min-width: 200px;
+}
+._lvf8p53-3-7-0 {
+  padding-top: var(--dt-spacings-size-8, 8px);
+  padding-bottom: var(--dt-spacings-size-8, 8px);
+}
+._lvf8p54-3-7-0 {
+  padding-top: var(--dt-spacings-size-4, 4px);
+  padding-bottom: var(--dt-spacings-size-4, 4px);
+}
+._lvf8p55-3-7-0 {
+  padding-top: var(--dt-spacings-size-12, 12px);
+  padding-bottom: var(--dt-spacings-size-12, 12px);
 }