@snack-uikit/table 0.35.2 → 0.35.3

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.35.3 (2025-04-15)
+
+
+### Bug Fixes
+
+* **PDS-1889:** fixed header align in table ([2b7e448](https://github.com/cloud-ru-tech/snack-uikit/commit/2b7e448df3254396b7cb04e78feba24a4cee9629))
+
+
+
+
+
 ## 0.35.2 (2025-04-10)
 
 

package/dist/cjs/helperComponents/Cells/HeaderCell/HeaderCell.js

@@ -68,7 +68,6 @@ function HeaderCell(_ref) {
     "data-no-padding": columnDef.noHeaderCellPadding || undefined,
     "data-no-offset": columnDef.noHeaderCellBorderOffset || undefined,
     "data-test-id": constants_1.TEST_IDS.headerCell,
-    "data-align": columnDef.headerAlign || undefined,
     "data-header-id": header.id,
     "data-resizing": isResizing || undefined,
     "data-pin-position": pinPosition || undefined,
@@ -87,6 +86,7 @@ function HeaderCell(_ref) {
     }, draggableProps, {
       children: (0, jsx_runtime_1.jsxs)("div", {
         className: styles_module_scss_1.default.tableHeaderCellMain,
+        "data-align": columnDef.headerAlign || undefined,
         children: [columnDef.header && (0, jsx_runtime_1.jsx)("div", {
           className: styles_module_scss_1.default.tableHeaderCellName,
           children: rowAutoHeight ? (0, react_table_1.flexRender)(columnDef.header, header.getContext()) : (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {

package/dist/cjs/helperComponents/Cells/HeaderCell/styles.module.css

@@ -93,9 +93,6 @@
      -moz-user-select:none;
           user-select:none;
 }
-.tableHeaderCell[data-align=right]{
-  justify-content:flex-end;
-}
 .tableHeaderCell[data-pin-position=right]:last-child{
   overflow:hidden;
 }
@@ -128,6 +125,9 @@
   box-sizing:border-box;
   min-width:0;
 }
+.tableHeaderCellMain[data-align=right]{
+  justify-content:flex-end;
+}
 
 .tableHeaderCellName{
   min-height:var(--size-table-head-name-layout, 24px);

package/dist/esm/helperComponents/Cells/HeaderCell/HeaderCell.js

@@ -36,10 +36,10 @@ export function HeaderCell({ header, pinPosition, className, rowAutoHeight, isDr
         }
         return Object.assign(Object.assign({}, attributes), listeners);
     }, [attributes, header.column.id, isDraggable, listeners]);
-    return (_jsxs(Cell, { style: style, onClick: sortingHandler, "data-sortable": isSortable || undefined, "data-draggable": isDraggable || undefined, "data-no-padding": columnDef.noHeaderCellPadding || undefined, "data-no-offset": columnDef.noHeaderCellBorderOffset || undefined, "data-test-id": TEST_IDS.headerCell, "data-align": columnDef.headerAlign || undefined, "data-header-id": header.id, "data-resizing": isResizing || undefined, "data-pin-position": pinPosition || undefined, "data-row-auto-height": rowAutoHeight || undefined, role: 'columnheader', className: cn(styles.tableHeaderCell, className, columnDef.headerClassName), ref: element => {
+    return (_jsxs(Cell, { style: style, onClick: sortingHandler, "data-sortable": isSortable || undefined, "data-draggable": isDraggable || undefined, "data-no-padding": columnDef.noHeaderCellPadding || undefined, "data-no-offset": columnDef.noHeaderCellBorderOffset || undefined, "data-test-id": TEST_IDS.headerCell, "data-header-id": header.id, "data-resizing": isResizing || undefined, "data-pin-position": pinPosition || undefined, "data-row-auto-height": rowAutoHeight || undefined, role: 'columnheader', className: cn(styles.tableHeaderCell, className, columnDef.headerClassName), ref: element => {
             if (isDraggable) {
                 setNodeRef(element);
             }
             return cellRef;
-        }, children: [_jsx("div", Object.assign({ className: styles.tableHeaderCellDragWrapper, "data-dragging": (isDraggable && isDragging) || undefined }, draggableProps, { children: _jsxs("div", { className: styles.tableHeaderCellMain, children: [columnDef.header && (_jsx("div", { className: styles.tableHeaderCellName, children: rowAutoHeight ? (flexRender(columnDef.header, header.getContext())) : (_jsx(TruncateString, { text: flexRender(columnDef.header, header.getContext()) })) })), Boolean(sortIcon) && (_jsx("div", { className: styles.tableHeaderIcon, "data-sort-direction": sortDirection, "data-test-id": TEST_IDS.headerSortIndicator, children: sortIcon }))] }) })), Boolean(isResizable) && _jsx(ResizeHandle, { header: header, cellRef: cellRef })] }));
+        }, children: [_jsx("div", Object.assign({ className: styles.tableHeaderCellDragWrapper, "data-dragging": (isDraggable && isDragging) || undefined }, draggableProps, { children: _jsxs("div", { className: styles.tableHeaderCellMain, "data-align": columnDef.headerAlign || undefined, children: [columnDef.header && (_jsx("div", { className: styles.tableHeaderCellName, children: rowAutoHeight ? (flexRender(columnDef.header, header.getContext())) : (_jsx(TruncateString, { text: flexRender(columnDef.header, header.getContext()) })) })), Boolean(sortIcon) && (_jsx("div", { className: styles.tableHeaderIcon, "data-sort-direction": sortDirection, "data-test-id": TEST_IDS.headerSortIndicator, children: sortIcon }))] }) })), Boolean(isResizable) && _jsx(ResizeHandle, { header: header, cellRef: cellRef })] }));
 }

package/dist/esm/helperComponents/Cells/HeaderCell/styles.module.css

@@ -93,9 +93,6 @@
      -moz-user-select:none;
           user-select:none;
 }
-.tableHeaderCell[data-align=right]{
-  justify-content:flex-end;
-}
 .tableHeaderCell[data-pin-position=right]:last-child{
   overflow:hidden;
 }
@@ -128,6 +125,9 @@
   box-sizing:border-box;
   min-width:0;
 }
+.tableHeaderCellMain[data-align=right]{
+  justify-content:flex-end;
+}
 
 .tableHeaderCellName{
   min-height:var(--size-table-head-name-layout, 24px);

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.35.2",
+  "version": "0.35.3",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -66,5 +66,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "f522d9dd1373f7c7ff9badd33c07b9600de96f58"
+  "gitHead": "f8268af3ad89841073bb5e032006e8f704fd6111"
 }

package/src/helperComponents/Cells/HeaderCell/HeaderCell.tsx

@@ -72,7 +72,6 @@ export function HeaderCell<TData>({
       data-no-padding={columnDef.noHeaderCellPadding || undefined}
       data-no-offset={columnDef.noHeaderCellBorderOffset || undefined}
       data-test-id={TEST_IDS.headerCell}
-      data-align={columnDef.headerAlign || undefined}
       data-header-id={header.id}
       data-resizing={isResizing || undefined}
       data-pin-position={pinPosition || undefined}
@@ -91,7 +90,7 @@ export function HeaderCell<TData>({
         data-dragging={(isDraggable && isDragging) || undefined}
         {...draggableProps}
       >
-        <div className={styles.tableHeaderCellMain}>
+        <div className={styles.tableHeaderCellMain} data-align={columnDef.headerAlign || undefined}>
           {columnDef.header && (
             <div className={styles.tableHeaderCellName}>
               {rowAutoHeight ? (

package/src/helperComponents/Cells/HeaderCell/styles.module.scss

@@ -126,10 +126,6 @@
     user-select: none;
   }
 
-  &[data-align='right'] {
-    justify-content: flex-end;
-  }
-
   &[data-pin-position='right'] {
     &:last-child {
       overflow: hidden;
@@ -172,6 +168,10 @@
 
   box-sizing: border-box;
   min-width: 0;
+
+  &[data-align='right'] {
+    justify-content: flex-end;
+  }
 }
 
 .tableHeaderCellName {
@@ -192,8 +192,9 @@
   color: styles-tokens-table.simple-var(styles-tokens-table.$sys-neutral-text-light);
 
   svg {
-    width: styles-tokens-table.simple-var(styles-tokens-element.$icon-xs) !important; /* stylelint-disable-line declaration-no-important */
-    height: styles-tokens-table.simple-var(styles-tokens-element.$icon-xs) !important; /* stylelint-disable-line declaration-no-important */
+    /* stylelint-disable-next-line declaration-no-important */
+    width: styles-tokens-table.simple-var(styles-tokens-element.$icon-xs) !important;
+    /* stylelint-disable-next-line declaration-no-important */
+    height: styles-tokens-table.simple-var(styles-tokens-element.$icon-xs) !important;
   }
 }
-