@decisiv/ui-components 2.0.1-alpha.17 → 2.0.1-alpha.174

package/lib/components/Table/index.test.js

@@ -10,6 +10,14 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
@@ -281,29 +289,49 @@ describe('Table', function () {
     });
   });
   describe('fixed columns', function () {
-    var columnsFixed = [].concat(columns);
-    var firstColumn = columnsFixed[0];
-    columnsFixed[0] = _objectSpread({}, firstColumn, {
-      fixed: 'left'
-    });
-    var lastIndex = columnsFixed.length - 1;
-    var lastColumn = columnsFixed[lastIndex];
-    columnsFixed[lastIndex] = _objectSpread({}, lastColumn, {
-      fixed: 'right'
+    it('renders columns with sticky styles', function () {
+      var columnsFixed = [].concat(columns);
+      var firstColumn = columnsFixed[0];
+      columnsFixed[0] = _objectSpread({}, firstColumn, {
+        fixed: true
+      });
+      var lastIndex = columnsFixed.length - 1;
+      var lastColumn = columnsFixed[lastIndex];
+      columnsFixed[lastIndex] = _objectSpread({}, lastColumn, {
+        fixed: true
+      });
+
+      var _render9 = (0, _react2.render)(_react.default.createElement(_.default, {
+        columns: columnsFixed,
+        data: data
+      })),
+          getByText = _render9.getByText,
+          container = _render9.container;
+
+      expect(getByText(firstColumn.title).closest('th')).toHaveStyle("\n        position: sticky;\n        left: 0px;\n      ");
+      expect(getByText(lastColumn.title).closest('th')).toHaveStyle("\n        position: sticky;\n        right: 0px;\n      ");
+      var firstRow = container.querySelector('tbody tr:first-child');
+      expect((0, _react2.getByText)(firstRow, data[0][firstColumn.name]).closest('td')).toHaveStyle("\n        position: sticky;\n        left: 0px;\n      ");
+      expect((0, _react2.getByText)(firstRow, data[0][lastColumn.name]).closest('td')).toHaveStyle("\n          position: sticky;\n          right: 0px;\n        ");
     });
+    it('ignores columns in the middle', function () {
+      var columnsFixed = [].concat(columns);
+      var middleIndex = Math.trunc(columns.length / 2);
+      var middleColumn = columnsFixed[middleIndex];
+      columnsFixed[middleIndex] = _objectSpread({}, middleColumn, {
+        fixed: true
+      });
 
-    var _render9 = (0, _react2.render)(_react.default.createElement(_.default, {
-      columns: columnsFixed,
-      data: data
-    })),
-        getByText = _render9.getByText,
-        container = _render9.container;
-
-    expect(getByText(firstColumn.title).closest('th')).toHaveStyle("\n      position: sticky;\n      left: 0px;\n    ");
-    expect(getByText(lastColumn.title).closest('th')).toHaveStyle("\n      position: sticky;\n      right: 0px;\n    ");
-    var firstRow = container.querySelector('tbody tr:first-child');
-    expect((0, _react2.getByText)(firstRow, data[0][firstColumn.name]).closest('td')).toHaveStyle("\n      position: sticky;\n      left: 0px;\n    ");
-    expect((0, _react2.getByText)(firstRow, data[0][lastColumn.name]).closest('td')).toHaveStyle("\n        position: sticky;\n        right: 0px;\n      ");
+      var _render10 = (0, _react2.render)(_react.default.createElement(_.default, {
+        columns: columnsFixed,
+        data: data,
+        scroll: "x"
+      })),
+          container = _render10.container;
+
+      var firstRow = container.querySelector('tbody tr:first-child');
+      expect((0, _react2.getByText)(firstRow, data[0][middleColumn.name]).closest('td')).not.toHaveStyle("\n        position: sticky;\n      ");
+    });
   });
   describe('Drag-and-Drop sorting', function () {
     var dragItem = /*#__PURE__*/function () {
@@ -377,18 +405,18 @@ describe('Table', function () {
     }();
 
     it('calls onDragEnd prop when sorting with DnD', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var onDragEnd, _render10, getByText;
+      var onDragEnd, _render11, getByText;
 
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
               onDragEnd = jest.fn();
-              _render10 = (0, _react2.render)(_react.default.createElement(_.default, {
+              _render11 = (0, _react2.render)(_react.default.createElement(_.default, {
                 columns: columns,
                 data: data,
                 onDragEnd: onDragEnd
-              })), getByText = _render10.getByText;
+              })), getByText = _render11.getByText;
               _context2.next = 4;
               return dragItem(getByText('Avatar'), 2, 'down', getByText);
 
@@ -405,14 +433,14 @@ describe('Table', function () {
     describe('grouped data', function () {
       // the beginning of the table is outside any group
       it('does not call onDragEnd prop when moving item to the beginning', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-        var onDragEnd, _render11, getByText;
+        var onDragEnd, _render12, getByText;
 
         return regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) {
             switch (_context3.prev = _context3.next) {
               case 0:
                 onDragEnd = jest.fn();
-                _render11 = (0, _react2.render)(_react.default.createElement(_.default, {
+                _render12 = (0, _react2.render)(_react.default.createElement(_.default, {
                   columns: groupColumns,
                   data: groupData,
                   onDragEnd: onDragEnd,
@@ -421,7 +449,7 @@ describe('Table', function () {
                     var name = _ref10.groupData.name;
                     return _react.default.createElement("span", null, name);
                   }
-                })), getByText = _render11.getByText;
+                })), getByText = _render12.getByText;
                 _context3.next = 4;
                 return dragItem(getByText('garlic'), 2, 'up', getByText);
 
@@ -436,14 +464,14 @@ describe('Table', function () {
         }, _callee3);
       })));
       it('calls onDragEnd prop when moving item to a group before', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
-        var onDragEnd, _render12, getByText;
+        var onDragEnd, _render13, getByText;
 
         return regeneratorRuntime.wrap(function _callee4$(_context4) {
           while (1) {
             switch (_context4.prev = _context4.next) {
               case 0:
                 onDragEnd = jest.fn();
-                _render12 = (0, _react2.render)(_react.default.createElement(_.default, {
+                _render13 = (0, _react2.render)(_react.default.createElement(_.default, {
                   columns: groupColumns,
                   data: groupData,
                   onDragEnd: onDragEnd,
@@ -452,7 +480,7 @@ describe('Table', function () {
                     var name = _ref12.groupData.name;
                     return _react.default.createElement("span", null, name);
                   }
-                })), getByText = _render12.getByText;
+                })), getByText = _render13.getByText;
                 _context4.next = 4;
                 return dragItem(getByText('kale'), 2, 'up', getByText);
 
@@ -467,14 +495,14 @@ describe('Table', function () {
         }, _callee4);
       })));
       it('calls onDragEnd prop when moving item to a group after', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
-        var onDragEnd, _render13, getByText;
+        var onDragEnd, _render14, getByText;
 
         return regeneratorRuntime.wrap(function _callee5$(_context5) {
           while (1) {
             switch (_context5.prev = _context5.next) {
               case 0:
                 onDragEnd = jest.fn();
-                _render13 = (0, _react2.render)(_react.default.createElement(_.default, {
+                _render14 = (0, _react2.render)(_react.default.createElement(_.default, {
                   columns: groupColumns,
                   data: groupData,
                   onDragEnd: onDragEnd,
@@ -483,7 +511,7 @@ describe('Table', function () {
                     var name = _ref14.groupData.name;
                     return _react.default.createElement("span", null, name);
                   }
-                })), getByText = _render13.getByText;
+                })), getByText = _render14.getByText;
                 _context5.next = 4;
                 return dragItem(getByText('onion'), 2, 'down', getByText);
 
@@ -499,4 +527,23 @@ describe('Table', function () {
       })));
     });
   });
+  describe('rendering custom header', function () {
+    it('renders a custom header', function () {
+      var firstColumn = columns[0],
+          rest = columns.slice(1);
+      var headerTitle = 'Custom header';
+
+      var _render15 = (0, _react2.render)(_react.default.createElement(_.default, {
+        columns: [_objectSpread({
+          HeaderCell: function HeaderCell() {
+            return _react.default.createElement("span", null, headerTitle);
+          }
+        }, firstColumn)].concat(_toConsumableArray(rest)),
+        data: data
+      })),
+          getByText = _render15.getByText;
+
+      expect(getByText(headerTitle)).toBeTruthy();
+    });
+  });
 });

package/lib/components/Table/schema.columns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.columns.d.ts","sourceRoot":"","sources":["../../../src/components/Table/schema.columns.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAqC,CAAC;AA4BlD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.columns.d.ts","sourceRoot":"","sources":["../../../src/components/Table/schema.columns.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAqC,CAAC;AAoClD,eAAe,MAAM,CAAC"}

package/lib/components/Table/schema.columns.js

@@ -12,13 +12,15 @@ var schema = (0, _reactDesc.describe)({
   displayName: 'Table'
 });
 schema.propTypes = {
-  DataCell: _reactDesc.PropTypes.any.description("A React Component used to render data inside one of the column's data cells.").format('React Component').isRequired,
-  getCellAttrs: _reactDesc.PropTypes.func.description('A function that returns additional attributes for the rendered `<td>`.'),
-  getCellKey: _reactDesc.PropTypes.func.description("A function that returns a unique, stable key for each cell based on the row's data and the column's name. Defaults to `rowData[columnName]`."),
+  HeaderCell: _reactDesc.PropTypes.any.description('A React Component used to render a custom column header cell. See below for more details.').format('React Component'),
+  DataCell: _reactDesc.PropTypes.any.description("A React Component used to render data inside one of the column's data cells. See below for more details.").format('React Component').isRequired,
+  getCellAttrs: _reactDesc.PropTypes.func.description("A function that returns additional attributes for the rendered `<td>`. Receives the row's data and the column's name as arguments. See below for function signature."),
+  getHeaderCellAttrs: _reactDesc.PropTypes.func.description('A function that returns additional attributes for the rendered `<th>` within the `<thead>`. Receives the column name as argument. See below for function signature.'),
+  getCellKey: _reactDesc.PropTypes.func.description("A function that returns a unique, stable key for each cell based on the row's data and the column's name. Receives the row's data and the column's name as arguments. Defaults to `columnName`. See below for function signature."),
   name: _reactDesc.PropTypes.string.description('The name of this column. Must be unique to the table.').isRequired,
   sortBy: _reactDesc.PropTypes.func.description("If included (with a title), makes a column sortable. Will be called with the new sorting type when a user clicks on the column's header. Should cause the data provided to the table to update based on the new sorting type."),
   title: _reactDesc.PropTypes.string.description("The text displayed in a column's header."),
-  fixed: _reactDesc.PropTypes.oneOf(['right', 'left']).description('If included, the column will be kept visible when scrolling, sticking to the side defined. Horizontal scroll in table is required')
+  fixed: _reactDesc.PropTypes.bool.description('If true the column will be kept visible when scrolling horizontally, it will stick to the left when the column is at the beginning of the array and to the right when at the end. Fixed columns can be grouped at the beginning or at the end of the array, if set to a column in the middle it will be ignored. Horizontal scroll in table is required.')
 };
 var _default = schema;
 exports.default = _default;

package/lib/components/Table/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Table/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAAqC,CAAC;AA6DlD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Table/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAAqC,CAAC;AAkElD,eAAe,MAAM,CAAC"}

package/lib/components/Table/schema.js

@@ -23,7 +23,7 @@ var schema = (0, _reactDesc.describe)({
   displayName: 'Table'
 });
 schema.propTypes = {
-  GroupHeader: _reactDesc.PropTypes.any.description('A React Component used to render a header within the table for grouped data. Required if `rowDataPath` is provided.').format('React Component'),
+  GroupHeader: _reactDesc.PropTypes.any.description('A React Component used to render a header within the table for grouped data. Required if `rowDataPath` is provided. Receives `groupData` as prop.').format('React Component'),
   columns: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.object).description('An array of column configuration objects (described in more detail below). Columns will be displayed in the order of the array.').isRequired,
   data: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.object).description('An array of row data objects. Row data can contain basically anything. Rows will be displayed in the order of the array.').isRequired,
   defaultSort: _reactDesc.PropTypes.shape({
@@ -31,16 +31,17 @@ schema.propTypes = {
     sortingType: _reactDesc.PropTypes.oneOf([_useSortableHeaders.ASCENDING, _useSortableHeaders.DESCENDING, _useSortableHeaders.UNSORTED]).description('The initial sort type.')
   }).description("Indicates that the provided data is initially sorted on the given column, in the specified direction. The column's onSort handler will NOT be called; it is assumed that the data has been sorted prior to the initial render."),
   footer: _reactDesc.PropTypes.any.description("A React Component used to render a footer area beneath the table rows. This component is not included in the 'height' if set.").format('React Component'),
-  getGroupHeaderAttrs: _reactDesc.PropTypes.func.description('A function that returns additional attributes for the `<th>` rendered as a row group header.'),
-  getRowAttrs: _reactDesc.PropTypes.func.description('A function that returns additional attributes for the rendered `<tr>` within the `<tbody>`.'),
-  getRowKey: _reactDesc.PropTypes.func.description("A function that returns a unique, stable key for each row based on that row's data. Defaults to `rowData['key']` or `rowData['id']`."),
+  getGroupHeaderAttrs: _reactDesc.PropTypes.func.description("A function that returns additional attributes for the `<th>` rendered as a row group header. Receives the row's data as argument. See below for function signature."),
+  getRowAttrs: _reactDesc.PropTypes.func.description("A function that returns additional attributes for the rendered `<tr>` within the `<tbody>`. Receives 2 arguments: the row's data and an options object. See below for function signature."),
+  getRowKey: _reactDesc.PropTypes.func.description("A function that returns a unique, stable key for each row based on that row's data. Receives 2 arguments: the row's data and an options object. Defaults to `rowData['key']` or `rowData['id']`. See below for function signature."),
   height: _reactDesc.PropTypes.string.description('A pass through CSS value for the height of the table.'),
   kind: _reactDesc.PropTypes.oneOf(['primary', 'secondary']).description('A flag controlling the kind of table displayed.').defaultValue('primary'),
   rowDataPath: _reactDesc.PropTypes.string.description('A valid path to an array of rowData objects within a groupData object. Required if `GroupHeader` is provided.'),
-  scroll: _reactDesc.PropTypes.oneOf(['x', 'y']).description('A responsive modifier used to control scrolling on the table. '),
+  scroll: _reactDesc.PropTypes.oneOf(['x', 'y']).description('A responsive modifier used to control scrolling on the table.'),
   size: _reactDesc.PropTypes.oneOf(['_'].concat(_toConsumableArray(Object.keys(_breakpointObserver.sizes)))).description('Defines the breakpoint to use (for use in reactive design).'),
   variant: _reactDesc.PropTypes.oneOf(['comfortable', 'compact']).description('A flag controlling the variant of the table displayed.').defaultValue('comfortable'),
-  onDragEnd: _reactDesc.PropTypes.func.description("If present enables Drag-and-Drop sorting. A function called after the order of rows changes when a row is dragged and dropped, it is called with 2 arguments: the index from where it's dragged and the index to where it's dropped, if there are grouped rows each argument is an array where the first element is the group index and the second the row index inside the group")
+  onDragEnd: _reactDesc.PropTypes.func.description("If present enables Drag-and-Drop sorting. A function called after the order of rows changes when a row is dragged and dropped, it is called with 2 arguments: the index from where it's dragged and the index to where it's dropped, if there are grouped rows each argument is an array where the first element is the group index and the second the row index inside the group. See below for function signature."),
+  dragVariant: _reactDesc.PropTypes.oneOf(['handle', 'row']).description('When Drag-and-Drop sorting is enabled, defines if the rows should be dragged only from the default handle or from anywhere in the row. This flag is ignored when a `DragHandle` node is rendered in a `DataCell`.').defaultValue('row')
 };
 var _default = schema;
 exports.default = _default;

package/lib/components/Table/types.d.ts

@@ -5,17 +5,27 @@ import { ModifiersProp } from 'styled-components-modifiers';
 import { DroppableProvided, DroppableStateSnapshot, DraggableProvided, DraggableStateSnapshot, DropResult } from 'react-beautiful-dnd';
 import { KindModifiers, ScrollModifiersConfig, VariantModifiers } from './Container';
 import { SortableState, SortingTypes } from './hooks/useSortableHeaders';
+import { CustomHeaderCellProps } from './HeaderCell/types';
 export { KindModifiers, ScrollModifiers, VariantModifiers } from './Container';
 export interface Column<TData> {
+    HeaderCell?: (props: CustomHeaderCellProps) => JSX.Element;
     DataCell: (props: DataCellProps<TData>) => JSX.Element;
     getCellAttrs?: (rowData: TData, columnName: string) => object | undefined;
+    getHeaderCellAttrs?: (columnName: string) => object | undefined;
     getCellKey?: (rowData: TData, columnName: string) => string;
     name: string;
     sortBy?: (sortingType: SortingTypes) => void;
     title?: string;
-    fixed?: 'left' | 'right';
+    fixed?: boolean;
 }
+export declare type DragVariant = 'handle' | 'row';
 export declare type Columns<TData> = Column<TData>[];
+export interface FixedColumns {
+    [name: string]: {
+        offset: number;
+        alignment: string;
+    };
+}
 export interface HeadProps<TData> {
     columns: Columns<TData>;
     kind?: KindModifiers;
@@ -24,7 +34,7 @@ export interface HeadProps<TData> {
 export interface DataRowProps<TData> {
     className?: 'group-data-row';
     columns: Columns<TData>;
-    getRowAttrs?: (rowData: TData, isGroupHeaderRow?: boolean) => object | undefined;
+    getRowAttrs?: TableProps<TData>['getRowAttrs'];
     groupData?: TData;
     groupId?: string | undefined;
     kind?: KindModifiers;
@@ -69,13 +79,18 @@ export interface TableProps<TData extends RowData> extends HeadProps<TData>, Too
     data: TData[];
     defaultSort?: SortableState;
     getGroupHeaderAttrs?: (groupData: TData) => object | undefined;
-    getRowAttrs?: (rowData: TData, isGroupHeaderRow?: boolean) => object | undefined;
-    getRowKey?: (rowData: TData) => string;
+    getRowAttrs?: (rowData: TData, options: {
+        isGroupHeaderRow?: boolean;
+    }) => object | undefined;
+    getRowKey?: (rowData: TData, options: {
+        isGroupHeaderRow?: boolean;
+    }) => string;
     height?: HeightProperty<string>;
     rowDataPath?: string;
     scroll?: ModifiersProp<ScrollModifiersConfig, typeof sizes>;
     size?: keyof typeof sizes;
     onDragEnd?: (from: number | number[], to: number | number[]) => void;
+    dragVariant?: DragVariant;
 }
 export interface DroppableWrapperProps {
     children(provided?: DroppableProvided, snapshot?: DroppableStateSnapshot): React.ReactElement<HTMLElement>;

package/lib/components/Table/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Table/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Table/types.ts"],"names":[],"mappings":"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"}

package/lib/components/Table/utils.d.ts

@@ -1,14 +1,8 @@
-import { RowData, TableProps, WrapperProps, Columns } from './types';
+import { RowData, TableProps, WrapperProps, Columns, FixedColumns } from './types';
 export declare function defaultGetRowKey({ key, id }: RowData): string | undefined;
 export declare function isGroupData<TData>(dataObj: TData, { rowDataPath, GroupHeader }: TableProps<TData>): boolean;
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, WrapperProps, never>;
-export interface ColumnsOffset {
-    [name: string]: number;
-}
 export declare function calculateOffsets<T>(columns: Columns<T>, columnsWidth: {
     [name: string]: number;
-}): {
-    leftColumnsOffset: ColumnsOffset;
-    rightColumnsOffset: ColumnsOffset;
-};
+}): FixedColumns;
 //# sourceMappingURL=utils.d.ts.map

package/lib/components/Table/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Table/utils.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAErE,wBAAgB,gBAAgB,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAEzE;AAED,wBAAgB,WAAW,CAAC,KAAK,EAC/B,OAAO,EAAE,KAAK,EACd,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,UAAU,CAAC,KAAK,CAAC,GAC9C,OAAO,CAMT;AAaD,eAAO,MAAM,OAAO,8EAQnB,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EACnB,YAAY,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GACvC;IACD,iBAAiB,EAAE,aAAa,CAAC;IACjC,kBAAkB,EAAE,aAAa,CAAC;CACnC,CA6BA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Table/utils.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,OAAO,EACP,UAAU,EACV,YAAY,EACZ,OAAO,EACP,YAAY,EACb,MAAM,SAAS,CAAC;AAEjB,wBAAgB,gBAAgB,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAEzE;AAED,wBAAgB,WAAW,CAAC,KAAK,EAC/B,OAAO,EAAE,KAAK,EACd,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,UAAU,CAAC,KAAK,CAAC,GAC9C,OAAO,CAMT;AAaD,eAAO,MAAM,OAAO,8EAQnB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EACnB,YAAY,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GACvC,YAAY,CA4Bd"}

package/lib/components/Table/utils.js

@@ -61,26 +61,27 @@ exports.Wrapper = Wrapper;
 function calculateOffsets(columns, columnsWidth) {
   var leftOffset = 0;
   var rightOffset = 0;
-  var leftOffsets = {};
-  var rightOffsets = {};
-
-  for (var indexLeft = 0, indexRight = columns.length - 1; indexLeft < columns.length; indexLeft += 1, indexRight -= 1) {
-    var leftColumn = columns[indexLeft];
-    var rightColumn = columns[indexRight];
-
-    if (leftColumn.fixed === 'left') {
-      leftOffsets[leftColumn.name] = leftOffset;
-      leftOffset += Math.floor(columnsWidth[leftColumn.name] || 0);
-    }
-
-    if (rightColumn.fixed === 'right') {
-      rightOffsets[rightColumn.name] = rightOffset;
-      rightOffset += Math.floor(columnsWidth[rightColumn.name] || 0);
-    }
+  var fixedColumns = {};
+
+  for (var index = 0; index < columns.length; index += 1) {
+    var column = columns[index];
+    if (!column.fixed) break;
+    fixedColumns[column.name] = {
+      alignment: 'left',
+      offset: leftOffset
+    };
+    leftOffset += Math.floor(columnsWidth[column.name] || 0);
   }
 
-  return {
-    leftColumnsOffset: leftOffsets,
-    rightColumnsOffset: rightOffsets
-  };
+  for (var _index = columns.length - 1; _index >= 0; _index -= 1) {
+    var _column = columns[_index];
+    if (!_column.fixed) break;
+    fixedColumns[_column.name] = {
+      alignment: 'right',
+      offset: rightOffset
+    };
+    rightOffset += Math.floor(columnsWidth[_column.name] || 0);
+  }
+
+  return fixedColumns;
 }

package/lib/components/Tabs/Tab/index.d.ts

@@ -0,0 +1,13 @@
+import React, { Ref, HTMLAttributes } from 'react';
+import { IconProps } from '@decisiv/iconix';
+export declare type TabIcon = (props: IconProps) => JSX.Element;
+export interface TabProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'size'> {
+    id: string;
+    ref?: Ref<HTMLButtonElement>;
+    icon?: TabIcon;
+    title: string;
+    disabled?: boolean;
+}
+declare const Tab: React.ForwardRefExoticComponent<Pick<TabProps, "title" | "style" | "onDragEnd" | "id" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "icon" | "disabled"> & React.RefAttributes<HTMLButtonElement>>;
+export default Tab;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Tabs/Tab/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tab/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAEZ,GAAG,EAKH,cAAc,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAQ5C,oBAAY,OAAO,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAExD,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IACvD,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,GAAG,glJAsDR,CAAC;AAiBF,eAAe,GAAG,CAAC"}

package/lib/components/Tabs/Tab/index.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _assignRef = _interopRequireDefault(require("../../../utils/assignRef"));
+
+var _context = require("../context");
+
+var _styles = require("./styles");
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var Tab = (0, _react.forwardRef)(function (_ref, ref) {
+  var id = _ref.id,
+      children = _ref.children,
+      icon = _ref.icon,
+      title = _ref.title,
+      onClick = _ref.onClick,
+      disabled = _ref.disabled,
+      rest = _objectWithoutProperties(_ref, ["id", "children", "icon", "title", "onClick", "disabled"]);
+
+  var _useTabs = (0, _context.useTabs)(),
+      register = _useTabs.register,
+      activate = _useTabs.activate,
+      activeId = _useTabs.activeId,
+      onKeyDown = _useTabs.onKeyDown,
+      size = _useTabs.size;
+
+  var Icon = icon;
+  var isActive = id === activeId;
+  var internalRef = (0, _react.useRef)(null);
+  var handleClick = (0, _react.useCallback)(function (e) {
+    !disabled && activate(id);
+    onClick && onClick(e);
+  }, [id, activate, disabled, onClick]);
+
+  var assignRefs = function assignRefs(node) {
+    (0, _assignRef.default)(ref, node);
+    (0, _assignRef.default)(internalRef, node);
+  };
+
+  (0, _react.useEffect)(function () {
+    var unregister = register(id, {
+      isDisabled: !!disabled,
+      content: children,
+      ref: internalRef
+    });
+    return unregister;
+  }, [id, disabled, children, internalRef, register]);
+  return _react.default.createElement(_styles.TabContainer, _extends({}, rest, {
+    "aria-controls": "tab-panel-".concat(id),
+    "aria-selected": isActive,
+    disabled: !!disabled,
+    id: "tab-".concat(id),
+    onClick: handleClick,
+    onKeyDown: onKeyDown,
+    ref: assignRefs,
+    role: "tab",
+    size: size || 'normal',
+    tabIndex: isActive ? 0 : -1,
+    type: "button"
+  }), Icon && _react.default.createElement(Icon, {
+    size: "medium"
+  }), _react.default.createElement("span", null, title));
+}); // @ts-ignore
+
+Tab.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  title: _propTypes.default.string.isRequired,
+  icon: _propTypes.default.elementType,
+  disabled: _propTypes.default.bool
+};
+Tab.displayName = 'Tab';
+Tab.defaultProps = {
+  icon: undefined,
+  disabled: false
+};
+var _default = Tab;
+exports.default = _default;

package/lib/components/Tabs/Tab/schema.d.ts

@@ -0,0 +1,3 @@
+declare const schema: any;
+export default schema;
+//# sourceMappingURL=schema.d.ts.map

package/lib/components/Tabs/Tab/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tab/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAmC,CAAC;AAqBhD,eAAe,MAAM,CAAC"}

package/lib/components/Tabs/Tab/styles.d.ts

@@ -0,0 +1,7 @@
+import { TabProps } from '.';
+interface StyledTabProps extends Omit<TabProps, 'title'> {
+    size: 'normal' | 'large';
+}
+export declare const TabContainer: import("styled-components").StyledComponent<"button", any, StyledTabProps, never>;
+export {};
+//# sourceMappingURL=styles.d.ts.map

package/lib/components/Tabs/Tab/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tab/styles.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;AAE7B,UAAU,cAAe,SAAQ,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC;IACtD,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC1B;AAMD,eAAO,MAAM,YAAY,mFAgFxB,CAAC"}

package/lib/components/Tabs/Tab/styles.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabContainer = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _designTokens = require("@decisiv/design-tokens");
+
+var _BaseButton = _interopRequireDefault(require("../../../atoms/BaseButton"));
+
+var _styleModifiers = require("../../../utils/styleModifiers");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+/* eslint-disable import/prefer-default-export */
+var base = _designTokens.color.base,
+    interaction = _designTokens.color.interaction,
+    opacity = _designTokens.color.opacity;
+var shadowColor = (0, _toColorString.default)(interaction.pacificOcean40);
+var yPaddingBySize = {
+  normal: 5,
+  large: 10
+};
+var TabContainer = (0, _styledComponents.default)(_BaseButton.default).withConfig({
+  displayName: "styles__TabContainer",
+  componentId: "sc-3l38e9-0"
+})(["color:", ";align-items:center;background:", ";border-radius:2px 2px 0 0;border:1px solid transparent;cursor:default;display:flex;font-size:", ";line-height:1.4;margin:0;outline:none;padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";position:relative;font-weight:", ";&::after{background:", ";bottom:-1px;content:'';height:3px;left:2px;opacity:0;position:absolute;right:2px;}&:hover{color:", ";}&[aria-selected='true']{border-color:", ";border-bottom-color:transparent;color:", ";margin-bottom:-1px;padding-bottom:", ";&:focus{border-color:", ";border-bottom-color:", ";box-shadow:inset 0 0 0 2px ", ";&::after{opacity:1;}}}&:disabled{color:", ";cursor:not-allowed;}> *:not(span){margin-top:-1px;}> * + span{margin-left:", ";}", ";"], (0, _toColorString.default)(interaction.pacificOcean), (0, _toColorString.default)(base.snowWhite), (0, _rem.default)(_designTokens.typography.size.scale[1]), (0, _rem.default)(yPaddingBySize.normal + 3), (0, _rem.default)(15), (0, _rem.default)(yPaddingBySize.normal - 1), (0, _rem.default)(15), _designTokens.typography.weight.alias.medium, (0, _toColorString.default)(base.snowWhite), (0, _toColorString.default)(interaction.indianOcean), (0, _toColorString.default)(base.quarterMoon), (0, _toColorString.default)(base.alaskanHusky), (0, _rem.default)(yPaddingBySize.normal), (0, _toColorString.default)(interaction.pacificOcean), shadowColor, shadowColor, (0, _toColorString.default)(opacity.charcoal40), (0, _rem.default)(8), (0, _styleModifiers.when)('size', 'large', (0, _styledComponents.css)(["font-size:", ";line-height:1.2;padding-bottom:", ";padding-top:", ";&[aria-selected='true']{padding-bottom:", ";}"], (0, _rem.default)(_designTokens.typography.size.scale[2]), (0, _rem.default)(yPaddingBySize.large - 1), (0, _rem.default)(yPaddingBySize.large + 3), (0, _rem.default)(yPaddingBySize.large))));
+exports.TabContainer = TabContainer;