@qoretechnologies/reqore 0.34.13 → 0.35.0

package/__tests__/helpers/table.test.tsx

@@ -0,0 +1,47 @@
+import {
+  getColumnsCount,
+  getOnlyShownColumns,
+  hasHiddenColumns,
+  updateColumnData,
+} from '../../src/components/Table/helpers';
+import { testColumns } from '../../src/mock/tableData';
+
+test('Updates top level column width', () => {
+  const columns = [...testColumns];
+
+  expect(columns[0].width).toBe(50);
+
+  const newColumns = updateColumnData(columns, 'id', 'resizedWidth', 100);
+
+  expect(newColumns[0].width).toBe(50);
+  expect(newColumns[0].resizedWidth).toBe(100);
+});
+
+test('Updates group level column width', () => {
+  const columns = [...testColumns];
+
+  expect(columns[1].header!.columns![0].width).toBe(150);
+
+  const newColumns = updateColumnData(columns, 'firstName', 'resizedWidth', 250);
+
+  expect(newColumns[1].header!.columns![0].width).toBe(150);
+  expect(newColumns[1].header!.columns![0].resizedWidth).toBe(250);
+});
+
+test('Filters out hidden columns', () => {
+  const columns = [...testColumns];
+
+  expect(getColumnsCount(columns)).toBe(8);
+
+  columns[1].header!.columns![0].show = false;
+  columns[1].header!.columns![1].show = false;
+  columns[3].show = false;
+  columns[4].header!.columns![1].show = false;
+
+  const newColumns = getOnlyShownColumns(columns);
+
+  expect(getColumnsCount(newColumns)).toBe(4);
+  expect(hasHiddenColumns(columns)).toBe(true);
+  expect(hasHiddenColumns(newColumns)).toBe(false);
+  expect(newColumns[1].dataId).toBe('address');
+});

package/__tests__/table.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { ReqoreLayoutContent, ReqoreTable, ReqoreUIProvider } from '../src';
-import { IReqoreTableColumn, IReqoreTableSort } from '../src/components/Table';
+import { IReqoreTableProps } from '../src/components/Table';
 import tableData from '../src/mock/tableData';
 
 test('Renders basic <Table /> properly', () => {
@@ -13,39 +13,44 @@ test('Renders basic <Table /> properly', () => {
     </ReqoreUIProvider>
   );
 
-  expect(document.querySelectorAll('.reqore-table-header-cell').length).toBe(8);
+  expect(document.querySelectorAll('.reqore-table-column-group-header').length).toBe(2);
+  expect(document.querySelectorAll('.reqore-table-header-cell').length).toBe(10);
   expect(document.querySelectorAll('.reqore-table-row').length).toBe(10);
 });
 
 test('Renders <Table /> with grouped columns properly', () => {
-  const data = {
+  const data: IReqoreTableProps = {
     ...tableData,
     columns: [
       {
         dataId: 'id',
-        header: 'ID',
+        header: {
+          label: 'ID',
+        },
         width: 50,
         align: 'center',
       },
       {
-        header: 'Name',
+        header: {
+          label: 'Name',
+          columns: [
+            { dataId: 'firstName', header: { label: 'First Name' }, width: 150, grow: 2 },
+            { dataId: 'lastName', header: { label: 'Last Name' }, width: 150, grow: 1 },
+          ],
+        },
         dataId: 'name',
         grow: 3,
-        columns: [
-          { dataId: 'firstName', header: 'First Name', width: 150, grow: 2 },
-          { dataId: 'lastName', header: 'Last Name', width: 150, grow: 1 },
-        ],
       },
-      { dataId: 'address', header: 'Address', width: 300, grow: 2 },
+      { dataId: 'address', header: { label: 'Address' }, width: 300, grow: 2 },
       {
         dataId: 'age',
-        header: 'Really long age header',
+        header: { label: 'Really long age header' },
         width: 50,
         align: 'center',
       },
-      { dataId: 'occupation', header: 'Ocuppation', width: 200 },
-      { dataId: 'group', header: 'Group', width: 150 },
-    ] as IReqoreTableColumn[],
+      { dataId: 'occupation', header: { label: 'Ocuppation' }, width: 200 },
+      { dataId: 'group', header: { label: 'Group' }, width: 150 },
+    ],
   };
 
   render(
@@ -57,39 +62,43 @@ test('Renders <Table /> with grouped columns properly', () => {
   );
 
   expect(document.querySelectorAll('.reqore-table-column-group').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-table-header-cell').length).toBe(7);
+  expect(document.querySelectorAll('.reqore-table-header-cell').length).toBe(8);
 });
 
 test('Renders <Table /> with custom content', () => {
-  const data = {
+  const data: IReqoreTableProps = {
     ...tableData,
     columns: [
       {
         dataId: 'id',
-        header: 'ID',
+        header: { label: 'ID' },
         width: 50,
         align: 'center',
-        content: ({ id }) => <span>ID {id}</span>,
+        cell: {
+          content: ({ id }) => <span>ID {id}</span>,
+        },
       },
       {
-        header: 'Name',
+        header: {
+          label: 'Name',
+          columns: [
+            { dataId: 'firstName', header: { label: 'First Name' }, width: 150, grow: 2 },
+            { dataId: 'lastName', header: { label: 'Last Name' }, width: 150, grow: 1 },
+          ],
+        },
         dataId: 'name',
         grow: 3,
-        columns: [
-          { dataId: 'firstName', header: 'First Name', width: 150, grow: 2 },
-          { dataId: 'lastName', header: 'Last Name', width: 150, grow: 1 },
-        ],
       },
-      { dataId: 'address', header: 'Address', width: 300, grow: 2 },
+      { dataId: 'address', header: { label: 'Address' }, width: 300, grow: 2 },
       {
         dataId: 'age',
-        header: 'Really long age header',
+        header: { label: 'Really long age header' },
         width: 50,
         align: 'center',
       },
-      { dataId: 'occupation', header: 'Ocuppation', width: 200 },
-      { dataId: 'group', header: 'Group', width: 150 },
-    ] as IReqoreTableColumn[],
+      { dataId: 'occupation', header: { label: 'Ocuppation' }, width: 200 },
+      { dataId: 'group', header: { label: 'Group' }, width: 150 },
+    ],
   };
 
   render(
@@ -101,54 +110,68 @@ test('Renders <Table /> with custom content', () => {
   );
 
   const firstRow = document.querySelector('.reqore-table-row');
-  const idCell = firstRow.querySelector('.reqore-table-cell');
+  const idCell = firstRow!.querySelector('.reqore-table-cell');
 
-  expect(idCell.textContent).toBe('ID 1');
+  expect(idCell!.textContent).toBe('ID 1');
 });
 
 test('Renders <Table /> with predefined content', () => {
-  const data = {
+  const data: IReqoreTableProps = {
     ...tableData,
     columns: [
       {
         dataId: 'id',
-        header: 'ID',
+        header: { label: 'ID' },
         width: 50,
         align: 'center',
-        content: 'tag:info',
+        cell: {
+          content: 'tag:info',
+        },
       },
       {
-        header: 'Name',
+        header: {
+          label: 'Name',
+          columns: [
+            {
+              dataId: 'firstName',
+              header: { label: 'First Name' },
+              width: 150,
+              grow: 2,
+              cell: {
+                content: 'tag:#000000',
+              },
+            },
+            {
+              dataId: 'lastName',
+              header: { label: 'Last Name' },
+              width: 150,
+              grow: 1,
+              cell: {
+                content: 'title:success',
+              },
+            },
+          ],
+        },
         dataId: 'name',
         grow: 3,
-        columns: [
-          {
-            dataId: 'firstName',
-            header: 'First Name',
-            width: 150,
-            grow: 2,
-            content: 'tag:#000000',
-          },
-          {
-            dataId: 'lastName',
-            header: 'Last Name',
-            width: 150,
-            grow: 1,
-            content: 'title:success',
-          },
-        ],
       },
-      { dataId: 'address', header: 'Address', width: 300, grow: 2, content: 'text:warning' },
+      {
+        dataId: 'address',
+        header: { label: 'Address' },
+        width: 300,
+        grow: 2,
+        cell: { content: 'text:warning' },
+      },
       {
         dataId: 'age',
-        header: 'Really long age header',
+        header: { label: 'Really long age header' },
         width: 50,
         align: 'center',
       },
-      { dataId: 'occupation', header: 'Ocuppation', width: 200 },
-      { dataId: 'group', header: 'Group', width: 150 },
-      { dataId: 'date', header: 'Date', content: 'time-ago' },
-    ] as IReqoreTableColumn[],
+      { dataId: 'occupation', header: { label: 'Ocuppation' }, width: 200 },
+      { dataId: 'group', header: { label: 'Group' }, width: 150 },
+      { dataId: 'date', header: { label: 'Date' }, cell: { content: 'time-ago' } },
+    ],
   };
 
   render(
@@ -161,11 +184,11 @@ test('Renders <Table /> with predefined content', () => {
 
   const firstRow = document.querySelector('.reqore-table-row');
 
-  const idCell = firstRow.querySelectorAll('.reqore-table-cell')[0];
-  const firstNameCell = firstRow.querySelectorAll('.reqore-table-cell')[1];
-  const lastNameCell = firstRow.querySelectorAll('.reqore-table-cell')[2];
-  const addressCell = firstRow.querySelectorAll('.reqore-table-cell')[3];
-  const dateCell = firstRow.querySelectorAll('.reqore-table-cell')[7];
+  const idCell = firstRow!.querySelectorAll('.reqore-table-cell')[0];
+  const firstNameCell = firstRow!.querySelectorAll('.reqore-table-cell')[1];
+  const lastNameCell = firstRow!.querySelectorAll('.reqore-table-cell')[2];
+  const addressCell = firstRow!.querySelectorAll('.reqore-table-cell')[3];
+  const dateCell = firstRow!.querySelectorAll('.reqore-table-cell')[7];
 
   expect(idCell.querySelector('.reqore-tag')).toBeTruthy();
   expect(firstNameCell.querySelector('.reqore-tag')).toBeTruthy();
@@ -175,33 +198,33 @@ test('Renders <Table /> with predefined content', () => {
 });
 
 test('Sorting on <Table /> works properly', () => {
-  const data = {
+  const data: IReqoreTableProps = {
     ...tableData,
     columns: [
       {
         dataId: 'id',
-        header: 'ID',
+        header: { label: 'ID' },
         width: 50,
         align: 'center',
         sortable: true,
       },
-      { dataId: 'firstName', header: 'First Name', width: 150 },
-      { dataId: 'lastName', header: 'Last Name', width: 150, sortable: true },
-      { dataId: 'address', header: 'Address', width: 300, grow: 2 },
+      { dataId: 'firstName', header: { label: 'First Name' }, width: 150 },
+      { dataId: 'lastName', header: { label: 'Last Name' }, width: 150, sortable: true },
+      { dataId: 'address', header: { label: 'Address' }, width: 300, grow: 2 },
       {
         dataId: 'age',
-        header: 'Really long age header',
+        header: { label: 'Really long age header' },
         width: 50,
         align: 'center',
         sortable: true,
       },
-      { dataId: 'occupation', header: 'Ocuppation', width: 200 },
-      { dataId: 'group', header: 'Group', width: 150 },
-    ] as IReqoreTableColumn[],
+      { dataId: 'occupation', header: { label: 'Ocuppation' }, width: 200 },
+      { dataId: 'group', header: { label: 'Group' }, width: 150 },
+    ],
     sort: {
       by: 'id',
       direction: 'desc',
-    } as IReqoreTableSort,
+    },
   };
 
   const fn = jest.fn();
@@ -215,16 +238,16 @@ test('Sorting on <Table /> works properly', () => {
   );
 
   const firstRow = document.querySelector('.reqore-table-row');
-  const idCell = firstRow.querySelector('.reqore-table-cell');
+  const idCell = firstRow!.querySelector('.reqore-table-cell');
 
-  expect(idCell.textContent).toBe('1000');
+  expect(idCell!.textContent).toBe('1000');
 
   const lastNameHeaderCell = document.querySelectorAll('.reqore-table-header-cell')[2];
 
   fireEvent.click(lastNameHeaderCell);
   expect(fn).toHaveBeenCalledWith({ by: 'lastName', direction: 'desc' });
 
-  const lastNameCell = firstRow.querySelectorAll('.reqore-table-cell')[2];
+  const lastNameCell = firstRow!.querySelectorAll('.reqore-table-cell')[2];
 
   expect(lastNameCell.textContent).toBe('Zold');
 
@@ -232,7 +255,7 @@ test('Sorting on <Table /> works properly', () => {
 
   expect(fn).toHaveBeenLastCalledWith({ by: 'lastName', direction: 'asc' });
   expect(lastNameCell.textContent).toBe('Abbess');
-  expect(idCell.textContent).toBe('543');
+  expect(idCell!.textContent).toBe('543');
 });
 
 test('Rows on <Table /> can be selected', () => {
@@ -252,16 +275,16 @@ test('Rows on <Table /> can be selected', () => {
   );
 
   const firstRow = document.querySelector('.reqore-table-row');
-  const firstCheckCell = firstRow.querySelector('.reqore-table-cell');
+  const firstCheckCell = firstRow!.querySelector('.reqore-table-cell');
 
-  fireEvent.click(firstCheckCell);
+  fireEvent.click(firstCheckCell!);
 
   expect(fn).toHaveBeenCalledWith([1]);
 
   const secondRow = document.querySelectorAll('.reqore-table-row')[1];
   const secondCheckCell = secondRow.querySelector('.reqore-table-cell');
 
-  fireEvent.click(secondCheckCell);
+  fireEvent.click(secondCheckCell!);
 
   expect(fn).toHaveBeenLastCalledWith([1, 2]);
 });
@@ -285,18 +308,18 @@ test('Rows on <Table /> cannot be selected if _selectId is missing', () => {
   const thirdRow = document.querySelectorAll('.reqore-table-row')[2];
   const thirdCheckCell = thirdRow.querySelector('.reqore-table-cell');
 
-  fireEvent.click(thirdCheckCell);
+  fireEvent.click(thirdCheckCell!);
 
   const fourthRow = document.querySelectorAll('.reqore-table-row')[3];
   const fourthCheckCell = fourthRow.querySelector('.reqore-table-cell');
 
-  fireEvent.click(fourthCheckCell);
+  fireEvent.click(fourthCheckCell!);
 
   expect(fn).toHaveBeenCalledTimes(1);
 });
 
 test('Rows on <Table /> are all selected/deselected when clicking on header', () => {
-  const data = {
+  const data: IReqoreTableProps = {
     ...tableData,
     selectable: true,
   };
@@ -312,91 +335,103 @@ test('Rows on <Table /> are all selected/deselected when clicking on header', ()
   );
 
   const header = document.querySelector('.reqore-table-header-wrapper');
-  const firstHeaderCell = header.querySelector('.reqore-table-header-cell');
+  const firstHeaderCell = header!.querySelector('.reqore-table-header-cell');
 
-  fireEvent.click(firstHeaderCell);
+  fireEvent.click(firstHeaderCell!);
 
-  const selectableData: number[] = tableData.data
+  const selectableData = tableData.data
     .filter((datum) => datum._selectId ?? false)
     .map((datum) => datum._selectId);
 
   expect(fn).toHaveBeenCalledWith(selectableData);
 
-  fireEvent.click(firstHeaderCell);
+  fireEvent.click(firstHeaderCell!);
 
   expect(fn).toHaveBeenLastCalledWith([]);
 
   const firstRow = document.querySelector('.reqore-table-row');
-  const firstCheckCell = firstRow.querySelector('.reqore-table-cell');
+  const firstCheckCell = firstRow!.querySelector('.reqore-table-cell');
 
-  fireEvent.click(firstCheckCell);
-  fireEvent.click(firstHeaderCell);
+  fireEvent.click(firstCheckCell!);
+  fireEvent.click(firstHeaderCell!);
 
   expect(fn).toHaveBeenLastCalledWith(selectableData);
 });
 
 test('Cells on <Table /> are interactive', () => {
   const fn = jest.fn();
-  const data = {
+  const data: IReqoreTableProps = {
     ...tableData,
     columns: [
       {
         dataId: 'id',
-        header: 'ID',
+        header: { label: 'ID', tooltip: 'Custom ID tooltip nice' },
         width: 50,
         align: 'center',
         sortable: true,
-        tooltip: 'Custom ID tooltip nice',
-        onCellClick: ({ id }) => {
-          fn(id);
+        cell: {
+          onClick: ({ id }) => {
+            fn(id);
+          },
         },
       },
       {
-        header: 'Name',
+        header: {
+          label: 'Name',
+          columns: [
+            {
+              dataId: 'firstName',
+              header: {
+                label: 'First Name',
+                icon: 'SlideshowLine',
+                effect: {
+                  gradient: {
+                    colors: {
+                      0: 'success',
+                      100: 'info',
+                    },
+                  },
+                },
+              },
+              width: 150,
+              grow: 2,
+            },
+            {
+              dataId: 'lastName',
+              header: { label: 'Last Name', icon: 'SlideshowLine' },
+              width: 150,
+              grow: 1,
+              sortable: true,
+            },
+          ],
+        },
         dataId: 'name',
         grow: 3,
-        columns: [
-          {
-            icon: 'SlideshowLine',
-            dataId: 'firstName',
-            header: 'First Name',
-            width: 150,
-            grow: 2,
-          },
-          {
-            icon: 'SlideshowLine',
-            dataId: 'lastName',
-            header: 'Last Name',
-            width: 150,
-            grow: 1,
-            sortable: true,
-          },
-        ],
       },
       {
         dataId: 'address',
-        header: 'Address',
+        header: { label: 'Address', onClick: () => alert('clicked address') },
         width: 300,
         grow: 2,
-        onClick: () => alert('clicked address'),
       },
       {
-        icon: 'User4Line',
         dataId: 'age',
-        header: 'Really long age header',
+        header: { label: 'Really long age header', icon: 'User4Line' },
         width: 50,
         align: 'center',
         sortable: true,
       },
       {
-        header: 'Data',
+        header: {
+          label: 'Data',
+          columns: [
+            { dataId: 'occupation', header: { label: 'Ocuppation' }, width: 200 },
+            { dataId: 'group', header: { label: 'Groups' }, width: 150 },
+          ],
+        },
         dataId: 'data',
-        columns: [
-          { dataId: 'occupation', header: 'Ocuppation', width: 200 },
-          { dataId: 'group', header: 'Groups', width: 150 },
-        ],
       },
-    ] as IReqoreTableColumn[],
+    ],
   };
 
   render(
@@ -408,9 +443,9 @@ test('Cells on <Table /> are interactive', () => {
   );
 
   const firstRow = document.querySelector('.reqore-table-row');
-  const firstCheckCell = firstRow.querySelector('.reqore-table-cell');
+  const firstCheckCell = firstRow!.querySelector('.reqore-table-cell');
 
-  fireEvent.click(firstCheckCell);
+  fireEvent.click(firstCheckCell!);
 
   expect(fn).toHaveBeenCalledWith(1);
 });

package/dist/components/Button/index.d.ts

@@ -30,6 +30,8 @@ export interface IReqoreButtonProps extends React.HTMLAttributes<HTMLButtonEleme
     descriptionEffect?: IReqoreEffect;
     label?: React.HTMLAttributes<HTMLButtonElement>['children'];
     as?: string | React.ElementType;
+    grow?: 1 | 2 | 3 | 4;
+    rounded?: boolean;
 }
 export interface IReqoreButtonStyle extends Omit<IReqoreButtonProps, 'intent'> {
     theme: IReqoreTheme;

package/dist/components/Button/index.d.ts.map

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

package/dist/components/Button/index.js

@@ -77,7 +77,7 @@ var getButtonMainColor = function (theme, color) {
     }
     return theme.main;
 };
-exports.StyledAnimatedTextWrapper = styled_components_1["default"].span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n  position: relative;\n  text-align: ", ";\n  display: flex;\n  flex-flow: column;\n  align-items: ", ";\n"], ["\n  overflow: hidden;\n  position: relative;\n  text-align: ", ";\n  display: flex;\n  flex-flow: column;\n  align-items: ", ";\n"])), function (_a) {
+exports.StyledAnimatedTextWrapper = styled_components_1["default"].span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-width: 5px;\n  overflow: hidden;\n  position: relative;\n  text-align: ", ";\n  display: flex;\n  flex-flow: column;\n  align-items: ", ";\n"], ["\n  min-width: 5px;\n  overflow: hidden;\n  position: relative;\n  text-align: ", ";\n  display: flex;\n  flex-flow: column;\n  align-items: ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {
@@ -99,7 +99,7 @@ exports.StyledInvisibleContent = (0, styled_components_1["default"])(Effect_1.St
     return !wrap
         ? (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          white-space: nowrap;\n        "], ["\n          white-space: nowrap;\n        "]))) : (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n          word-break: break-word;\n        "], ["\n          word-break: break-word;\n        "])));
 });
-exports.StyledButton = (0, styled_components_1["default"])(Effect_1.StyledEffect)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  justify-content: center;\n  margin: 0;\n  font-weight: 600;\n  position: relative;\n  overflow: hidden;\n  vertical-align: middle;\n  border: ", ";\n  padding: 0 ", "px;\n  font-size: ", "px;\n\n  min-height: ", "px;\n  min-width: ", "px;\n  max-width: ", ";\n  ", "\n\n  flex: ", ";\n  align-self: ", ";\n\n  border-radius: ", "px;\n\n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:disabled {\n    ", ";\n  }\n\n  &:focus,\n  &:active {\n    outline: none;\n  }\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  .reqore-button-description {\n    padding-bottom: ", "px;\n  }\n"], ["\n  display: flex;\n  flex-flow: column;\n  justify-content: center;\n  margin: 0;\n  font-weight: 600;\n  position: relative;\n  overflow: hidden;\n  vertical-align: middle;\n  border: ", ";\n  padding: 0 ", "px;\n  font-size: ", "px;\n\n  min-height: ", "px;\n  min-width: ", "px;\n  max-width: ", ";\n  ", "\n\n  flex: ", ";\n  align-self: ", ";\n\n  border-radius: ", "px;\n\n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:disabled {\n    ", ";\n  }\n\n  &:focus,\n  &:active {\n    outline: none;\n  }\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  .reqore-button-description {\n    padding-bottom: ", "px;\n  }\n"])), function (_a) {
+exports.StyledButton = (0, styled_components_1["default"])(Effect_1.StyledEffect)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  justify-content: center;\n  margin: 0;\n  font-weight: 600;\n  position: relative;\n  overflow: hidden;\n  vertical-align: middle;\n  border: ", ";\n  padding: 0 ", "px;\n  font-size: ", "px;\n\n  min-height: ", "px;\n  min-width: ", "px;\n  max-width: ", ";\n  ", "\n\n  flex: ", ";\n  flex-grow: ", ";\n  align-self: ", ";\n\n  border-radius: ", "px;\n\n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:disabled {\n    ", ";\n  }\n\n  &:focus,\n  &:active {\n    outline: none;\n  }\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  .reqore-button-description {\n    padding-bottom: ", "px;\n  }\n"], ["\n  display: flex;\n  flex-flow: column;\n  justify-content: center;\n  margin: 0;\n  font-weight: 600;\n  position: relative;\n  overflow: hidden;\n  vertical-align: middle;\n  border: ", ";\n  padding: 0 ", "px;\n  font-size: ", "px;\n\n  min-height: ", "px;\n  min-width: ", "px;\n  max-width: ", ";\n  ", "\n\n  flex: ", ";\n  flex-grow: ", ";\n  align-self: ", ";\n\n  border-radius: ", "px;\n\n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:disabled {\n    ", ";\n  }\n\n  &:focus,\n  &:active {\n    outline: none;\n  }\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  .reqore-button-description {\n    padding-bottom: ", "px;\n  }\n"])), function (_a) {
     var theme = _a.theme, color = _a.color, flat = _a.flat;
     return !flat ? "1px solid ".concat((0, colors_1.changeLightness)(getButtonMainColor(theme, color), 0.2)) : 0;
 }, function (_a) {
@@ -127,12 +127,15 @@ exports.StyledButton = (0, styled_components_1["default"])(Effect_1.StyledEffect
 }, function (_a) {
     var fluid = _a.fluid, fixed = _a.fixed;
     return (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto');
+}, function (_a) {
+    var grow = _a.grow;
+    return grow;
 }, function (_a) {
     var fixed = _a.fixed, fluid = _a.fluid;
     return (fixed ? 'flex-start' : fluid ? 'stretch' : undefined);
 }, function (_a) {
-    var size = _a.size;
-    return sizes_1.RADIUS_FROM_SIZE[size];
+    var size = _a.size, rounded = _a.rounded;
+    return rounded === false ? undefined : sizes_1.RADIUS_FROM_SIZE[size];
 }, function (_a) {
     var minimal = _a.minimal, color = _a.color;
     if (minimal) {