@dbcdk/react-components 0.0.119 → 0.0.121

package/dist/components/table/table.utils.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 const SELECTION_COLUMN_PX = 40;
+const CONTEXT_MENU_COLUMN_PX = 44;
 const DEFAULT_COLUMN_PX = 150;
 function getVisibleColumns(columns) {
   return columns.filter((column) => !column.hidden);
@@ -44,6 +45,7 @@ function getCellDisplayValue(row, column) {
   return empty;
 }
 
+exports.CONTEXT_MENU_COLUMN_PX = CONTEXT_MENU_COLUMN_PX;
 exports.DEFAULT_COLUMN_PX = DEFAULT_COLUMN_PX;
 exports.SELECTION_COLUMN_PX = SELECTION_COLUMN_PX;
 exports.getAriaSort = getAriaSort;

package/dist/components/table/table.utils.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import type { ColumnItem } from './Table.types';
 export declare const SELECTION_COLUMN_PX: 40;
+export declare const CONTEXT_MENU_COLUMN_PX: 44;
 export declare const DEFAULT_COLUMN_PX: 150;
 export type SortDirection = 'asc' | 'desc' | null;
 export declare function getVisibleColumns<T>(columns: Array<ColumnItem<T>>): Array<ColumnItem<T>>;

package/dist/components/table/table.utils.js

@@ -1,4 +1,5 @@
 const SELECTION_COLUMN_PX = 40;
+const CONTEXT_MENU_COLUMN_PX = 44;
 const DEFAULT_COLUMN_PX = 150;
 function getVisibleColumns(columns) {
   return columns.filter((column) => !column.hidden);
@@ -42,4 +43,4 @@ function getCellDisplayValue(row, column) {
   return empty;
 }
 
-export { DEFAULT_COLUMN_PX, SELECTION_COLUMN_PX, getAriaSort, getCellDisplayValue, getHeaderLabel, getNextSortDirection, getVisibleColumns, isActiveSort, isModifierClick, shouldAllowWrap, shouldToggleOnKey };
+export { CONTEXT_MENU_COLUMN_PX, DEFAULT_COLUMN_PX, SELECTION_COLUMN_PX, getAriaSort, getCellDisplayValue, getHeaderLabel, getNextSortDirection, getVisibleColumns, isActiveSort, isModifierClick, shouldAllowWrap, shouldToggleOnKey };

package/dist/components/table/tanstackTable.utils.cjs

@@ -93,9 +93,10 @@ function toIntegerTrackWidths(tracks, targetWidth) {
   return Object.fromEntries(floored.map((track) => [track.id, track.width]));
 }
 function buildDistributedColumnWidths(args) {
-  const { table, hasSelection, defaultMinPx, columnSizing, availableWidth } = args;
+  const { table, hasSelection, hasContextMenu, defaultMinPx, columnSizing, availableWidth } = args;
   const leaf = table.getVisibleLeafColumns();
   const selectionWidth = hasSelection ? table_utils.SELECTION_COLUMN_PX : 0;
+  const contextMenuWidth = hasContextMenu ? table_utils.CONTEXT_MENU_COLUMN_PX : 0;
   const tracks = leaf.map((c) => {
     var _a, _b, _c, _d;
     const def = c.columnDef;
@@ -123,7 +124,7 @@ function buildDistributedColumnWidths(args) {
       fixed: false
     };
   });
-  const fixedWidth = selectionWidth + tracks.reduce((sum, track) => sum + track.width, 0);
+  const fixedWidth = selectionWidth + contextMenuWidth + tracks.reduce((sum, track) => sum + track.width, 0);
   let remaining = Math.max(0, availableWidth - fixedWidth);
   let active = tracks.filter(
     (track) => !track.fixed && (track.max == null || track.width < track.max)
@@ -148,18 +149,19 @@ function buildDistributedColumnWidths(args) {
     active = nextActive;
   }
   const floatTrackTotal = tracks.reduce((sum, track) => sum + track.width, 0);
-  const maxTrackWidth = availableWidth - selectionWidth;
+  const maxTrackWidth = availableWidth - selectionWidth - contextMenuWidth;
   const targetTrackWidth = Math.min(
     floatTrackTotal <= maxTrackWidth ? Math.floor(floatTrackTotal) : Math.ceil(floatTrackTotal),
     maxTrackWidth
   );
   const widths = toIntegerTrackWidths(tracks, targetTrackWidth);
   const totalWidth = Math.min(
-    selectionWidth + Object.values(widths).reduce((sum, width) => sum + width, 0),
+    selectionWidth + contextMenuWidth + Object.values(widths).reduce((sum, width) => sum + width, 0),
     availableWidth
   );
   return {
     selectionWidth: hasSelection ? table_utils.SELECTION_COLUMN_PX : void 0,
+    contextMenuWidth: hasContextMenu ? table_utils.CONTEXT_MENU_COLUMN_PX : void 0,
     widths,
     totalWidth
   };

package/dist/components/table/tanstackTable.utils.d.ts

@@ -14,11 +14,13 @@ export declare function getSortPropsFromSorting(sorting: SortingState): {
 export declare function buildDistributedColumnWidths(args: {
     table: any;
     hasSelection: boolean;
+    hasContextMenu: boolean;
     defaultMinPx: number;
     columnSizing: ColumnSizingState;
     availableWidth: number;
 }): {
     selectionWidth?: number;
+    contextMenuWidth?: number;
     widths: Record<string, number>;
     totalWidth: number;
 };

package/dist/components/table/tanstackTable.utils.js

@@ -1,4 +1,4 @@
-import { DEFAULT_COLUMN_PX, SELECTION_COLUMN_PX } from './table.utils';
+import { DEFAULT_COLUMN_PX, CONTEXT_MENU_COLUMN_PX, SELECTION_COLUMN_PX } from './table.utils';
 
 function getColumnId(def, index) {
   const d = def;
@@ -91,9 +91,10 @@ function toIntegerTrackWidths(tracks, targetWidth) {
   return Object.fromEntries(floored.map((track) => [track.id, track.width]));
 }
 function buildDistributedColumnWidths(args) {
-  const { table, hasSelection, defaultMinPx, columnSizing, availableWidth } = args;
+  const { table, hasSelection, hasContextMenu, defaultMinPx, columnSizing, availableWidth } = args;
   const leaf = table.getVisibleLeafColumns();
   const selectionWidth = hasSelection ? SELECTION_COLUMN_PX : 0;
+  const contextMenuWidth = hasContextMenu ? CONTEXT_MENU_COLUMN_PX : 0;
   const tracks = leaf.map((c) => {
     var _a, _b, _c, _d;
     const def = c.columnDef;
@@ -121,7 +122,7 @@ function buildDistributedColumnWidths(args) {
       fixed: false
     };
   });
-  const fixedWidth = selectionWidth + tracks.reduce((sum, track) => sum + track.width, 0);
+  const fixedWidth = selectionWidth + contextMenuWidth + tracks.reduce((sum, track) => sum + track.width, 0);
   let remaining = Math.max(0, availableWidth - fixedWidth);
   let active = tracks.filter(
     (track) => !track.fixed && (track.max == null || track.width < track.max)
@@ -146,18 +147,19 @@ function buildDistributedColumnWidths(args) {
     active = nextActive;
   }
   const floatTrackTotal = tracks.reduce((sum, track) => sum + track.width, 0);
-  const maxTrackWidth = availableWidth - selectionWidth;
+  const maxTrackWidth = availableWidth - selectionWidth - contextMenuWidth;
   const targetTrackWidth = Math.min(
     floatTrackTotal <= maxTrackWidth ? Math.floor(floatTrackTotal) : Math.ceil(floatTrackTotal),
     maxTrackWidth
   );
   const widths = toIntegerTrackWidths(tracks, targetTrackWidth);
   const totalWidth = Math.min(
-    selectionWidth + Object.values(widths).reduce((sum, width) => sum + width, 0),
+    selectionWidth + contextMenuWidth + Object.values(widths).reduce((sum, width) => sum + width, 0),
     availableWidth
   );
   return {
     selectionWidth: hasSelection ? SELECTION_COLUMN_PX : void 0,
+    contextMenuWidth: hasContextMenu ? CONTEXT_MENU_COLUMN_PX : void 0,
     widths,
     totalWidth
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.119",
+  "version": "0.0.121",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",

package/dist/components/table/components/TableLoadingBody.cjs

@@ -1,35 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var SkeletonLoaderItem = require('../../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
-var table_classes = require('../table.classes');
-var styles = require('../Table.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function TableLoadingBody({ rows, columns, hasSelection }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: styles__default.default.body, children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: styles__default.default.row, children: [
-    hasSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: table_classes.cx(styles__default.default.cell, styles__default.default.selectionCell), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.cellContent, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: 20, width: 20 }) }) }) : null,
-    columns.map((column) => {
-      var _a;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "td",
-        {
-          className: table_classes.cx(
-            styles__default.default.cell,
-            column.divider === "left" && styles__default.default.dividerLeft,
-            column.divider === "right" && styles__default.default.dividerRight
-          ),
-          "data-align": (_a = column.align) != null ? _a : "left",
-          "data-divider": column.divider,
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.cellContent, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.cellValueEllipsis, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: 20, width: "100%" }) }) })
-        },
-        column.id
-      );
-    })
-  ] }, `loading-row-${rowIndex}`)) });
-}
-
-exports.TableLoadingBody = TableLoadingBody;

package/dist/components/table/components/TableLoadingBody.d.ts

@@ -1,9 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ColumnItem } from '../Table.types';
-type Props<T> = {
-    rows: number;
-    columns: ColumnItem<T>[];
-    hasSelection: boolean;
-};
-export declare function TableLoadingBody<T>({ rows, columns, hasSelection }: Props<T>): ReactNode;
-export {};

package/dist/components/table/components/TableLoadingBody.js

@@ -1,29 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { SkeletonLoaderItem } from '../../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
-import { cx } from '../table.classes';
-import styles from '../Table.module.css';
-
-function TableLoadingBody({ rows, columns, hasSelection }) {
-  return /* @__PURE__ */ jsx("tbody", { className: styles.body, children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsxs("tr", { className: styles.row, children: [
-    hasSelection ? /* @__PURE__ */ jsx("td", { className: cx(styles.cell, styles.selectionCell), children: /* @__PURE__ */ jsx("div", { className: styles.cellContent, children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 20, width: 20 }) }) }) : null,
-    columns.map((column) => {
-      var _a;
-      return /* @__PURE__ */ jsx(
-        "td",
-        {
-          className: cx(
-            styles.cell,
-            column.divider === "left" && styles.dividerLeft,
-            column.divider === "right" && styles.dividerRight
-          ),
-          "data-align": (_a = column.align) != null ? _a : "left",
-          "data-divider": column.divider,
-          children: /* @__PURE__ */ jsx("div", { className: styles.cellContent, children: /* @__PURE__ */ jsx("div", { className: styles.cellValueEllipsis, children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }) })
-        },
-        column.id
-      );
-    })
-  ] }, `loading-row-${rowIndex}`)) });
-}
-
-export { TableLoadingBody };