@axinom/mosaic-ui 0.66.0-rc.2 → 0.66.0-rc.20

package/src/components/InfoTooltip/InfoTooltip.scss

@@ -36,7 +36,7 @@ $pop-up-arrow-extrusion: -7px;
   color: var(--infotooltip-text-color, $infotooltip-text-color);
   padding: 15px;
 
-  z-index: 10;
+  z-index: 9999;
 
   .arrow,
   .arrow::before {

package/src/components/InlineMenu/InlineMenu.scss

@@ -13,7 +13,7 @@ $pop-up-arrow-extrusion: -7px;
 
   box-shadow: 0px 1px 8px 3px rgba(92, 92, 92, 0.27);
 
-  z-index: 10;
+  z-index: 9999;
 
   .arrow,
   .arrow::before {

package/src/components/LandingPageTiles/LandingPageTiles.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { createGroups, getRandomInt } from '../../helpers/storybook';
+import { SvgElement } from '../VisualElements/SvgElement';
 import { LandingPageTiles } from './LandingPageTiles';
 import { LandingPageItem } from './LandingPageTiles.model';
 
@@ -15,7 +16,7 @@ const defaultContainer = {
 
 const DefaultIcon: React.FC = () => {
   return (
-    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+    <SvgElement viewBox="0 0 40 40">
       <path
         vectorEffect="non-scaling-stroke"
         fill="none"
@@ -23,7 +24,7 @@ const DefaultIcon: React.FC = () => {
         d="M39,39H1V1h38V39z M39.1,26l-8.4-8.7l-9.1,11.5
 	l-6.4-5.4L3.6,39.1 M12.8,7.8c-2.4,0-4.4,2-4.4,4.4s2,4.4,4.4,4.4s4.4-2,4.4-4.4S15.3,7.8,12.8,7.8z"
       />
-    </svg>
+    </SvgElement>
   );
 };
 

package/src/components/LandingPageTiles/TileLarge/TileLarge.spec.tsx

@@ -84,7 +84,11 @@ describe('TileLarge', () => {
   });
 
   it('renders an icon when passed as a string URL', () => {
-    const wrapper = shallow(<TileLarge {...mockProps} />);
+    const wrapper = mount(
+      <MemoryRouter>
+        <TileLarge {...mockProps} />
+      </MemoryRouter>,
+    );
     const iconUrl = wrapper.find('img').prop('src');
 
     expect(iconUrl).toBe(`${mockProps.icon}`);

package/src/components/LandingPageTiles/TileLarge/TileLarge.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { useValueOrOnDemand } from '../../../hooks/useValueOrOnDemand/useValueOrOnDemand';
 import { Loader } from '../../Loaders/Loader/Loader';
+import { ImgElement } from '../../VisualElements';
 import { LandingPageItem } from '../LandingPageTiles.model';
 import classes from './TileLarge.scss';
 
@@ -56,7 +57,7 @@ export const TileLarge: React.FC<TileLargeProps> = ({
         {React.isValidElement(icon)
           ? icon
           : typeof icon === 'string' && (
-              <img src={icon} alt={`${label} icon`} />
+              <ImgElement src={icon} decorative={true} />
             )}
       </div>
       <div className={classes.titlesSection}>

package/src/components/LandingPageTiles/TileSmall/TileSmall.spec.tsx

@@ -1,5 +1,6 @@
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import React from 'react';
+import { MemoryRouter } from 'react-router';
 import { TileSmall, TileSmallProps } from './TileSmall';
 
 const mockProps: TileSmallProps = {
@@ -31,7 +32,11 @@ describe('TileSmall', () => {
   });
 
   it('renders an icon when passed a string URL', () => {
-    const wrapper = shallow(<TileSmall {...mockProps} />);
+    const wrapper = mount(
+      <MemoryRouter>
+        <TileSmall {...mockProps} />
+      </MemoryRouter>,
+    );
     const iconUrl = wrapper.find('img').prop('src');
 
     expect(iconUrl).toBe(`${mockProps.icon}`);

package/src/components/LandingPageTiles/TileSmall/TileSmall.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { ImgElement } from '../../VisualElements';
 import { LandingPageItem } from '../LandingPageTiles.model';
 import classes from './TileSmall.scss';
 
@@ -50,7 +51,7 @@ export const TileSmall: React.FC<TileSmallProps> = ({
         {React.isValidElement(icon)
           ? icon
           : typeof icon === 'string' && (
-              <img src={icon} alt={`${label} icon`} />
+              <ImgElement src={icon} decorative={true} />
             )}
       </div>
 

package/src/components/List/ListCheckBox/ListCheckBox.tsx

@@ -44,6 +44,7 @@ export const ListCheckBox: React.FC<ListCheckBoxProps> = ({
     <div
       className={clsx(classes.container, 'list-checkbox-container', className)}
       onClick={containerHandler}
+      aria-checked={isChecked}
     >
       <Button
         height={height}

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

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { SortData } from '../../List.model';
 import { ColumnLabel } from './ColumnLabel';
@@ -37,7 +37,7 @@ describe('ColumnLabel', () => {
   });
 
   it('renders the directional arrows by default', () => {
-    const wrapper = shallow(<ColumnLabel propertyName={'test-prop'} />);
+    const wrapper = mount(<ColumnLabel propertyName="test-prop" />);
 
     const dirArrows = wrapper.find('svg');
     const clickWrapper = wrapper.find('.clickWrapper');
@@ -77,7 +77,7 @@ describe('ColumnLabel', () => {
     );
 
     const columnTitle = wrapper.find('.clickWrapper');
-    columnTitle.simulate('click');
+    columnTitle.simulate('click', { stopPropagation: jest.fn() });
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith({
@@ -102,7 +102,7 @@ describe('ColumnLabel', () => {
     );
 
     const columnTitle = wrapper.find('.clickWrapper');
-    columnTitle.simulate('click');
+    columnTitle.simulate('click', { stopPropagation: jest.fn() });
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith({
@@ -126,7 +126,7 @@ describe('ColumnLabel', () => {
     );
 
     const columnTitle = wrapper.find('.clickWrapper');
-    columnTitle.simulate('click');
+    columnTitle.simulate('click', { stopPropagation: jest.fn() });
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith({
@@ -150,7 +150,7 @@ describe('ColumnLabel', () => {
     );
 
     const columnTitle = wrapper.find('.clickWrapper');
-    columnTitle.simulate('click');
+    columnTitle.simulate('click', { stopPropagation: jest.fn() });
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith({

package/src/components/List/ListHeader/ColumnLabel/ColumnLabel.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React, { PropsWithChildren } from 'react';
 import { noop } from '../../../../helpers/utils';
+import { SvgElement } from '../../../VisualElements/SvgElement';
 import { ColumnSortKeys, SortData } from '../../List.model';
 import classes from './ColumnLabel.scss';
 
@@ -64,7 +65,11 @@ export const ColumnLabel = <T,>({
         <div
           className={clsx(classes.clickWrapper, classes.sortable)}
           onClick={
-            propertyName && (() => onSortChanged(getSortDir(propertyName)))
+            propertyName &&
+            ((e) => {
+              onSortChanged(getSortDir(propertyName));
+              e.stopPropagation();
+            })
           }
           data-test-id={`list-label:${String(propertyName)}`}
           data-test-sort-dir={direction ?? 'none'}
@@ -73,26 +78,18 @@ export const ColumnLabel = <T,>({
             {label ?? propertyName}
           </span>
           <div className={classes.arrows}>
-            <svg
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 13 10"
-            >
+            <SvgElement viewBox="0 0 13 10">
               <path
                 className={clsx({ [classes.sorted]: direction === 'asc' })}
                 d="M1.5,7.3l4.8-5.7l5.2,5.7"
               ></path>
-            </svg>
-            <svg
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 13 10"
-            >
+            </SvgElement>
+            <SvgElement viewBox="0 0 13 10">
               <path
                 className={clsx({ [classes.sorted]: direction === 'desc' })}
                 d="M11.5,2.8L6.7,8.5L1.5,2.8"
               ></path>
-            </svg>
+            </SvgElement>
           </div>
         </div>
       </div>

package/src/components/List/ListHeader/ListHeader.scss

@@ -5,7 +5,6 @@
   display: grid;
   position: sticky;
   top: 0;
-  //z-index: 1;
 
   background-color: var(
     --explorer-header-background-color,

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

@@ -208,6 +208,8 @@ describe('ListHeader', () => {
         } as any),
       );
 
+      window.dispatchEvent(new Event('mouseup', {} as any));
+
       expect(spy).toHaveBeenCalledTimes(1);
     });
   });

package/src/components/List/ListHeader/ListHeader.tsx

@@ -85,60 +85,66 @@ export const ListHeader = <T extends Data>({
     alignItems: verticalTextAlign,
   } as React.CSSProperties;
 
-  const { cols, mouseDown } = useResize(columns, onColumnSizesChanged);
+  const { cols, mouseDown, ResizeIndicator } = useResize(
+    columns,
+    onColumnSizesChanged,
+  );
 
   return (
-    <div
-      className={clsx(classes.container, 'list-header-container', className)}
-      style={customStyles}
-      data-test-id="list-header"
-    >
-      {columns.map((column, i) => (
-        <div
-          key={column.key ?? (column.propertyName as string)}
-          ref={cols[i].ref}
-          className={clsx(classes.columnLabel)}
-        >
-          <ColumnLabel<T>
-            propertyName={column.propertyName}
-            label={column.label ?? (column.propertyName as string)}
-            sortable={column.sortable}
-            columnSortKeys={column?.columnSortKeys}
-            sortData={sortData}
-            onSortChanged={onSortChanged}
-          />
+    <>
+      {ResizeIndicator}
+      <div
+        className={clsx(classes.container, 'list-header-container', className)}
+        style={customStyles}
+        data-test-id="list-header"
+      >
+        {columns.map((column, i) => (
           <div
-            onMouseDown={
-              !column.disableResizing
-                ? (e) => {
-                    e.preventDefault();
-                    mouseDown(i);
-                  }
-                : undefined
-            }
-            onDoubleClick={() => onResetColumnSizes()}
-            className={clsx(classes.resizeHandle, {
-              [classes.resizeHandleDisabled]: column.disableResizing,
-            })}
-          />
-        </div>
-      ))}
-      {hasActionColumn && (
-        <div
-          ref={cols[cols.length - 1].ref}
-          className={clsx(classes.columnLabel)}
-        >
-          {showItemCheckbox && (
-            <ListCheckBox
-              height={actionSize}
-              width={actionSize}
-              isChecked={itemSelected}
-              isDisabled={isCheckboxDisabled}
-              onCheckBoxToggled={onCheckboxToggled}
+            key={column.key ?? (column.propertyName as string)}
+            ref={cols[i].ref}
+            className={clsx(classes.columnLabel)}
+          >
+            <ColumnLabel<T>
+              propertyName={column.propertyName}
+              label={column.label ?? (column.propertyName as string)}
+              sortable={column.sortable}
+              columnSortKeys={column?.columnSortKeys}
+              sortData={sortData}
+              onSortChanged={onSortChanged}
+            />
+            <div
+              onMouseDown={
+                !column.disableResizing
+                  ? (e) => {
+                      e.preventDefault();
+                      mouseDown(i);
+                    }
+                  : undefined
+              }
+              onDoubleClick={() => onResetColumnSizes()}
+              className={clsx(classes.resizeHandle, {
+                [classes.resizeHandleDisabled]: column.disableResizing,
+              })}
             />
-          )}
-        </div>
-      )}
-    </div>
+          </div>
+        ))}
+        {hasActionColumn && (
+          <div
+            ref={cols[cols.length - 1].ref}
+            className={clsx(classes.columnLabel)}
+          >
+            {showItemCheckbox && (
+              <ListCheckBox
+                height={actionSize}
+                width={actionSize}
+                isChecked={itemSelected}
+                isDisabled={isCheckboxDisabled}
+                onCheckBoxToggled={onCheckboxToggled}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    </>
   );
 };

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

@@ -32,33 +32,6 @@
     color: var(--disabled-text-color, $gray);
   }
 
-  .cellWrapper {
-    display: grid;
-    width: 100%;
-    height: 100%;
-  }
-
-  .cell {
-    max-width: 100%;
-    max-height: 100%;
-
-    span {
-      padding: 5px 0;
-      display: block;
-      width: 100%;
-    }
-
-    &.nowrap {
-      overflow: hidden;
-
-      span {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-    }
-  }
-
   .actions {
     display: grid;
     grid-template-rows: 1fr;

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

@@ -47,7 +47,7 @@ describe('ListRow', () => {
   `(
     'renders the defined columns in the defined order -> $name',
     ({ expectedColumns }: { expectedColumns: Column<TestExplorerData>[] }) => {
-      const wrapper = shallow(
+      const wrapper = mount(
         <ListRow {...mockProps} columns={expectedColumns} />,
       );
 
@@ -74,7 +74,7 @@ describe('ListRow', () => {
 
     setLocale('en-US');
 
-    const wrapper = shallow(
+    const wrapper = mount(
       <ListRow
         data={rowData}
         columns={expectedColumns}
@@ -115,7 +115,7 @@ describe('ListRow', () => {
     ];
     const rowData = { value: 'something' };
 
-    const wrapper = shallow(
+    const wrapper = mount(
       // @ts-expect-error Typings to not match up
       <ListRow {...mockProps} data={rowData} columns={expectedColumns} />,
     );
@@ -129,9 +129,7 @@ describe('ListRow', () => {
       { propertyName: "doesn't exist", size: '1fr', label: 'desc' },
     ];
 
-    const wrapper = shallow(
-      <ListRow {...mockProps} columns={expectedColumns} />,
-    );
+    const wrapper = mount(<ListRow {...mockProps} columns={expectedColumns} />);
 
     const actualColumns = wrapper.find('.cellWrapper');
 
@@ -488,12 +486,16 @@ describe('ListRow', () => {
       ];
       const rowData = { value: mockValue };
 
-      const wrapper = shallow(
+      const wrapper = mount(
         // @ts-expect-error Typings to not match up
         <ListRow {...mockProps} data={rowData} columns={expectedColumns} />,
       );
 
-      const cell = wrapper.find('.cell').first();
+      // When a custom renderer returns a string, it's wrapped in a span with data-test-id
+      const span = wrapper
+        .find('span[data-test-id="list-entry-property:value"]')
+        .first();
+      const cell = span.closest('.cell');
 
       expect(cell.prop('title')).toBe(mockValue);
     });

package/src/components/List/ListRow/ListRow.tsx

@@ -1,10 +1,9 @@
 import clsx from 'clsx';
 import { LocationDescriptor } from 'history';
-import React, { PropsWithChildren, useCallback } from 'react';
+import React, { PropsWithChildren, useCallback, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import { noop } from '../../../helpers/utils';
 import { Data } from '../../../types/data';
-import { getTooltipText } from '../../../utils/ToolTipHelpers';
 import { ActionData } from '../../Actions/Actions.models';
 import { Button } from '../../Buttons';
 import { IconName } from '../../Icons';
@@ -12,6 +11,7 @@ import { InlineMenu } from '../../InlineMenu/InlineMenu';
 import { Column, ListSelectMode } from '../List.model';
 import { ListCheckBox } from '../ListCheckBox/ListCheckBox';
 import classes from './ListRow.scss';
+import { ListRowCell } from './ListRowCell/ListRowCell';
 
 export interface ListRowProps<T extends Data> {
   /** Spacing between columns */
@@ -76,124 +76,6 @@ export const setLocale = (locale: string): void => {
 
 setLocale(navigator.language);
 
-const renderData = <T extends Data>(
-  column: Column<T>,
-  rowData: T,
-): {
-  columnData: React.ReactNode;
-  tooltip: string | undefined;
-  isDataTestIdSet: boolean;
-} => {
-  const getTooltip = (value: unknown): string | undefined =>
-    column.tooltip !== false ? getTooltipText(value) : undefined;
-
-  if (!column.propertyName) {
-    const columnData = column.render?.(undefined, rowData);
-
-    if (typeof columnData === 'string') {
-      return {
-        columnData: (
-          <span
-            data-test-id={`list-entry-property:${
-              column.propertyName as string
-            }`}
-          >
-            {columnData}
-          </span>
-        ),
-        isDataTestIdSet: true,
-        tooltip: getTooltip(columnData),
-      };
-    }
-
-    return {
-      columnData,
-      tooltip: getTooltip(columnData),
-      isDataTestIdSet: false,
-    };
-  }
-  const value: unknown = rowData[column.propertyName];
-  if (column.render) {
-    const columnData = column.render(value, rowData);
-
-    if (typeof columnData === 'string') {
-      return {
-        columnData: (
-          <span
-            data-test-id={`list-entry-property:${
-              column.propertyName as string
-            }`}
-          >
-            {columnData}
-          </span>
-        ),
-        isDataTestIdSet: true,
-        tooltip: getTooltip(columnData),
-      };
-    }
-
-    return {
-      columnData,
-      tooltip: getTooltip(columnData),
-      isDataTestIdSet: false,
-    };
-  }
-
-  if (value === null || value === undefined) {
-    return {
-      columnData: (
-        <span
-          data-test-id={`list-entry-property:${column.propertyName as string}`}
-        />
-      ),
-      tooltip: undefined,
-      isDataTestIdSet: true,
-    };
-  }
-
-  if (typeof value === 'number') {
-    const columnData = numberFormatter.format(value);
-    return {
-      columnData: (
-        <span
-          data-test-id={`list-entry-property:${column.propertyName as string}`}
-        >
-          {columnData}
-        </span>
-      ),
-      tooltip: getTooltip(columnData),
-      isDataTestIdSet: true,
-    };
-  }
-
-  if (value instanceof Date) {
-    const columnData = dateFormatter.format(value);
-    return {
-      columnData: (
-        <span
-          data-test-id={`list-entry-property:${column.propertyName as string}`}
-        >
-          {columnData}
-        </span>
-      ),
-      tooltip: getTooltip(columnData),
-      isDataTestIdSet: true,
-    };
-  }
-
-  return {
-    columnData: (
-      <span
-        data-test-id={`list-entry-property:${column.propertyName as string}`}
-      >
-        {String(value)}
-      </span>
-    ),
-    tooltip: getTooltip(String(value)),
-    isDataTestIdSet: true,
-  };
-};
-
 /**
  * Renders the rows for the list component
  * @example
@@ -260,42 +142,28 @@ const ListRowComponent = <T extends Data>(
     selectionMode === ListSelectMode.None &&
     typeof onItemClicked !== 'function';
 
-  const generateCells: JSX.Element[] = columns.map((column: Column<T>) => {
-    const { columnData, tooltip, isDataTestIdSet } = renderData<T>(
-      column,
-      data,
-    );
-
-    return (
-      <div
-        key={column.key ?? (column.propertyName as string)}
-        className={classes.cellWrapper}
-      >
-        <div
-          className={clsx(classes.cell, { [classes.nowrap]: !textWrap })}
-          title={tooltip}
-          style={{
-            justifySelf: column.horizontalColumnAlign, // Horizontal alignment based on column config
-            alignSelf: verticalTextAlign, // Vertical alignment based on props
-            textAlign: horizontalTextAlign, // Additional text alignment inside the cell
-          }}
-          data-test-id={
-            isDataTestIdSet
-              ? null
-              : `list-entry-property:${column.propertyName as string}`
-          }
-        >
-          {columnData}
-        </div>
-      </div>
-    );
-  });
+  const generateCells = useMemo(() => {
+    return columns.map((column: Column<T>) => {
+      return (
+        <ListRowCell<T>
+          key={column.key ?? (column.propertyName as string)}
+          column={column}
+          data={data}
+          horizontalTextAlign={horizontalTextAlign}
+          verticalTextAlign={verticalTextAlign}
+          textWrap={textWrap}
+          dateFormatter={dateFormatter}
+          numberFormatter={numberFormatter}
+        />
+      );
+    });
+  }, [columns, data, horizontalTextAlign, textWrap, verticalTextAlign]);
 
   const inlineActionMenuData = inlineMenuActions
     ? inlineMenuActions(data)
     : undefined;
 
-  const Row = (
+  return (
     <div
       className={clsx(classes.columnsRoot, {
         [classes.selected]: itemSelected,
@@ -382,7 +250,7 @@ const ListRowComponent = <T extends Data>(
     </div>
   );
 
-  return Row;
+  // return Row;
 };
 
 export const ListRow = React.forwardRef(ListRowComponent) as <T extends Data>(