@axinom/mosaic-ui 0.64.0-rc.11 → 0.64.0-rc.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.64.0-rc.11",
+  "version": "0.64.0-rc.13",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "309b232320896ccf706d8adb4bd6b38be6499e94"
+  "gitHead": "1c5e1d24fa53ea23798a80b5e4d8b13eb2426e42"
 }

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

@@ -9,6 +9,7 @@ import { Column, ListElement, ListSelectMode, SortData } from './List.model';
 import { ListHeader } from './ListHeader/ListHeader';
 import { ListRow } from './ListRow/ListRow';
 import { ListRowLoader } from './ListRow/ListRowLoader';
+import { ListRowRenderer } from './ListRowRenderer/ListRowRenderer';
 
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 
@@ -475,7 +476,10 @@ describe('List', () => {
       />,
     );
 
-    const onTriggered = wrapper.find(ListRow).first().prop('onTriggered');
+    const onTriggered = wrapper
+      .find(ListRowRenderer)
+      .first()
+      .prop('onTriggered');
     onTriggered!();
 
     expect(spy).toHaveBeenCalledTimes(1);
@@ -605,4 +609,208 @@ describe('List', () => {
 
     expect(listRow.props().actionSize).toBe(mockSize);
   });
+
+  describe('isRowDisabled', () => {
+    const mountListWithDisabledRows = (additionalProps = {}) => {
+      return mount(
+        <List
+          columns={mockListColumns}
+          data={mockListData}
+          {...additionalProps}
+        />,
+      );
+    };
+
+    const expectRowDisabledStates = (
+      wrapper: any,
+      expectedStates: boolean[],
+    ) => {
+      const rows = wrapper.find(ListRow);
+      expectedStates.forEach((expected, index) => {
+        expect(rows.at(index).prop('isRowDisabled')).toBe(expected);
+      });
+    };
+
+    const triggerSelectAll = (wrapper: any) => {
+      const headerRow = wrapper.find(ListHeader);
+      act(() => {
+        headerRow.prop('onCheckboxToggled')!(true);
+      });
+      wrapper.update();
+    };
+
+    it('should disable rows based on custom isRowDisabled function', () => {
+      const isRowDisabledMock = jest.fn(
+        (data: ListTestData, _index: number) => data.id === '2',
+      );
+
+      const wrapper = mountListWithDisabledRows({
+        isRowDisabled: isRowDisabledMock,
+      });
+
+      // Verify disabled states
+      expectRowDisabledStates(wrapper, [false, true, false]);
+
+      // Verify function calls
+      expect(isRowDisabledMock).toHaveBeenCalledTimes(3);
+      mockListData.forEach((data, index) => {
+        expect(isRowDisabledMock).toHaveBeenNthCalledWith(
+          index + 1,
+          data,
+          index,
+        );
+      });
+    });
+
+    describe('selectAll behavior', () => {
+      const selectAllProps = {
+        selectionMode: ListSelectMode.Multi,
+        enableSelectAll: true,
+      };
+
+      it('should disable rows when selectAll is enabled and enableSelectAllDeselect is false', () => {
+        const wrapper = mountListWithDisabledRows({
+          ...selectAllProps,
+          enableSelectAllDeselect: false,
+        });
+
+        // Initially all rows should be enabled
+        expectRowDisabledStates(wrapper, [false, false, false]);
+
+        triggerSelectAll(wrapper);
+
+        // After selectAll, all rows should be disabled
+        expectRowDisabledStates(wrapper, [true, true, true]);
+
+        expect(wrapper.find(ListRow)).toHaveLength(mockListData.length);
+      });
+
+      it('should not disable rows when enableSelectAllDeselect is true', () => {
+        const wrapper = mountListWithDisabledRows({
+          ...selectAllProps,
+          enableSelectAllDeselect: true,
+        });
+
+        triggerSelectAll(wrapper);
+
+        // Rows should remain enabled when deselect is allowed
+        expectRowDisabledStates(wrapper, [false, false, false]);
+
+        expect(wrapper.find(ListRow)).toHaveLength(mockListData.length);
+      });
+
+      it('should combine custom isRowDisabled with selectAll disabled state', () => {
+        const isRowDisabledMock = jest.fn(
+          (data: ListTestData) => data.id === '1',
+        );
+
+        const wrapper = mountListWithDisabledRows({
+          ...selectAllProps,
+          enableSelectAllDeselect: false,
+          isRowDisabled: isRowDisabledMock,
+        });
+
+        triggerSelectAll(wrapper);
+
+        // All rows should be disabled (selectAll OR custom logic)
+        expectRowDisabledStates(wrapper, [true, true, true]);
+
+        expect(wrapper.find(ListRow)).toHaveLength(mockListData.length);
+      });
+    });
+
+    // Test different scenarios with parameterized tests
+    describe.each([
+      {
+        name: 'even indices disabled',
+        disableLogic: (_data: ListTestData, index: number) => index % 2 === 0,
+        expected: [true, false, true],
+      },
+      {
+        name: 'specific IDs disabled',
+        disableLogic: (data: ListTestData) => ['1', '3'].includes(data.id),
+        expected: [true, false, true],
+      },
+      {
+        name: 'title-based disabled',
+        disableLogic: (data: ListTestData) => data.title.includes('2'),
+        expected: [false, true, false],
+      },
+    ])('custom logic: $name', ({ disableLogic, expected }) => {
+      it(`should disable rows when ${expected.filter(Boolean).length} out of ${
+        expected.length
+      } match criteria`, () => {
+        const isRowDisabledMock = jest.fn(disableLogic);
+        const wrapper = mountListWithDisabledRows({
+          isRowDisabled: isRowDisabledMock,
+        });
+
+        expectRowDisabledStates(wrapper, expected);
+        expect(isRowDisabledMock).toHaveBeenCalledTimes(mockListData.length);
+      });
+    });
+  });
+
+  describe('customRowRenderer', () => {
+    const createSimpleCustomRenderer = (testId = 'custom-row') =>
+      jest.fn(() => <div data-test-id={testId}>Custom Row Content</div>);
+
+    it('should use custom row renderer when provided', () => {
+      const customRowRenderer = createSimpleCustomRenderer();
+      const wrapper = mount(
+        <List
+          columns={mockListColumns}
+          data={mockListData}
+          customRowRenderer={customRowRenderer}
+        />,
+      );
+
+      expect(customRowRenderer).toHaveBeenCalledTimes(3);
+      expect(wrapper.find('[data-test-id="custom-row"]')).toHaveLength(3);
+      expect(wrapper.find(ListRow)).toHaveLength(0); // No default ListRow components
+    });
+
+    it('should fall back to default ListRow when custom renderer returns null', () => {
+      const customRowRenderer = jest.fn(() => null);
+      const wrapper = mount(
+        <List
+          columns={mockListColumns}
+          data={mockListData}
+          customRowRenderer={customRowRenderer}
+        />,
+      );
+
+      expect(customRowRenderer).toHaveBeenCalledTimes(3);
+      expect(wrapper.find(ListRow)).toHaveLength(3);
+      expect(wrapper.find('[data-test-id="custom-row"]')).toHaveLength(0);
+    });
+
+    it('should pass ListRowProps to custom renderer', () => {
+      const customRowRenderer = jest.fn(() => (
+        <div data-test-id="custom-row">Custom</div>
+      ));
+
+      mount(
+        <List
+          columns={mockListColumns}
+          data={mockListData}
+          customRowRenderer={customRowRenderer}
+        />,
+      );
+
+      // Verify first call receives ListRowProps structure
+      expect(customRowRenderer).toHaveBeenNthCalledWith(
+        1,
+        expect.objectContaining({
+          data: mockListData[0],
+          columns: mockListColumns,
+          columnSizes: '1fr 1fr 1fr 50px',
+          itemSelected: false,
+          isRowDisabled: false,
+          onItemClicked: expect.any(Function),
+          onItemSelected: expect.any(Function),
+        }),
+      );
+    });
+  });
 });

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

@@ -11,6 +11,7 @@ import { Message } from '../Message';
 import { List, ListProps } from './List';
 import { Column, ColumnMap, ListSelectMode, SortData } from './List.model';
 import { sortStoryData, useLocalSort } from './List.stories.helper';
+import { ListRowProps } from './ListRow/ListRow';
 import { createStateRenderer } from './ListRow/Renderers';
 
 interface ListStoryData {
@@ -88,6 +89,8 @@ const groups = createGroups({
     'enableSelectAll',
     'showActionButton',
     'loadingTriggerOffset',
+    'isRowDisabled',
+    'customRowRenderer',
   ],
   Styling: [
     'horizontalTextAlign',
@@ -133,6 +136,79 @@ const meta: Meta<StoryListType> = {
         random: (): boolean => (Math.random() > 0.5 ? true : false),
       },
     },
+    isRowDisabled: {
+      ...groups.isRowDisabled,
+      description:
+        'Function to determine if a row should be disabled. Choose from predefined options or disable control for custom logic.',
+      control: {
+        type: 'select',
+      },
+      options: ['none', 'evenRows', 'oddRows', 'specificIds', 'randomRows'],
+      mapping: {
+        none: undefined,
+        evenRows: (_data: ListStoryData, index: number) => index % 2 === 0,
+        oddRows: (_data: ListStoryData, index: number) => index % 2 !== 0,
+        specificIds: (data: ListStoryData) => [1, 3, 5].includes(data.id),
+        randomRows: () => Math.random() > 0.7,
+      },
+    },
+    customRowRenderer: {
+      ...groups.customRowRenderer,
+      description:
+        'Custom renderer for rows. Choose from predefined options or disable control for custom logic.',
+      control: {
+        type: 'select',
+      },
+      options: ['none', 'customRenderer'],
+      mapping: {
+        none: undefined,
+        customRenderer: (props: ListRowProps<ListStoryData>) => {
+          const renderCustom = Math.random() < 0.3;
+
+          return renderCustom ? (
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: props.columnSizes,
+                columnGap: props.columnGap,
+                height: '50px',
+                placeItems: 'center left',
+                paddingLeft: '5px',
+                borderBottom: '1px solid #ddd',
+                backgroundColor: '#f5f5f5',
+                opacity: props.isRowDisabled ? 0.4 : 0.7,
+                cursor: props.isRowDisabled ? 'not-allowed' : 'pointer',
+              }}
+              onClick={() =>
+                !props.isRowDisabled &&
+                typeof props.onItemClicked === 'function' &&
+                props.onItemClicked(props.data)
+              }
+            >
+              <span>{props.data.id}</span>
+              <span>{props.data.title}</span>
+              <div
+                style={{
+                  display: 'grid',
+                  width: '100%',
+                  overflow: 'hidden',
+                }}
+              >
+                <span
+                  style={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {props.data.desc}
+                </span>
+              </div>
+            </div>
+          ) : null;
+        },
+      },
+    },
   },
   args: {
     columns: defaultColumns,

package/src/components/List/List.tsx

@@ -24,8 +24,9 @@ import {
 } from './List.model';
 import classes from './List.scss';
 import { ListHeader } from './ListHeader/ListHeader';
-import { ListRow } from './ListRow/ListRow';
+import { ListRowProps } from './ListRow/ListRow';
 import { ListRowLoader } from './ListRow/ListRowLoader';
+import { ListRowRenderer } from './ListRowRenderer/ListRowRenderer';
 import { getActionButtonVisibility, isTrigger, useSort } from './helpers';
 import { useColumnsSize } from './useColumnsSize';
 
@@ -110,6 +111,10 @@ export interface ListProps<T extends Data> {
   className?: string;
   /** Provide inline actions which are available through '...' context menu */
   inlineMenuActions?: (data: T) => ActionData[];
+  /** Function to determine if a specific row should be disabled */
+  isRowDisabled?: (data: T, index: number) => boolean;
+  /** Custom row renderer - if it returns null, the default ListRow will be used */
+  customRowRenderer?: (props: ListRowProps<T>) => ReactElement | null;
 }
 
 const ListRenderer = <T extends Data>(
@@ -145,6 +150,8 @@ const ListRenderer = <T extends Data>(
     generateItemLink,
     className = '',
     inlineMenuActions,
+    isRowDisabled,
+    customRowRenderer,
   }: PropsWithChildren<ListProps<T>>,
   ref?: React.ForwardedRef<ListElement>,
 ): JSX.Element => {
@@ -290,6 +297,21 @@ const ListRenderer = <T extends Data>(
     }
   }, [selectionMode]);
 
+  const getRowDisabledState = useCallback(
+    (item: ListItem<T>, index: number): boolean => {
+      const isDisabledDueToSelectAll =
+        isAllItemsChecked.current &&
+        !enableSelectAllDeselect &&
+        selectionMode === ListSelectMode.Multi;
+
+      const isDisabledByCustomLogic =
+        isRowDisabled?.(item.data, index) ?? false;
+
+      return isDisabledDueToSelectAll || isDisabledByCustomLogic;
+    },
+    [enableSelectAllDeselect, selectionMode, isRowDisabled],
+  );
+
   return (
     <div
       className={clsx(classes.wrapper, 'list-wrapper', className)}
@@ -319,43 +341,42 @@ const ListRenderer = <T extends Data>(
         onColumnSizesChanged={setColumnSizes}
         hasActionColumn={hasActionColumn}
       />
+
       {/* Rows */}
       {listItems.map((item: ListItem<T>, index) => (
-        <ListRow<T>
+        <ListRowRenderer<T>
           key={String(item.data[keyProperty] || index)}
-          columns={columns}
-          data={item.data}
-          itemSelected={item.selected}
+          customRowRenderer={customRowRenderer}
           isTrigger={isTrigger<T>(index, listItems, loadingTriggerOffset)}
-          isRowDisabled={
-            isAllItemsChecked.current &&
-            !enableSelectAllDeselect &&
-            selectionMode === ListSelectMode.Multi
-          }
-          columnSizes={columnSizes}
-          columnGap={columnGap}
-          rowHeight={listRowHeight}
-          actionSize={listRowActionSize}
-          horizontalTextAlign={horizontalTextAlign}
-          verticalTextAlign={verticalTextAlign}
-          textWrap={textWrap}
-          selectionMode={selectionMode}
-          showActionButton={
-            selectionMode === ListSelectMode.None &&
-            getActionButtonVisibility(item.data, showActionButton)
-          }
-          showCheckMark={selectionMode === ListSelectMode.Single}
-          showItemCheckbox={selectionMode === ListSelectMode.Multi}
-          onItemClicked={
-            generateItemLink
-              ? generateItemLink(item.data)
-              : (data) => itemClickedHandler(data, index)
-          }
           onTriggered={onTriggeredHandler}
-          onItemSelected={(checked) => itemSelectedHandler(checked, index)}
-          inlineMenuActions={inlineMenuActions}
+          listRowProps={{
+            columns,
+            data: item.data,
+            itemSelected: item.selected,
+            isRowDisabled: getRowDisabledState(item, index),
+            columnSizes,
+            columnGap,
+            rowHeight: listRowHeight,
+            actionSize: listRowActionSize,
+            horizontalTextAlign,
+            verticalTextAlign,
+            textWrap,
+            selectionMode,
+            showActionButton:
+              selectionMode === ListSelectMode.None &&
+              getActionButtonVisibility(item.data, showActionButton),
+            showCheckMark: selectionMode === ListSelectMode.Single,
+            showItemCheckbox: selectionMode === ListSelectMode.Multi,
+            onItemClicked: generateItemLink
+              ? generateItemLink(item.data)
+              : (data: T) => itemClickedHandler(data, index),
+            onItemSelected: (checked: boolean) =>
+              itemSelectedHandler(checked, index),
+            inlineMenuActions,
+          }}
         />
       ))}
+
       {isLoading && (
         <ListRowLoader
           columnSizes={columnSizes}

package/src/components/List/ListRow/ListRow.scss

@@ -27,6 +27,11 @@
     }
   }
 
+  &.disabled {
+    cursor: not-allowed;
+    color: var(--disabled-text-color, $gray);
+  }
+
   .cellWrapper {
     display: grid;
     width: 100%;