npm - @dynatrace/strato-components - Versions diffs - 3.6.0 → 3.7.0 - Mend

@dynatrace/strato-components 3.6.0 → 3.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3132) hide show

package/tables/DataTable/components/DataTableHeaderCell.js CHANGED Viewed

@@ -33,31 +33,31 @@ __export(DataTableHeaderCell_exports, {
 module.exports = __toCommonJS(DataTableHeaderCell_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_react_table = require("@tanstack/react-table");
 var import_dynamic = require("@vanilla-extract/dynamic");
 var import_clsx = __toESM(require("clsx"));
 var import_react2 = require("react");
 var import_react_dom = require("react-dom");
 var import_react_intl = require("react-intl");
 var alignmentStyles = __toESM(require("./Alignment.sty.js"));
-var import_DataTablePinningShadowHeaderCells = require("./ColumnPinning/DataTablePinningShadowHeaderCells.js");
-var headerCellStyles = __toESM(require("./DataTableHeaderCell.sty.js"));
 var import_useMergeRefs = require("../../../core/hooks/useMergeRefs.js");
 var import_Tooltip = require("../../../overlays/tooltip/Tooltip.js");
+var import_Text = require("../../../typography/text/Text.js");
 var import_TextEllipsis = require("../../../typography/text-ellipsis/TextEllipsis.js");
 var import_data_table_border_width = require("../../utils/data-table-border-width.js");
 var import_get_column_label = require("../../utils/get-column-label.js");
 var import_constants = require("../constants.js");
 var import_DataTableContext = require("../contexts/DataTableContext.js");
 var tableStyles = __toESM(require("../DataTable.sty.js"));
+var import_DataTablePinningShadowHeaderCells = require("./ColumnPinning/DataTablePinningShadowHeaderCells.js");
 var columnOrderStyles = __toESM(require("../features/ColumnOrder/ColumnOrder.sty.js"));
 var import_SortingArrowIndicators = require("../features/Sorting/SortingArrowIndicators.js");
-var import_SubRowExpanders = require("../features/SubRows/SubRowExpanders.js");
-var import_SubRows = require("../features/SubRows/SubRows.js");
+var import_SubRowExpanders = require("../features/SubRows/components/SubRowExpanders.js");
+var import_SubRowsHeaderWidthCorrection = require("../features/SubRows/components/SubRowsHeaderWidthCorrection.js");
 var import_InlineUserActionsMenu = require("../features/UserActions/InlineUserActionsMenu.js");
 var import_useHeaderCellInteractions = require("../hooks/useHeaderCellInteractions.js");
 var import_useHeaderDragAndDrop = require("../hooks/useHeaderDragAndDrop.js");
 var import_messages = require("../messages.js");
+var headerCellStyles = __toESM(require("./DataTableHeaderCell.sty.js"));
 const HeaderTextEllipsis = (0, import_react2.memo)(
   ({
     children,
@@ -159,7 +159,6 @@ function getLeftAdditionalElevation(isPinnedLeft, canResize, columnId, leftPinne
 }
 function DataTableHeaderCell(props) {
   const {
-    header,
     headers,
     headerGroupId,
     rowIndex,
@@ -168,10 +167,9 @@ function DataTableHeaderCell(props) {
   } = props;
   const intl = (0, import_react_intl.useIntl)();
   const table = (0, import_DataTableContext.useDataTable)();
-  const { rowDensity, verticalDividers } = table.getVisualVariantOptions();
-  const columnDragAndDropMode = header.getColumnDragAndDropMode();
-  const gridPosition = header.getGridPosition(headers);
-  const column = header.column;
+  const columnDragAndDropMode = props.header.getColumnDragAndDropMode();
+  const gridPosition = props.header.getGridPosition(headers);
+  const column = props.header.column;
   const { id: columnId, parent, columns: childColumns, columnDef } = column;
   const columnIndex = rowIndex === 0 ? gridPosition.gridColumnStart - 1 : virtualColumnIndex;
   const canSort = column.getCanSort();
@@ -181,15 +179,16 @@ function DataTableHeaderCell(props) {
     textOverflowRef.current = ellipsized;
   }, []);
   const { setNodeRef, isDragging, portalRef, dragAndDropProps } = (0, import_useHeaderDragAndDrop.useHeaderCellDragAndDrop)({
-    headerId: header.id,
+    headerId: props.header.id,
     column,
     columnIndex,
     columnDragAndDropMode
   });
   const divRef = (0, import_react2.useRef)(null);
   const mergedRef = (0, import_useMergeRefs.useMergeRefs)([setNodeRef, divRef]);
-  const tableState = table.getState();
-  const isActiveFloatingMenu = tableState.floatingMenuInfo?.rowId === null && tableState.floatingMenuInfo?.headerId === header.id;
+  const floatingMenuInfo = table.atoms.floatingMenuInfo?.get();
+  const isActiveFloatingMenu = floatingMenuInfo?.rowId === null && floatingMenuInfo?.headerId === props.header.id;
+  const visualVariantConfig = table.atoms.visualVariantConfig?.get();
   const {
     handleCellMouseEnter,
     handleCellMouseLeave,
@@ -200,14 +199,14 @@ function DataTableHeaderCell(props) {
     canSort,
     canColumnActions,
     isActiveFloatingMenu,
-    rowDensity,
-    getToggleSortingHandler: column.getToggleSortingHandler
+    rowDensity: visualVariantConfig?.rowDensity,
+    toggleSortingHandler: column.getToggleSortingHandler()
   });
-  if (header.isPlaceholder) {
+  if (props.header.isPlaceholder) {
     return null;
   }
   const headerGroupsLength = table.getHeaderGroups().length;
-  const activeSortEntries = tableState.sorting?.filter((sort) => {
+  const activeSortEntries = table.atoms.sorting?.get().filter((sort) => {
     const col = table.getColumn(sort.id);
     return col?.getCanSort() ?? false;
   }) ?? [];
@@ -220,13 +219,30 @@ function DataTableHeaderCell(props) {
     (sort) => sort.id === column.id
   );
   const multiSortPriority = sortedColumnsCount > 1 && columnSortIndex >= 0 ? columnSortIndex + 1 : void 0;
-  const isColumnDragActive = tableState.draggedHeaderColumn !== void 0;
+  const draggedHeaderColumn = table.atoms.draggedHeaderColumn?.get() ?? null;
+  const isColumnDragActive = draggedHeaderColumn !== null;
   const isRightAligned = columnDef.alignment === "right";
-  const renderVerticalDividers = verticalDividers || table.getHeaderGroups().length > 1 || table.options.enableColumnResizing && (canResize || // when resizing is enabled we need to render the vertical dividers for the spacer column as well
+  const renderVerticalDividers = visualVariantConfig?.verticalDividers || table.getHeaderGroups().length > 1 || table.options.enableColumnResizing && (canResize || // when resizing is enabled we need to render the vertical dividers for the spacer column as well
   column.id === import_constants.DATA_TABLE_SPACER_COLUMN_ID);
   const hasCustomHeaderRenderer = columnDef.meta?.hasCustomHeaderRenderer;
-  const children = hasCustomHeaderRenderer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DataTableContext.DataTableColumnContextProvider, { value: header.column, children: (0, import_react_table.flexRender)(columnDef.header, header.getContext()) }) : (0, import_react_table.flexRender)(columnDef.header, header.getContext());
-  const isStringHeader = typeof children === "string";
+  const children = hasCustomHeaderRenderer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_DataTableContext.DataTableColumnContextProvider,
+    {
+      value: props.header.column,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        table.FlexRender,
+        {
+          header: props.header
+        }
+      )
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    table.FlexRender,
+    {
+      header: props.header
+    }
+  );
+  const hasDefaultHeaderRenderer = typeof props.header.column.columnDef.header === "string" || props.header.column.columnDef.header === void 0 && props.header.column.columnDef.id === void 0;
   const role = columnDef.meta?.spacer === true ? "presentation" : "columnheader";
   const columnLabel = (0, import_get_column_label.getColumnLabel)(column);
   const nextSortingOrder = column.getNextSortingOrder();
@@ -236,7 +252,7 @@ function DataTableHeaderCell(props) {
     nextSortingOrder,
     canSort,
     columnDragAndDropMode,
-    isCustomHeader: !isStringHeader,
+    isCustomHeader: !hasDefaultHeaderRenderer,
     role
   });
   const ariaSortDescription = getHeaderAriaSortDescription({
@@ -250,16 +266,16 @@ function DataTableHeaderCell(props) {
   const subRowsWidthCorrection = (
     // only render the subrow width correction in the subrow indicator column
     enableExpanding === true && isSubRowIndicatorColumn ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_SubRows.SubRowsHeaderWidthCorrection,
+      import_SubRowsHeaderWidthCorrection.SubRowsHeaderWidthCorrection,
       {
         subRowOpenDepth: table.getSubRowOpenDepth()
       }
     ) : null
   );
-  const pinningPosition = header.getIsPinned();
+  const pinningPosition = props.header.getIsPinned();
   const isPinnedLeft = pinningPosition === "left";
   const isPinnedRight = pinningPosition === "right";
-  const leftPinnedPosition = isPinnedLeft ? header.getLeftPinnedPosition() : void 0;
+  const leftPinnedPosition = isPinnedLeft ? props.header.getLeftPinnedPosition() : void 0;
   const leftPinnedPositionPx = leftPinnedPosition === void 0 ? void 0 : `${leftPinnedPosition}px`;
   const leftAdditionalElevation = getLeftAdditionalElevation(
     isPinnedLeft,
@@ -267,13 +283,13 @@ function DataTableHeaderCell(props) {
     columnId,
     table.getLeftVisibleLeafColumns()
   );
-  const rightPinnedPosition = isPinnedRight ? header.getRightPinnedPosition() : void 0;
+  const rightPinnedPosition = isPinnedRight ? props.header.getRightPinnedPosition() : void 0;
   const rightPinnedPositionPx = rightPinnedPosition === void 0 ? void 0 : `${rightPinnedPosition}px`;
   const hasChildren = childColumns.length > 0;
   const isEdgeColumnInGroup = parent?.getCenterVisibleLeafColumns().at(-1) === column || parent?.getLeftVisibleLeafColumns().at(-1) === column || parent?.getRightVisibleLeafColumns().at(0) === column;
-  const isLastVisibleLeftPinnedHeader = isPinnedLeft ? header.getIsLastVisibleLeftPinnedHeader() : false;
-  const isFirstVisibleRightPinnedHeader = isPinnedRight ? header.getIsFirstVisibleRightPinnedHeader() : false;
-  const isFirstVisibleUnpinnedHeader = pinningPosition === false ? header.getIsFirstVisibleUnpinnedHeader() : false;
+  const isLastVisibleLeftPinnedHeader = isPinnedLeft ? props.header.getIsLastVisibleLeftPinnedHeader() : false;
+  const isFirstVisibleRightPinnedHeader = isPinnedRight ? props.header.getIsFirstVisibleRightPinnedHeader() : false;
+  const isFirstVisibleUnpinnedHeader = pinningPosition === false ? props.header.getIsFirstVisibleUnpinnedHeader() : false;
   const isLastUnpinnedColumnWithoutSpacer = columnId === table.getCenterVisibleLeafColumns().at(-2)?.id;
   const edgeAdjustedGridPosition = {
     gridColumnStart: gridPosition.gridColumnStart,
@@ -302,7 +318,7 @@ function DataTableHeaderCell(props) {
       key: `Header-${columnId}`,
       ref: mergedRef,
       role,
-      "data-headerid": header?.id,
+      "data-headerid": props.header?.id,
       "data-header-row": rowIndex,
       "data-column": columnIndex,
       "data-columnid": columnId,
@@ -311,10 +327,10 @@ function DataTableHeaderCell(props) {
       "data-dt-properties": interactionDtProperties,
       className: (0, import_clsx.default)(
         headerCellStyles.headerCell({
-          rowDensity: hasCustomHeaderRenderer ? "customHeaderRenderer" : rowDensity,
+          rowDensity: hasCustomHeaderRenderer ? "customHeaderRenderer" : visualVariantConfig?.rowDensity,
           pinnedColumn: pinningPosition,
           verticalDividers: renderVerticalDividers,
-          isDragAndDropDisabled: header.getIsDragAndDropDisabled()
+          isDragAndDropDisabled: props.header.getIsDragAndDropDisabled()
         }),
         alignmentStyles.horizontalAlignment[columnDef.alignment ?? import_constants.DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT],
         alignmentStyles.verticalAlignment[table.getHeaderVerticalAlignment()],
@@ -332,14 +348,14 @@ function DataTableHeaderCell(props) {
           [headerCellStyles.isMultiSortedHeader]: multiSortPriority !== void 0,
           [tableStyles.prefixColumn]: columnDef.meta?.builtinPlacement === "prefix",
           [headerCellStyles.headerCellActiveInteraction]: isActiveFloatingMenu,
-          [headerCellStyles.customHeaderDensity[rowDensity]]: hasCustomHeaderRenderer,
+          [headerCellStyles.customHeaderDensity[visualVariantConfig?.rowDensity]]: hasCustomHeaderRenderer,
           [headerCellStyles.subRowIndicatorColumn]: isSubRowIndicatorColumn,
           // add grab cursor styling only if column drag and drop is enabled but sorting is not
-          [columnOrderStyles.headerDragAndDrop.enabled]: !isDragging && columnDragAndDropMode !== "none" && !header.getCanSortByHeaderClick(),
-          [columnOrderStyles.headerDragAndDrop.inactive]: tableState.draggedHeaderColumn !== void 0
+          [columnOrderStyles.headerDragAndDrop.enabled]: !isDragging && columnDragAndDropMode !== "none" && !props.header.getCanSortByHeaderClick(),
+          [columnOrderStyles.headerDragAndDrop.inactive]: draggedHeaderColumn !== null
         }
       ),
-      "aria-sort": header.getAriaSortAttribute(),
+      "aria-sort": props.header.getAriaSortAttribute(),
       "aria-description": ariaSortDescription,
       "data-sort-desc-first": columnDef.sortDescFirst ?? false,
       "aria-label": ariaLabel,
@@ -357,28 +373,34 @@ function DataTableHeaderCell(props) {
     },
     renderSubRowHeaderExpander(),
     isRightAligned && subRowsWidthCorrection,
-    isStringHeader ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeaderTextEllipsis, { onTextOverflow: handleTextOverflow, children }) : children,
+    hasDefaultHeaderRenderer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeaderTextEllipsis, { onTextOverflow: handleTextOverflow, children: props.header.column.columnDef.header }) : children,
     canSort && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_SortingArrowIndicators.SortingArrowIndicators,
       {
         isSorted,
         nextSortingOrder,
         multiSortPriority,
-        rowDensity
+        rowDensity: visualVariantConfig?.rowDensity
       }
     ),
-    canColumnActions && !isColumnDragActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DataTableContext.DataTableHeaderContextProvider, { value: header, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_InlineUserActionsMenu.InlineUserActionsMenu,
+    canColumnActions && !isColumnDragActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_DataTableContext.DataTableHeaderContextProvider,
       {
-        headerGroupOrRowId: headerGroupId,
-        columnId,
-        type: "header",
-        "aria-label": intl.formatMessage(import_messages.dataTableMessages.columnActionLabel),
-        "data-header-row": rowIndex,
-        "data-column": columnIndex,
-        onClose: handleCellActionsClose
+        value: props.header,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_InlineUserActionsMenu.InlineUserActionsMenu,
+          {
+            headerGroupOrRowId: headerGroupId,
+            columnId,
+            type: "header",
+            "aria-label": intl.formatMessage(import_messages.dataTableMessages.columnActionLabel),
+            "data-header-row": rowIndex,
+            "data-column": columnIndex,
+            onClose: handleCellActionsClose
+          }
+        )
       }
-    ) }),
+    ),
     !isRightAligned && subRowsWidthCorrection,
     canResize && !isColumnDragActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
@@ -406,10 +428,10 @@ function DataTableHeaderCell(props) {
             height: table.getTotalHeaderHeight() - (0, import_data_table_border_width.getDataTableBorderWidth)()
           }
         },
-        onMouseDown: header.handleResize,
-        onTouchStart: header.handleResize,
-        onKeyUp: header.handleKeyboardResize,
-        onDoubleClick: header.handleResizeExpand,
+        onMouseDown: props.header.getResizeHandler(),
+        onTouchStart: props.header.getResizeHandler(),
+        onKeyUp: props.header.getKeyboardResizeHandler(),
+        onDoubleClick: props.header.getResizeExpandHandler(),
         "data-dt-name": "ColumnHeaderResize"
       },
       `Header-${columnId}-resize-handler`
@@ -421,8 +443,9 @@ function DataTableHeaderCell(props) {
       portalRef.current || document.body
     );
   }
-  if (isStringHeader) {
-    headerContent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.Tooltip, { disabled: !textOverflowRef.current, text: children, children: headerContent });
+  if (hasDefaultHeaderRenderer) {
+    const tooltipContent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { textStyle: "small", as: "p", children });
+    headerContent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.Tooltip, { disabled: !textOverflowRef.current, text: tooltipContent, children: headerContent });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     headerContent,

package/tables/DataTable/components/DataTableHeaderCell.sty.d.ts CHANGED Viewed

@@ -1,7 +1,4 @@
-export declare const firstHeaderRow: string;
-export declare const lastHeaderRow: string;
-export declare const parentHeader: string;
-export declare const childHeader: string;
+import { type StyleRule } from '@vanilla-extract/css';
 export declare const hovered: string;
 export declare const narrow: string;
 export declare const sortableHeader: string;
@@ -9,6 +6,10 @@ export declare const isSortedHeader: string;
 export declare const isMultiSortedHeader: string;
 export declare const subRowIndicatorColumn: string;
 export declare const customHeaderDensity: Record<"default" | "condensed" | "comfortable", string>;
+export declare const firstHeaderRow: string;
+export declare const lastHeaderRow: string;
+export declare const parentHeader: string;
+export declare const childHeader: string;
 export declare const firstColumn: string;
 export declare const lastLeftPinnedColumn: string;
 export declare const firstUnpinnedColumn: string;
@@ -68,13 +69,13 @@ export declare const headerCell: import("@vanilla-extract/recipes").RuntimeFn<{
             left: `var(--resizing-leftPosition, var(--${string}))`;
             selectors: {
                 [x: string]: {
+                    right: number;
                     content: "\"\"";
                     display: "block";
                     position: "absolute";
                     width: string;
-                    right: number;
-                    top: number;
-                    bottom: number;
+                    top: 0;
+                    bottom: 0;
                     backgroundColor: string;
                     maxWidth: "100%";
                 };
@@ -86,13 +87,13 @@ export declare const headerCell: import("@vanilla-extract/recipes").RuntimeFn<{
             right: `var(--resizing-rightPosition, var(--${string}))`;
             selectors: {
                 [x: string]: {
+                    left: number;
                     content: "\"\"";
                     display: "block";
                     position: "absolute";
                     width: string;
-                    left: number;
-                    top: number;
-                    bottom: number;
+                    top: 0;
+                    bottom: 0;
                     backgroundColor: string;
                     maxWidth: "100%";
                 };
@@ -107,65 +108,56 @@ export declare const headerCell: import("@vanilla-extract/recipes").RuntimeFn<{
             paddingLeft: string;
             selectors: {
                 [x: string]: {
-                    paddingRight: number;
+                    paddingRight: `calc(${number}px + 22px)`;
                     paddingLeft?: undefined;
                 } | {
-                    paddingLeft: number;
+                    paddingLeft: `calc(${number}px + 22px)`;
                     paddingRight?: undefined;
                 };
             };
         };
         default: {
-            paddingTop: string;
-            paddingRight: string;
-            paddingBottom: string;
-            paddingLeft: string;
+            paddingTop: number;
+            paddingRight: number;
+            paddingBottom: number;
+            paddingLeft: number;
             selectors: {
                 [x: string]: {
                     paddingLeft: string;
                     paddingRight?: undefined;
                 } | {
-                    paddingRight: number;
+                    paddingRight: `calc(${number}px + 22px)`;
                     paddingLeft?: undefined;
-                } | {
-                    paddingLeft: number;
-                    paddingRight?: undefined;
                 };
             };
         };
         condensed: {
-            paddingTop: string;
-            paddingRight: string;
-            paddingBottom: string;
-            paddingLeft: string;
+            paddingTop: number;
+            paddingRight: number;
+            paddingBottom: number;
+            paddingLeft: number;
             selectors: {
                 [x: string]: {
                     paddingLeft: `calc(${string} + ${string})`;
                     paddingRight?: undefined;
                 } | {
-                    paddingRight: number;
+                    paddingRight: `calc(${number}px + 22px)`;
                     paddingLeft?: undefined;
-                } | {
-                    paddingLeft: number;
-                    paddingRight?: undefined;
                 };
             };
         };
         comfortable: {
-            paddingTop: string;
-            paddingRight: string;
-            paddingBottom: string;
-            paddingLeft: string;
+            paddingTop: number;
+            paddingRight: number;
+            paddingBottom: number;
+            paddingLeft: number;
             selectors: {
                 [x: string]: {
                     paddingLeft: string;
                     paddingRight?: undefined;
                 } | {
-                    paddingRight: number;
+                    paddingRight: `calc(${number}px + 22px)`;
                     paddingLeft?: undefined;
-                } | {
-                    paddingLeft: number;
-                    paddingRight?: undefined;
                 };
             };
         };
@@ -211,7 +203,7 @@ export declare const headerCell: import("@vanilla-extract/recipes").RuntimeFn<{
                     borderColor?: undefined;
                 } | {
                     borderBottomWidth: string;
-                    borderBottomStyle: any;
+                    borderBottomStyle: StyleRule["borderBottomStyle"];
                     borderColor: string;
                     content?: undefined;
                     display?: undefined;

package/tables/DataTable/components/DataTableHeaderCell.sty.js CHANGED Viewed

@@ -49,26 +49,26 @@ var import_ColumnOrder_css_ts_vanilla = require("../features/ColumnOrder/ColumnO
 var import_Thresholds_css_ts_vanilla = require("../features/Thresholds/Thresholds.css");
 var import_DataTableHeaderCell_css_ts_vanilla = require("./DataTableHeaderCell.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var childHeader = "_11pvd3z3-3-6-0";
-var columnSizingHandle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_11pvd3zl-3-6-0", variantClassNames: { active: { true: "_11pvd3zm-3-6-0", false: "_11pvd3zn-3-6-0" }, last: { true: "_11pvd3zo-3-6-0", false: "_11pvd3zp-3-6-0" }, pinnedColumn: { false: "_11pvd3zq-3-6-0", left: "_11pvd3zr-3-6-0", right: "_11pvd3zs-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
-var customHeaderDensity = { "default": "_11pvd3za-3-6-0", condensed: "_11pvd3zb-3-6-0", comfortable: "_11pvd3zc-3-6-0" };
-var firstColumn = "_11pvd3zd-3-6-0";
-var firstHeaderRow = "_11pvd3z0-3-6-0";
-var firstRightPinnedColumn = "_11pvd3zg-3-6-0";
-var firstUnpinnedColumn = "_11pvd3zf-3-6-0";
-var headerCell = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_11pvd3zt-3-6-0", variantClassNames: { pinnedColumn: { false: "_11pvd3zu-3-6-0", left: "_11pvd3zv-3-6-0", right: "_11pvd3zw-3-6-0" }, rowDensity: { customHeaderRenderer: "_11pvd3zx-3-6-0", "default": "_11pvd3zy-3-6-0", condensed: "_11pvd3zz-3-6-0", comfortable: "_11pvd3z10-3-6-0" }, verticalDividers: { true: "_11pvd3z11-3-6-0", false: "_11pvd3z12-3-6-0" }, isDragAndDropDisabled: { true: "_11pvd3z13-3-6-0", false: "_11pvd3z14-3-6-0" } }, defaultVariants: { rowDensity: "default", verticalDividers: false }, compoundVariants: [] });
-var headerCellActiveInteraction = "_11pvd3z16-3-6-0";
-var headerCellEllipsis = "_11pvd3z15-3-6-0";
-var headerWidthVar = "var(--_11pvd3zj-3-6-0)";
-var hovered = "_11pvd3z4-3-6-0";
-var isMultiSortedHeader = "_11pvd3z8-3-6-0";
-var isSortedHeader = "_11pvd3z7-3-6-0";
-var lastHeaderRow = "_11pvd3z1-3-6-0";
-var lastLeftPinnedColumn = "_11pvd3ze-3-6-0";
-var leftAdditionalElevationVar = "var(--_11pvd3zk-3-6-0)";
-var leftPositionVar = "var(--_11pvd3zh-3-6-0)";
-var narrow = "_11pvd3z5-3-6-0";
-var parentHeader = "_11pvd3z2-3-6-0";
-var rightPositionVar = "var(--_11pvd3zi-3-6-0)";
-var sortableHeader = "_11pvd3z6-3-6-0";
-var subRowIndicatorColumn = "_11pvd3z9-3-6-0";
+var childHeader = "_11pvd3zc-3-7-0";
+var columnSizingHandle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_11pvd3zl-3-7-0", variantClassNames: { active: { true: "_11pvd3zm-3-7-0", false: "_11pvd3zn-3-7-0" }, last: { true: "_11pvd3zo-3-7-0", false: "_11pvd3zp-3-7-0" }, pinnedColumn: { false: "_11pvd3zq-3-7-0", left: "_11pvd3zr-3-7-0", right: "_11pvd3zs-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
+var customHeaderDensity = { "default": "_11pvd3z6-3-7-0", condensed: "_11pvd3z7-3-7-0", comfortable: "_11pvd3z8-3-7-0" };
+var firstColumn = "_11pvd3zd-3-7-0";
+var firstHeaderRow = "_11pvd3z9-3-7-0";
+var firstRightPinnedColumn = "_11pvd3zg-3-7-0";
+var firstUnpinnedColumn = "_11pvd3zf-3-7-0";
+var headerCell = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_11pvd3zt-3-7-0", variantClassNames: { pinnedColumn: { false: "_11pvd3zu-3-7-0", left: "_11pvd3zv-3-7-0", right: "_11pvd3zw-3-7-0" }, rowDensity: { customHeaderRenderer: "_11pvd3zx-3-7-0", "default": "_11pvd3zy-3-7-0", condensed: "_11pvd3zz-3-7-0", comfortable: "_11pvd3z10-3-7-0" }, verticalDividers: { true: "_11pvd3z11-3-7-0", false: "_11pvd3z12-3-7-0" }, isDragAndDropDisabled: { true: "_11pvd3z13-3-7-0", false: "_11pvd3z14-3-7-0" } }, defaultVariants: { rowDensity: "default", verticalDividers: false }, compoundVariants: [] });
+var headerCellActiveInteraction = "_11pvd3z16-3-7-0";
+var headerCellEllipsis = "_11pvd3z15-3-7-0";
+var headerWidthVar = "var(--_11pvd3zj-3-7-0)";
+var hovered = "_11pvd3z0-3-7-0";
+var isMultiSortedHeader = "_11pvd3z4-3-7-0";
+var isSortedHeader = "_11pvd3z3-3-7-0";
+var lastHeaderRow = "_11pvd3za-3-7-0";
+var lastLeftPinnedColumn = "_11pvd3ze-3-7-0";
+var leftAdditionalElevationVar = "var(--_11pvd3zk-3-7-0)";
+var leftPositionVar = "var(--_11pvd3zh-3-7-0)";
+var narrow = "_11pvd3z1-3-7-0";
+var parentHeader = "_11pvd3zb-3-7-0";
+var rightPositionVar = "var(--_11pvd3zi-3-7-0)";
+var sortableHeader = "_11pvd3z2-3-7-0";
+var subRowIndicatorColumn = "_11pvd3z5-3-7-0";

package/tables/DataTable/components/DataTableRow.css CHANGED Viewed

@@ -1,34 +1,34 @@
-._1y5fzv0-3-6-0 {
+._1y5fzv0-3-7-0 {
   display: grid;
   grid-template-columns: subgrid;
   position: relative;
   grid-template-rows: inherit;
 }
-._or8s40-3-6-0:not(:has([aria-expanded="true"][aria-controls])) ._1y5fzv0-3-6-0 {
+._or8s40-3-7-0:not(:has([aria-expanded="true"][aria-controls])) ._1y5fzv0-3-7-0 {
   border-bottom-width: 0;
 }
-._1y5fzv2-3-6-0 {
+._1y5fzv2-3-7-0 {
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._ytdpsw0-3-6-0 ._14sp6az6-3-6-0._1y5fzv2-3-6-0,
-          ._ytdpswc-3-6-0 ._14sp6az6-3-6-0._1y5fzv2-3-6-0,
-          ._ytdpswe-3-6-0 ._14sp6az6-3-6-0._1y5fzv2-3-6-0,
-          ._2twyod0-3-6-0._1y5fzv2-3-6-0 {
+._ytdpsw0-3-7-0 ._14sp6az6-3-7-0._1y5fzv2-3-7-0,
+          ._ytdpswc-3-7-0 ._14sp6az6-3-7-0._1y5fzv2-3-7-0,
+          ._ytdpswe-3-7-0 ._14sp6az6-3-7-0._1y5fzv2-3-7-0,
+          ._2twyod0-3-7-0._1y5fzv2-3-7-0 {
   border-bottom-width: 0;
 }
-._1y5fzv3-3-6-0 {
+._1y5fzv3-3-7-0 {
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._ytdpsw0-3-6-0 ._14sp6az6-3-6-0._1y5fzv3-3-6-0,
-          ._2twyod0-3-6-0._1y5fzv3-3-6-0 {
+._ytdpsw0-3-7-0 ._14sp6az6-3-7-0._1y5fzv3-3-7-0,
+          ._2twyod0-3-7-0._1y5fzv3-3-7-0 {
   border-bottom-width: 0;
 }
-._1y5fzv6-3-6-0 {
+._1y5fzv6-3-7-0 {
   visibility: hidden;
 }
-._1y5fzv8-3-6-0:not(._15silbj3-3-6-0, ._15silbj4-3-6-0, ._15silbj0-3-6-0:hover) {
+._1y5fzv8-3-7-0:not(._15silbj3-3-7-0, ._15silbj4-3-7-0, ._15silbj0-3-7-0:hover) {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1y5fzv9-3-6-0:not(._15silbj3-3-6-0, ._15silbj4-3-6-0, ._15silbj0-3-6-0:hover) {
+._1y5fzv9-3-7-0:not(._15silbj3-3-7-0, ._15silbj4-3-7-0, ._15silbj0-3-7-0:hover) {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }

package/tables/DataTable/components/DataTableRow.d.ts CHANGED Viewed

@@ -1,12 +1,12 @@
+import type { Row, RowData, TableFeatures } from '@tanstack/react-table';
 import type { ScrollToOptions, VirtualItem } from '@tanstack/react-virtual';
 import { type JSX } from 'react';
 import { StylingProps } from '../../../core/types/styling-props.js';
-import type { Row } from '../hooks/useTable/types.js';
-interface DataTableRowProps<TData> extends StylingProps {
+interface DataTableRowProps extends StylingProps {
     /**
      * DataTable row object.
      */
-    row: Row<TData>;
+    row: Row<TableFeatures, RowData>;
     /**
      * The virtual item in the row virtualizer.
      */
@@ -51,8 +51,8 @@ interface DataTableRowProps<TData> extends StylingProps {
     scrollToIndex?: (index: number, options?: ScrollToOptions) => void;
 }
 /**
- * Wrapper around all cells in a row.
+ * Wrapper around all cells in a props.row.
  * @internal
  */
-export declare function DataTableRow<TData>(props: Readonly<DataTableRowProps<TData>>): JSX.Element;
+export declare function DataTableRow(props: Readonly<DataTableRowProps>): JSX.Element;
 export {};