@axinom/mosaic-ui 0.32.0-rc.9 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.32.0-rc.9",
+  "version": "0.32.0",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.5-rc.9",
+    "@axinom/mosaic-core": "^0.4.5",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -102,5 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8dbe4d298b09732efa3563679e044b527aa0d6e3"
+  "gitHead": "b0c12ef914e4ead795480b4fc90b13bc1088bd3f"
 }

package/src/components/Actions/Action/Action.spec.tsx

@@ -1,10 +1,10 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { BrowserRouter as Router, Link } from 'react-router-dom';
+import { Link, BrowserRouter as Router } from 'react-router-dom';
 import { noop } from '../../../helpers/utils';
 import { TextButton } from '../../Buttons';
-import { ConfirmationConfig, ConfirmDialog } from '../../ConfirmDialog';
+import { ConfirmDialog, ConfirmationConfig } from '../../ConfirmDialog';
 import { IconName, Icons } from '../../Icons';
 import {
   Action,

package/src/components/Actions/Action/Action.tsx

@@ -2,8 +2,8 @@ import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import {
-  ConfirmationConfig,
   ConfirmDialog,
+  ConfirmationConfig,
   useConfirmationDelay,
 } from '../../ConfirmDialog';
 import { IconName, Icons } from '../../Icons';

package/src/components/FormElements/ToggleButton/ToggleButton.tsx

@@ -3,9 +3,9 @@ import React, { useEffect, useState } from 'react';
 import { noop } from '../../../helpers/utils';
 import { CommonJsButtonOptions } from '../../Buttons/Button.model';
 import {
+  ConfirmDialog,
   ConfirmationConfig,
   ConfirmationMode,
-  ConfirmDialog,
 } from '../../ConfirmDialog';
 import { BaseFormControl } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';

package/src/components/List/List.spec.tsx

@@ -92,6 +92,29 @@ describe('List', () => {
     expect(props.columnSizes).toBe('1fr 1fr 1fr');
   });
 
+  it.each([
+    { value: true, visible: true },
+    { value: () => true, visible: true },
+    { value: () => false, visible: false },
+  ])(
+    'does add an extra column if there is an action button',
+    ({ value, visible }) => {
+      const wrapper = mount(
+        <List
+          columns={mockListColumns}
+          data={mockListData}
+          showActionButton={value}
+        />,
+      );
+
+      const rows = wrapper.find(ListRow);
+      const props = rows.first().props();
+
+      expect(props.columnSizes).toBe('1fr 1fr 1fr 50px');
+      expect(props.showActionButton).toBe(visible);
+    },
+  );
+
   it.each`
     data                                                                   | count
     ${[{ row: 'one' }, { row: 'two' }, { row: 'three' }]}                  | ${3}

package/src/components/List/List.stories.tsx

@@ -124,6 +124,14 @@ const meta: Meta<StoryListType> = {
       description: `<b>[Storybook only]</b> The number of rows to display.
       The story will generate the requests amount of items and assign it to the <code>data</code> prop.`,
     },
+    showActionButton: {
+      ...groups.showActionButton,
+      description: `Whether to show the action button in the header row.`,
+      options: [true, false, 'random'],
+      mapping: {
+        random: (): boolean => (Math.random() > 0.5 ? true : false),
+      },
+    },
   },
   args: {
     columns: defaultColumns,

package/src/components/List/List.tsx

@@ -73,7 +73,7 @@ export interface ListProps<T extends Data> {
    * Defines whether an action button will be rendered (default: true)
    * Will not render if selectMode is not 'None'
    */
-  showActionButton?: boolean;
+  showActionButton?: boolean | ((data: T) => boolean);
   /** Defines when the loading of the next page is triggered. The number represents the number of row left, before a load is triggered. (default: 10) */
   loadingTriggerOffset?: number;
   /** Defines how the list data should be sorted */
@@ -245,7 +245,7 @@ export const List = <T extends Data>({
 
   const columnSizes = getColumnsSizeDefinition(
     columns,
-    showActionButton,
+    Boolean(showActionButton),
     selectionMode,
     !!inlineMenuActions,
   );
@@ -345,7 +345,8 @@ export const List = <T extends Data>({
           verticalTextAlign={verticalTextAlign}
           selectionMode={selectionMode}
           showActionButton={
-            showActionButton && selectionMode === ListSelectMode.None
+            selectionMode === ListSelectMode.None &&
+            getActionButtonVisibility(item.data, showActionButton)
           }
           showCheckMark={selectionMode === ListSelectMode.Single}
           showItemCheckbox={selectionMode === ListSelectMode.Multi}
@@ -383,3 +384,14 @@ export const List = <T extends Data>({
     </div>
   );
 };
+
+function getActionButtonVisibility<T>(
+  data: T,
+  showActionButton: boolean | ((item: T) => boolean),
+): boolean {
+  if (typeof showActionButton === 'boolean') {
+    return showActionButton;
+  }
+
+  return showActionButton(data);
+}

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.spec.tsx

@@ -4,7 +4,7 @@ import { act } from 'react-dom/test-utils';
 import { Link, BrowserRouter as Router } from 'react-router-dom';
 import { noop } from '../../../helpers/utils';
 import { TextButton } from '../../Buttons';
-import { ConfirmationConfig, ConfirmDialog } from '../../ConfirmDialog';
+import { ConfirmDialog, ConfirmationConfig } from '../../ConfirmDialog';
 import { IconName } from '../../Icons';
 import {
   PageHeaderAction,

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.tsx

@@ -3,9 +3,9 @@ import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { noop } from '../../../helpers/utils';
 import {
+  ConfirmDialog,
   ConfirmationConfig,
   ConfirmationMode,
-  ConfirmDialog,
   useConfirmationDelay,
 } from '../../ConfirmDialog';
 import { IconName, Icons } from '../../Icons';

package/src/components/PageHeader/PageHeaderBulkActions/PageHeaderBulkActions.tsx

@@ -6,8 +6,8 @@ import { ConfirmationMode } from '../../ConfirmDialog';
 import { IconName } from '../../Icons';
 import { PageHeaderProps } from '../PageHeader.model';
 import {
-  isPageHeaderJsAction,
   PageHeaderAction,
+  isPageHeaderJsAction,
 } from '../PageHeaderAction/PageHeaderAction';
 import {
   PageHeaderActionProps,