@axinom/mosaic-ui 0.64.0-rc.6 → 0.64.0

package/src/components/InfoTooltip/InfoTooltip.scss

@@ -16,88 +16,88 @@ $pop-up-arrow-extrusion: -7px;
       stroke: var(--infotooltip-icon-color, $infotooltip-icon-color);
     }
   }
+}
 
-  .container {
-    @include boxSizing;
+.container {
+  @include boxSizing;
 
-    box-sizing: border-box;
-    min-height: 50px;
-    max-width: 650px;
-    display: grid;
-    grid: min-content 1fr / 1fr;
-    width: max-content;
+  box-sizing: border-box;
+  min-height: 50px;
+  max-width: 650px;
+  display: grid;
+  grid: min-content 1fr / 1fr;
+  width: max-content;
 
-    background-color: var(
-      --infotooltip-background-color,
-      $infotooltip-background-color
-    );
+  background-color: var(
+    --infotooltip-background-color,
+    $infotooltip-background-color
+  );
 
-    color: var(--infotooltip-text-color, $infotooltip-text-color);
-    padding: 15px;
+  color: var(--infotooltip-text-color, $infotooltip-text-color);
+  padding: 15px;
 
-    z-index: 10;
+  z-index: 10;
 
-    .arrow,
-    .arrow::before {
-      position: absolute;
-      width: 14px;
-      height: 14px;
-      background: inherit;
-    }
+  .arrow,
+  .arrow::before {
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    background: inherit;
+  }
 
-    .arrow {
-      z-index: -1;
-      visibility: hidden;
+  .arrow {
+    z-index: -1;
+    visibility: hidden;
 
-      background-color: var(
-        --infotooltip-background-color,
-        $infotooltip-background-color
-      );
-    }
+    background-color: var(
+      --infotooltip-background-color,
+      $infotooltip-background-color
+    );
+  }
 
-    .arrow::before {
-      visibility: visible;
-      content: '';
-      transform: rotate(45deg);
-    }
+  .arrow::before {
+    visibility: visible;
+    content: '';
+    transform: rotate(45deg);
+  }
 
-    &[data-popper-placement^='top'] {
-      > .arrow {
-        bottom: $pop-up-arrow-extrusion;
-      }
+  &[data-popper-placement^='top'] {
+    > .arrow {
+      bottom: $pop-up-arrow-extrusion;
     }
+  }
 
-    &[data-popper-placement^='bottom'] {
-      > .arrow {
-        top: $pop-up-arrow-extrusion;
-      }
+  &[data-popper-placement^='bottom'] {
+    > .arrow {
+      top: $pop-up-arrow-extrusion;
     }
+  }
 
-    &[data-popper-placement^='left'] {
-      > .arrow {
-        right: $pop-up-arrow-extrusion;
-      }
+  &[data-popper-placement^='left'] {
+    > .arrow {
+      right: $pop-up-arrow-extrusion;
     }
+  }
 
-    &[data-popper-placement^='right'] {
-      > .arrow {
-        left: $pop-up-arrow-extrusion;
-      }
+  &[data-popper-placement^='right'] {
+    > .arrow {
+      left: $pop-up-arrow-extrusion;
     }
   }
+}
 
-  .info-tooltip-enter {
-    opacity: 0;
-  }
-  .info-tooltip-enter-active {
-    opacity: 1;
-    transition: opacity 500ms ease-in;
-  }
-  .info-tooltip-exit {
-    opacity: 1;
-  }
-  .info-tooltip-exit-active {
-    opacity: 0;
-    transition: opacity 500ms ease-out;
-  }
+.info-tooltip-enter {
+  opacity: 0;
+}
+.info-tooltip-enter-active {
+  opacity: 1;
+  transition: opacity 500ms ease-in;
+}
+.info-tooltip-exit {
+  opacity: 1;
+}
+.info-tooltip-exit-active {
+  opacity: 0;
+  transition: opacity 500ms ease-out;
 }

package/src/components/InfoTooltip/InfoTooltip.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 import { CSSTransition } from 'react-transition-group';
 import { IconName, Icons } from '../Icons';
@@ -52,40 +53,43 @@ export const InfoTooltip: React.FC<InfoTooltipProps> = ({
       >
         <Icons icon={IconName.Info} className={clsx(classes.icon)} />
       </div>
-      <CSSTransition
-        in={showTooltip}
-        timeout={200}
-        classNames={{
-          enter: classes['info-tooltip-enter'],
-          enterActive: classes['info-tooltip-enter-active'],
-          exit: classes['info-tooltip-exit'],
-          exitActive: classes['info-tooltip-exit-active'],
-        }}
-        unmountOnExit
-      >
-        <div
-          className={clsx(classes.container)}
-          ref={setPopperElement as React.LegacyRef<HTMLDivElement>}
-          style={styles.popper}
-          {...attributes.popper}
-          onClick={(e) => e.stopPropagation()}
-          onMouseEnter={() => {
-            clearTimeout(hideTooltipTimeout);
+      {createPortal(
+        <CSSTransition
+          in={showTooltip}
+          timeout={200}
+          classNames={{
+            enter: classes['info-tooltip-enter'],
+            enterActive: classes['info-tooltip-enter-active'],
+            exit: classes['info-tooltip-exit'],
+            exitActive: classes['info-tooltip-exit-active'],
           }}
-          onMouseLeave={() =>
-            (hideTooltipTimeout = global.setTimeout(() => {
-              setShowTooltip(false);
-            }, tooltipVisibleTime))
-          }
+          unmountOnExit
         >
-          {children}
           <div
-            ref={setArrowElement as React.LegacyRef<HTMLDivElement>}
-            className={clsx(classes.arrow)}
-            style={styles.arrow}
-          />
-        </div>
-      </CSSTransition>
+            className={clsx(classes.container)}
+            ref={setPopperElement as React.LegacyRef<HTMLDivElement>}
+            style={styles.popper}
+            {...attributes.popper}
+            onClick={(e) => e.stopPropagation()}
+            onMouseEnter={() => {
+              clearTimeout(hideTooltipTimeout);
+            }}
+            onMouseLeave={() =>
+              (hideTooltipTimeout = global.setTimeout(() => {
+                setShowTooltip(false);
+              }, tooltipVisibleTime))
+            }
+          >
+            {children}
+            <div
+              ref={setArrowElement as React.LegacyRef<HTMLDivElement>}
+              className={clsx(classes.arrow)}
+              style={styles.arrow}
+            />
+          </div>
+        </CSSTransition>,
+        document.body,
+      )}
     </div>
   );
 };

package/src/components/InlineMenu/InlineMenu.tsx

@@ -1,6 +1,7 @@
 import { Placement } from '@popperjs/core';
 import clsx from 'clsx';
 import React, { Ref, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 import { useExpand } from '../../hooks/useExpand/useExpand';
 import { Actions, ActionsProps } from '../Actions';
@@ -104,40 +105,45 @@ export const InlineMenu: React.FC<InlineMenuProps> = ({
         )}
         dataTestId="inline-menu-button"
       />
-      {isExpanded && (
-        <div
-          tabIndex={-1}
-          className={clsx(classes.container, 'sub-menu-container', className)}
-          ref={setPopperElement as React.LegacyRef<HTMLDivElement>}
-          style={styles.popper}
-          {...attributes.popper}
-          onBlur={() => {
-            onBlurTimeout = global.setTimeout(() => collapse(), 250);
-          }}
-          data-test-id="inline-menu"
-        >
-          <Actions
-            {...rest}
-            onActionClick={(e, action) => {
-              if (
-                action.confirmationMode &&
-                action.confirmationMode !== 'None'
-              ) {
-                clearTimeout(onBlurTimeout);
-              } else {
-                onBlurTimeout = global.setTimeout(() => collapse(), 250);
-              }
-              onActionClick?.(e, action);
-            }}
-          />
+      {isExpanded &&
+        createPortal(
           <div
-            ref={setArrowElement as React.LegacyRef<HTMLDivElement>}
-            className={classes.arrow}
-            // style={styles.arrow}
-            style={{ ...styles.arrow, display: showArrow ? 'inherit' : 'none' }}
-          />
-        </div>
-      )}
+            tabIndex={-1}
+            className={clsx(classes.container, 'sub-menu-container', className)}
+            ref={setPopperElement as React.LegacyRef<HTMLDivElement>}
+            style={styles.popper}
+            {...attributes.popper}
+            onBlur={() => {
+              onBlurTimeout = global.setTimeout(() => collapse(), 250);
+            }}
+            data-test-id="inline-menu"
+          >
+            <Actions
+              {...rest}
+              onActionClick={(e, action) => {
+                if (
+                  action.confirmationMode &&
+                  action.confirmationMode !== 'None'
+                ) {
+                  clearTimeout(onBlurTimeout);
+                } else {
+                  onBlurTimeout = global.setTimeout(() => collapse(), 250);
+                }
+                onActionClick?.(e, action);
+              }}
+            />
+            <div
+              ref={setArrowElement as React.LegacyRef<HTMLDivElement>}
+              className={classes.arrow}
+              // style={styles.arrow}
+              style={{
+                ...styles.arrow,
+                display: showArrow ? 'inherit' : 'none',
+              }}
+            />
+          </div>,
+          document.body,
+        )}
     </>
   );
 };

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,