@jobber/components 2.89.4 → 2.90.1

package/CHANGELOG.md

@@ -8,6 +8,25 @@ menu: Changelog
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.90.1](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.90.0...@jobber/components@2.90.1) (2022-12-20)
+
+**Note:** Version bump only for package @jobber/components
+
+
+
+
+
+# [2.90.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.89.4...@jobber/components@2.90.0) (2022-12-19)
+
+
+### Features
+
+* **components:** Add configurable column width to DataTable ([#951](https://github.com/GetJobber/atlantis/issues/951)) ([01fad3e](https://github.com/GetJobber/atlantis/commit/01fad3e9e047dbdb7b69198efbdfd986c4c1d039))
+
+
+
+
+
 ## [2.89.4](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.89.3...@jobber/components@2.89.4) (2022-12-15)
 
 **Note:** Version bump only for package @jobber/components

package/dist/Chips/index.js

@@ -10,7 +10,7 @@ var hooks = require('@jobber/hooks');
 var Icon = require('../Icon-d5ad1a6d.js');
 var Avatar = require('../Avatar-cfd04e86.js');
 var Typography = require('../Typography-7e542a72.js');
-var Tooltip = require('../Tooltip-4396164d.js');
+var Tooltip = require('../Tooltip-e6d6edb1.js');
 var uuid = require('uuid');
 var lodash = require('lodash');
 var reactPopper = require('react-popper');

package/dist/DataTable/index.js

@@ -42,7 +42,11 @@ function Body(_a) {
     }; }, [onRowClick]);
     return (React__default["default"].createElement("tbody", null, table.getRowModel().rows.map(function (row) {
         return (React__default["default"].createElement("tr", { key: row.id, onClick: handleRowClick(row), className: bodyRowClasses }, row.getVisibleCells().map(function (cell) {
-            return (React__default["default"].createElement("td", { key: cell.id }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())));
+            return (React__default["default"].createElement("td", { key: cell.id, style: {
+                    width: cell.column.getSize(),
+                    minWidth: cell.column.columnDef.minSize,
+                    maxWidth: cell.column.columnDef.maxSize,
+                } }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())));
         })));
     })));
 }
@@ -135,7 +139,11 @@ function Header(_a) {
                 ? classnames__default["default"](styles$2.sortableColumn, (_a = {},
                     _a[styles$2.pinFirstHeaderSortable] = !!onRowClick,
                     _a))
-                : "", onClick: sorting ? header.column.getToggleSortingHandler() : undefined }, header.isPlaceholder ? null : (React__default["default"].createElement("div", null,
+                : "", onClick: sorting ? header.column.getToggleSortingHandler() : undefined, style: {
+                width: header.getSize(),
+                minWidth: header.column.columnDef.minSize,
+                maxWidth: header.column.columnDef.maxSize,
+            } }, header.isPlaceholder ? null : (React__default["default"].createElement("div", null,
             reactTable.flexRender(header.column.columnDef.header, header.getContext()),
             {
                 asc: React__default["default"].createElement(Icon.Icon, { name: "longArrowUp", color: "green" }),
@@ -150,7 +158,11 @@ styleInject_es.styleInject(css);
 
 var DesktopView = function (_a) {
     var table = _a.table;
-    return (React__default["default"].createElement("tfoot", { "data-testid": "data-table-desktop-footer" }, table.getFooterGroups().map(function (footerGroup) { return (React__default["default"].createElement("tr", { key: footerGroup.id }, footerGroup.headers.map(function (header) { return (React__default["default"].createElement("th", { key: header.id }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))); }))); })));
+    return (React__default["default"].createElement("tfoot", { "data-testid": "data-table-desktop-footer" }, table.getFooterGroups().map(function (footerGroup) { return (React__default["default"].createElement("tr", { key: footerGroup.id }, footerGroup.headers.map(function (header) { return (React__default["default"].createElement("th", { key: header.id, style: {
+            width: header.getSize(),
+            minWidth: header.column.columnDef.minSize,
+            maxWidth: header.column.columnDef.maxSize,
+        } }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))); }))); })));
 };
 var HandheldView = function (_a) {
     var table = _a.table;

package/dist/DataTable/test-utilities/mocks.d.ts

@@ -6,6 +6,12 @@ interface Data {
     sigil: string;
     isAlive: string;
 }
+interface RankingData {
+    name: string;
+    points: string;
+    chance: number;
+    power: string;
+}
 interface RoyaltyReportData {
     franchiseName: string;
     payment: string;
@@ -16,4 +22,42 @@ export declare const data: Data[];
 export declare const columns: ColumnDef<Data>[];
 export declare const royaltyReportColumns: ColumnDef<RoyaltyReportData>[];
 export declare const royaltyReportData: RoyaltyReportData[];
+export declare const columnSizeData: RankingData[];
+export declare const columSizeColumns: ({
+    id: string;
+    accessorKey: string;
+    header: string;
+    footer: string;
+    enableResizing: boolean;
+    cell: (info: {
+        getValue: () => unknown;
+    }) => unknown;
+    size: number;
+    minSize: number;
+    maxSize: number;
+} | {
+    id: string;
+    accessorKey: string;
+    header: string;
+    footer: string;
+    cell: (info: {
+        getValue: () => unknown;
+    }) => unknown;
+    size: number;
+    minSize: number;
+    maxSize: number;
+    enableResizing?: undefined;
+} | {
+    id: string;
+    accessorKey: string;
+    header: string;
+    cell: (info: {
+        getValue: () => unknown;
+    }) => unknown;
+    size: number;
+    minSize: number;
+    maxSize: number;
+    footer?: undefined;
+    enableResizing?: undefined;
+})[];
 export {};

package/dist/Tooltip/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Tooltip = require('../Tooltip-4396164d.js');
+var Tooltip = require('../Tooltip-e6d6edb1.js');
 require('../tslib.es6-5b50eb8e.js');
 require('react');
 require('classnames');

package/dist/{Tooltip-4396164d.js → Tooltip-e6d6edb1.js}

@@ -15,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
-var css = ":root {\n  --tooltip--arrow-size: var(--space-small);\n  --tooltip--offset: calc(-1 * calc(var(--space-smaller) + 1px));\n}\n\n._2IKuYsqwWWH9A-WgJDR61q {\n  display: none;\n}\n\n._2fkHxHwiJK9AkUMCIPucCJ {\n  display: inline-block;\n  position: absolute;\n  z-index: var(--elevation-tooltip);\n}\n\n._2YpF1qO7J5ncFlfoW0hA1L {\n  display: inline-block;\n  position: relative;\n  max-width: calc(var(--base-unit) * 15);\n  padding: var(--space-small);\n  border: var(--border-base) solid var(--color-informative);\n  border-radius: var(--radius-base);\n  background-color: var(--color-informative--surface);\n}\n\n._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd,\n._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n  width: var(--space-small);\n  width: var(--space-small);\n  width: var(--tooltip--arrow-size);\n  height: var(--space-small);\n  height: var(--space-small);\n  height: var(--tooltip--arrow-size);\n  background-color: inherit;\n}\n\n._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  border: var(--border-base) solid var(--color-informative);\n  -webkit-transform: rotate(45deg);\n          transform: rotate(45deg);\n}\n\n._3VkJmaX3T1x98A59lZbEa5 {\n  padding-bottom: var(--space-small);\n}\n\n._3VkJmaX3T1x98A59lZbEa5 ._2YpF1qO7J5ncFlfoW0hA1L {\n  -webkit-transform-origin: bottom center;\n          transform-origin: bottom center;\n}\n\n._3VkJmaX3T1x98A59lZbEa5 ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd {\n  bottom: calc(-1 * calc(var(--space-smaller) + 1px));\n  bottom: calc(-1 * calc(var(--space-smaller) + 1px));\n  bottom: var(--tooltip--offset);\n}\n\n._3VkJmaX3T1x98A59lZbEa5 ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n  border-top-width: 0;\n  border-left-width: 0;\n}\n\n.QtIXawS3dVhY8j2NKSZLY {\n  padding-top: var(--space-small);\n}\n\n.QtIXawS3dVhY8j2NKSZLY ._2YpF1qO7J5ncFlfoW0hA1L {\n  -webkit-transform-origin: top center;\n          transform-origin: top center;\n}\n\n.QtIXawS3dVhY8j2NKSZLY ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd {\n  top: calc(-1 * calc(var(--space-smaller) + 1px));\n  top: calc(-1 * calc(var(--space-smaller) + 1px));\n  top: var(--tooltip--offset);\n}\n\n.QtIXawS3dVhY8j2NKSZLY ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n  border-bottom-width: 0;\n  border-right-width: 0;\n}\n";
+var css = ":root {\n  --tooltip--arrow-size: var(--space-small);\n  --tooltip--offset: calc(-1 * calc(var(--space-smaller) + 1px));\n}\n\n._2IKuYsqwWWH9A-WgJDR61q {\n  display: none;\n}\n\n._2fkHxHwiJK9AkUMCIPucCJ {\n  display: inline-block;\n  position: absolute;\n  z-index: var(--elevation-tooltip);\n}\n\n._2YpF1qO7J5ncFlfoW0hA1L {\n  display: inline-block;\n  position: relative;\n  max-width: calc(var(--base-unit) * 15);\n  padding: var(--space-small);\n  border: var(--border-base) solid var(--color-informative);\n  border-radius: var(--radius-base);\n  background-color: var(--color-informative--surface);\n}\n\n._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd,\n._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n  width: var(--space-small);\n  width: var(--space-small);\n  width: var(--tooltip--arrow-size);\n  height: var(--space-small);\n  height: var(--space-small);\n  height: var(--tooltip--arrow-size);\n  background-color: transparent;\n}\n\n._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  border: var(--border-base) solid var(--color-informative);\n  background-color: var(--color-informative--surface);\n  -webkit-transform: rotate(45deg);\n          transform: rotate(45deg);\n}\n\n._3VkJmaX3T1x98A59lZbEa5 {\n  padding-bottom: var(--space-small);\n}\n\n._3VkJmaX3T1x98A59lZbEa5 ._2YpF1qO7J5ncFlfoW0hA1L {\n  -webkit-transform-origin: bottom center;\n          transform-origin: bottom center;\n}\n\n._3VkJmaX3T1x98A59lZbEa5 ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd {\n  bottom: calc(-1 * calc(var(--space-smaller) + 1px));\n  bottom: calc(-1 * calc(var(--space-smaller) + 1px));\n  bottom: var(--tooltip--offset);\n}\n\n._3VkJmaX3T1x98A59lZbEa5 ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n  border-top-width: 0;\n  border-left-width: 0;\n}\n\n.QtIXawS3dVhY8j2NKSZLY {\n  padding-top: var(--space-small);\n}\n\n.QtIXawS3dVhY8j2NKSZLY ._2YpF1qO7J5ncFlfoW0hA1L {\n  -webkit-transform-origin: top center;\n          transform-origin: top center;\n}\n\n.QtIXawS3dVhY8j2NKSZLY ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd {\n  top: calc(-1 * calc(var(--space-smaller) + 1px));\n  top: calc(-1 * calc(var(--space-smaller) + 1px));\n  top: var(--tooltip--offset);\n}\n\n.QtIXawS3dVhY8j2NKSZLY ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n  border-bottom-width: 0;\n  border-right-width: 0;\n}\n";
 var styles = {"shadowActivator":"_2IKuYsqwWWH9A-WgJDR61q","tooltipWrapper":"_2fkHxHwiJK9AkUMCIPucCJ","tooltip":"_2YpF1qO7J5ncFlfoW0hA1L","arrow":"_3DjyKsZFiUA0QD18ABsimd","above":"_3VkJmaX3T1x98A59lZbEa5","below":"QtIXawS3dVhY8j2NKSZLY"};
 styleInject_es.styleInject(css);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "2.89.4",
+  "version": "2.90.1",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -85,5 +85,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "94605185b21389584355c34999a908de8f5c0432"
+  "gitHead": "d25d781ce73f30aa0b815f879c110e567458f0bf"
 }