@axinom/mosaic-ui 0.66.0-rc.13 → 0.66.0-rc.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.66.0-rc.13",
+  "version": "0.66.0-rc.15",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f2b0591969b1a8bacd397ad7270e0322d11e0314"
+  "gitHead": "79cc9f1ccdc2d279bff514a1714b4e86b8cebc5e"
 }

package/src/components/DynamicDataList/DynamicDataList.scss

@@ -8,4 +8,5 @@
   grid-template-rows: 1fr;
   grid-template-columns: 1fr;
   row-gap: var(--dynamic-list-row-gap, $dynamic-list-row-gap);
+  position: relative;
 }

package/src/components/DynamicDataList/DynamicListHeader/DynamicListHeader.scss

@@ -1,5 +1,15 @@
 @import '../../../styles/common.scss';
 
+.resizeIndicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--explorer-list-row-border, #dddddd);
+  pointer-events: none;
+  z-index: 10;
+}
+
 .container {
   background-color: var(
     --explorer-background-color,

package/src/components/DynamicDataList/DynamicListHeader/DynamicListHeader.spec.tsx

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

package/src/components/DynamicDataList/DynamicListHeader/DynamicListHeader.tsx

@@ -70,60 +70,76 @@ export const DynamicListHeader = <T extends Data>({
     customStyles.top = 0;
   }
 
-  const { cols, mouseDown } = useResize(columns, onColumnSizesChanged);
+  const { cols, mouseDown, isResizing, resizePosition, containerRef } =
+    useResize(columns, onColumnSizesChanged);
 
   return (
-    <div
-      className={clsx(
-        classes.container,
-        'dynamic-list-header-container',
-        className,
-      )}
-      style={customStyles}
-      data-test-id="dynamic-list-header"
-    >
-      {showPositionColumn && (
+    <>
+      {isResizing && resizePosition !== undefined && (
         <div
-          className={clsx(classes.column)}
-          data-test-id="dynamic-list-header-cell"
-        >
-          <p className={clsx(classes.position)}>
-            {positionLabel ?? (allowDragging ? 'Position' : 'Pos')}
-          </p>
-          <div
-            className={clsx(classes.resizeHandle, classes.resizeHandleDisabled)}
-          />
-        </div>
+          className={classes.resizeIndicator}
+          style={{ left: `${resizePosition}px` }}
+        />
       )}
-      {columns.map((column, i) => (
-        <div
-          key={column.key ?? (column.propertyName as string)}
-          className={clsx(classes.column)}
-          ref={cols[i].ref}
-          data-test-id={`dynamic-list-header-property:${
-            column.propertyName as string
-          }`}
-        >
-          <p>{column.label}</p>
+      <div
+        className={clsx(
+          classes.container,
+          'dynamic-list-header-container',
+          className,
+        )}
+        ref={containerRef}
+        style={customStyles}
+        data-test-id="dynamic-list-header"
+      >
+        {showPositionColumn && (
           <div
-            onMouseDown={
-              !column.disableResizing
-                ? (e) => {
-                    e.preventDefault();
-                    mouseDown(i);
-                  }
-                : undefined
-            }
-            onDoubleClick={onResetColumnSizes}
-            className={clsx(classes.resizeHandle, {
-              [classes.resizeHandleDisabled]: column.disableResizing ?? false,
-            })}
+            className={clsx(classes.column)}
+            data-test-id="dynamic-list-header-cell"
+          >
+            <p className={clsx(classes.position)}>
+              {positionLabel ?? (allowDragging ? 'Position' : 'Pos')}
+            </p>
+            <div
+              className={clsx(
+                classes.resizeHandle,
+                classes.resizeHandleDisabled,
+              )}
+            />
+          </div>
+        )}
+        {columns.map((column, i) => (
+          <div
+            key={column.key ?? (column.propertyName as string)}
+            className={clsx(classes.column)}
+            ref={cols[i].ref}
+            data-test-id={`dynamic-list-header-property:${
+              column.propertyName as string
+            }`}
+          >
+            <p>{column.label}</p>
+            <div
+              onMouseDown={
+                !column.disableResizing
+                  ? (e) => {
+                      e.preventDefault();
+                      mouseDown(i);
+                    }
+                  : undefined
+              }
+              onDoubleClick={onResetColumnSizes}
+              className={clsx(classes.resizeHandle, {
+                [classes.resizeHandleDisabled]: column.disableResizing ?? false,
+              })}
+            />
+          </div>
+        ))}
+        {showActionColumn && (
+          <div
+            className={clsx(classes.column)}
+            ref={cols[cols.length - 1].ref}
           />
-        </div>
-      ))}
-      {showActionColumn && (
-        <div className={clsx(classes.column)} ref={cols[cols.length - 1].ref} />
-      )}
-    </div>
+        )}
+      </div>
+    </>
   );
 };

package/src/components/List/List.scss

@@ -12,6 +12,7 @@
     $explorer-background-color
   );
   overflow-x: auto;
+  position: relative;
 
   .LoadingData {
     margin: 1rem 0;

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

@@ -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

@@ -65,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'}

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

@@ -1,11 +1,20 @@
 @import '../../../styles/common.scss';
 
+.resizeIndicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--explorer-list-row-border, #dddddd);
+  pointer-events: none;
+  z-index: 1;
+}
+
 .container {
   padding-left: 5px;
   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,70 @@ export const ListHeader = <T extends Data>({
     alignItems: verticalTextAlign,
   } as React.CSSProperties;
 
-  const { cols, mouseDown } = useResize(columns, onColumnSizesChanged);
+  const { cols, mouseDown, isResizing, resizePosition, containerRef } =
+    useResize(columns, onColumnSizesChanged);
 
   return (
-    <div
-      className={clsx(classes.container, 'list-header-container', className)}
-      style={customStyles}
-      data-test-id="list-header"
-    >
-      {columns.map((column, i) => (
+    <>
+      {isResizing && resizePosition !== undefined && (
         <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}
-          />
+          className={classes.resizeIndicator}
+          style={{ left: `${resizePosition}px` }}
+        />
+      )}
+      <div
+        className={clsx(classes.container, 'list-header-container', className)}
+        style={customStyles}
+        data-test-id="list-header"
+        ref={containerRef}
+      >
+        {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>
-      )}
-    </div>
+            <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}
+              />
+            )}
+          </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);
     });