@axinom/mosaic-ui 0.36.0-rc.10 → 0.36.0-rc.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.36.0-rc.10",
+  "version": "0.36.0-rc.11",
   "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.9-rc.10",
+    "@axinom/mosaic-core": "^0.4.9-rc.11",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -104,5 +104,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b3c60d5d725c084f7cf36981f5a0a923a934ded5"
+  "gitHead": "1e9686128f27ca69d12d66a9f6f9e69512af4177"
 }

package/src/components/DynamicDataList/DynamicDataList.model.ts

@@ -34,6 +34,9 @@ export interface DynamicListColumn<T extends Data> {
 
   /** Performs a transformation on the value before being added to the list */
   onAddTransformer?: (value: unknown, data: T) => unknown;
+
+  /** If set to true, the column will not be resizable */
+  disableResizing?: boolean;
 }
 
 export type DynamicListDataEntryRenderer = (

package/src/components/DynamicDataList/DynamicDataList.scss

@@ -8,4 +8,6 @@
   grid-template-rows: 1fr;
   grid-template-columns: 1fr;
   row-gap: var(--dynamic-list-row-gap, $dynamic-list-row-gap);
+
+  overflow-x: auto;
 }

package/src/components/DynamicDataList/DynamicDataList.stories.tsx

@@ -193,7 +193,7 @@ export const WithSelectInputRenderer: StoryObj<StoryDDLType> = {
       {
         propertyName: 'id',
         label: 'Id',
-        size: '50px',
+        size: '100px',
         dataEntryRender: createSelectRenderer({
           options: [
             { value: '10', label: '10' },

package/src/components/DynamicDataList/DynamicDataList.tsx

@@ -132,15 +132,20 @@ export const DynamicDataList = <T extends Data>({
   rowClassNameProvider,
   inlineMenuActions,
 }: PropsWithChildren<DynamicDataListProps<T>>): JSX.Element => {
-  const { columnSizes, showActionColumn, showPositionColumn } =
-    useColumnDefs<T>(
-      columns,
-      allowReordering,
-      allowNewData,
-      allowRowDragging,
-      positionPropertyName,
-      !!inlineMenuActions,
-    );
+  const {
+    columnSizes,
+    showActionColumn,
+    showPositionColumn,
+    setColumnSizes,
+    resetColumnSizes,
+  } = useColumnDefs<T>(
+    columns,
+    allowReordering,
+    allowNewData,
+    allowRowDragging,
+    positionPropertyName,
+    !!inlineMenuActions,
+  );
 
   const { addItem, removeItem, updateItem, canAddItems, items, nextPosition } =
     useDataHandler(
@@ -310,6 +315,9 @@ export const DynamicDataList = <T extends Data>({
           sticky={stickyHeader}
           allowDragging={allowRowDragging}
           showPositionColumn={showPositionColumn}
+          showActionColumn={showActionColumn}
+          onColumnSizesChanged={setColumnSizes}
+          onResetColumnSizes={resetColumnSizes}
         />
       )}
       {canAddItems &&

package/src/components/DynamicDataList/DynamicListDataEntry/DynamicListDataEntry.scss

@@ -25,6 +25,10 @@
 
   padding: 1px 0px 1px 0px;
 
+  > .column:first-child {
+    padding-left: var(--dynamic-list-column-gap, $dynamic-list-column-gap);
+  }
+
   .column {
     width: 100%;
     height: 100%;

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

@@ -18,7 +18,7 @@
   justify-items: left;
   align-items: center;
 
-  &:first-child {
+  > :first-child {
     padding-left: var(--dynamic-list-column-gap, $dynamic-list-column-gap);
   }
 
@@ -28,11 +28,25 @@
 
     display: grid;
     align-items: center;
+    position: relative;
 
-    border-right: solid 1px lighten($gray, 15%);
+    .resizeHandle {
+      cursor: col-resize;
+      width: 7px;
+      height: 100%;
 
-    &:last-of-type {
-      border-right: none;
+      z-index: 1;
+      border-right: var(--explorer-list-row-border, 1px solid #dddddd);
+      position: absolute;
+      right: 0;
+
+      &:hover:not(.resizeHandleDisabled) {
+        border-width: 3px;
+      }
+
+      &.resizeHandleDisabled {
+        cursor: default;
+      }
     }
   }
 

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

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { DynamicListColumn } from '../DynamicDataList.model';
 import { DynamicListHeader, DynamicListHeaderProps } from './DynamicListHeader';
@@ -30,11 +30,12 @@ const defaultProps: DynamicListHeaderProps<DynamicListHeaderTestData> = {
   columnSizes: 'column-size',
   columnGap: 'column-gap',
   rowHeight: 'row-height',
-  //actionSize: 'action-size',
   horizontalTextAlign: 'left',
   verticalTextAlign: 'center',
   positionKey: 'position',
   allowReordering: undefined,
+  onColumnSizesChanged: jest.fn(),
+  onResetColumnSizes: jest.fn(),
 };
 
 describe('DynamicListHeader', () => {
@@ -47,6 +48,7 @@ describe('DynamicListHeader', () => {
   it('header should not be draggable', () => {
     const wrapper = shallow(
       <DynamicListHeader
+        {...defaultProps}
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
       />,
@@ -62,6 +64,8 @@ describe('DynamicListHeader', () => {
       <DynamicListHeader
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
+        onColumnSizesChanged={jest.fn()}
+        onResetColumnSizes={jest.fn()}
       />,
     );
 
@@ -107,7 +111,7 @@ describe('DynamicListHeader', () => {
   it('renders a label for every column if set', () => {
     const wrapper = shallow(<DynamicListHeader {...defaultProps} />);
 
-    const columns = wrapper.find('.column');
+    const columns = wrapper.find('.column').slice(0, -1); // remove the last column, which is the action column
 
     columns.forEach((column, idx) => {
       expect(column.text()).toEqual(defaultColumns[idx].label);
@@ -117,6 +121,7 @@ describe('DynamicListHeader', () => {
   it(`renders the position column if 'showPositionColumn' is set to true`, () => {
     const wrapper = shallow(
       <DynamicListHeader
+        {...defaultProps}
         columnSizes={''}
         columns={defaultColumns}
         positionKey={'position'}
@@ -137,6 +142,7 @@ describe('DynamicListHeader', () => {
 
     const wrapper = shallow(
       <DynamicListHeader
+        {...defaultProps}
         columnSizes={''}
         columns={defaultColumns}
         positionKey={'position'}
@@ -155,6 +161,7 @@ describe('DynamicListHeader', () => {
   it(`doesn't render the position column if a 'positionKey' isn't set`, () => {
     const wrapper = shallow(
       <DynamicListHeader
+        {...defaultProps}
         columnSizes={''}
         columns={defaultColumns}
         allowReordering={true}
@@ -169,6 +176,7 @@ describe('DynamicListHeader', () => {
   it(`doesn't render the position column if 'allowReordering' is false`, () => {
     const wrapper = shallow(
       <DynamicListHeader
+        {...defaultProps}
         columnSizes={''}
         columns={defaultColumns}
         positionKey={'position'}
@@ -180,4 +188,57 @@ describe('DynamicListHeader', () => {
 
     expect(position.exists()).toBe(false);
   });
+
+  describe('Column Resizing', () => {
+    it('calls onResetColumnSizes when the reset button is clicked', () => {
+      const spy = jest.fn();
+      const wrapper = shallow(
+        <DynamicListHeader {...defaultProps} onResetColumnSizes={spy} />,
+      );
+
+      const resetButton = wrapper.find('.resizeHandle').first();
+      resetButton.simulate('doubleClick');
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onResetColumnSizes when the reset button is clicked also on non-resizable column', () => {
+      const spy = jest.fn();
+      const wrapper = shallow(
+        <DynamicListHeader
+          {...defaultProps}
+          columns={[
+            { ...defaultColumns[0], disableResizing: true },
+            ...defaultColumns.slice(1),
+          ]}
+          onResetColumnSizes={spy}
+        />,
+      );
+
+      const resetButton = wrapper.find('.resizeHandle').first();
+      resetButton.simulate('doubleClick');
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onColumnSizesChanged when the column is resized', () => {
+      const spy = jest.fn();
+      const wrapper = mount(
+        <DynamicListHeader {...defaultProps} onColumnSizesChanged={spy} />,
+      );
+
+      const resizeHandle = wrapper.find('.resizeHandle').first();
+      resizeHandle.invoke('onMouseDown')!({
+        preventDefault: jest.fn(),
+      } as any);
+
+      window.dispatchEvent(
+        new Event('mousemove', {
+          clientX: 100,
+        } as any),
+      );
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+  });
 });

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

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import React, { PropsWithChildren } from 'react';
+import { useResize } from '../../../hooks/useResize/useResize';
 import { Data } from '../../../types/data';
 import { DynamicListColumn } from '../DynamicDataList.model';
 import classes from './DynamicListHeader.scss';
@@ -32,6 +33,12 @@ export interface DynamicListHeaderProps<T extends Data> {
   showPositionColumn?: boolean;
   /** This will be used to determine the label for the position column if a positionLabel is not defined (default: false) */
   allowDragging?: boolean;
+  /** If set to true, the action column will be shown (default: false) */
+  showActionColumn?: boolean;
+  /** called when the column sizes should be reset */
+  onResetColumnSizes: () => void;
+  /** called when the column sizes should be updated */
+  onColumnSizesChanged: (columnSizes: string) => void;
 }
 
 export const DynamicListHeader = <T extends Data>({
@@ -46,6 +53,9 @@ export const DynamicListHeader = <T extends Data>({
   sticky = true,
   showPositionColumn = false,
   allowDragging = false,
+  showActionColumn,
+  onColumnSizesChanged,
+  onResetColumnSizes,
 }: PropsWithChildren<DynamicListHeaderProps<T>>): JSX.Element => {
   const customStyles = {
     gridAutoRows: rowHeight,
@@ -60,6 +70,8 @@ export const DynamicListHeader = <T extends Data>({
     customStyles.top = 0;
   }
 
+  const { cols, mouseDown } = useResize(columns, onColumnSizesChanged);
+
   return (
     <div
       className={clsx(
@@ -78,19 +90,40 @@ export const DynamicListHeader = <T extends Data>({
           <p className={clsx(classes.position)}>
             {positionLabel ?? (allowDragging ? 'Position' : 'Pos')}
           </p>
+          <div
+            className={clsx(classes.resizeHandle, classes.resizeHandleDisabled)}
+          />
         </div>
       )}
-      {columns.map((column) => (
+      {columns.map((column, i) => (
         <div
           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>
   );
 };

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.scss

@@ -14,6 +14,10 @@
 
   border-bottom: var(--dynamic-list-row-border, $dynamic-list-row-border);
 
+  > .wrapper:first-child {
+    padding-left: var(--dynamic-list-column-gap, $dynamic-list-column-gap);
+  }
+
   &.dragging {
     border-bottom: 0;
   }

package/src/components/DynamicDataList/helpers/useColumnDefs.ts

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { Data } from '../../../types';
 import { DynamicListColumn } from '../DynamicDataList.model';
 
@@ -18,39 +19,109 @@ export const useColumnDefs = function <T extends Data>(
   readonly columnSizes: string;
   readonly showPositionColumn: boolean;
   readonly showActionColumn: boolean;
+  resetColumnSizes: () => void;
+  setColumnSizes: (newColumnSizes: string) => void;
 } {
-  let positionColumn = '';
+  const [isResized, setIsResized] = useState<boolean>(false);
+
+  const [orgColumnSizes, setOrgColumnSizes] = useState<string>(
+    calculateColumnSizes(
+      columns,
+      allowReordering,
+      allowRowDragging,
+      positionKey,
+      allowNewData || showInlineMenu,
+    ),
+  );
+
+  const [columnSizes, setColumnSizes] = useState<string>(orgColumnSizes);
+
+  useEffect(() => {
+    setOrgColumnSizes(
+      calculateColumnSizes(
+        columns,
+        allowReordering,
+        allowRowDragging,
+        positionKey,
+        allowNewData || showInlineMenu,
+      ),
+    );
+    if (!isResized) {
+      setColumnSizes(orgColumnSizes);
+    }
+  }, [
+    allowNewData,
+    allowReordering,
+    allowRowDragging,
+    columns,
+    isResized,
+    orgColumnSizes,
+    positionKey,
+    showInlineMenu,
+  ]);
+
+  const resetColumnSizes = (): void => {
+    setColumnSizes(orgColumnSizes);
+    setIsResized(false);
+  };
+
+  return {
+    columnSizes,
+    showPositionColumn: allowReordering && positionKey !== undefined,
+    showActionColumn: (allowNewData || showInlineMenu) ?? false,
+    resetColumnSizes,
+    setColumnSizes: (newColumnSizes: string) => {
+      const positionColumn = getPositionColumnWidth(
+        allowReordering,
+        allowRowDragging,
+        positionKey,
+      );
+
+      setIsResized(true);
+      setColumnSizes(`${positionColumn} ${newColumnSizes}`.trim());
+    },
+  } as const;
+};
+
+function calculateColumnSizes<T extends Data>(
+  columns: DynamicListColumn<T>[],
+  allowReordering: boolean,
+  allowRowDragging: boolean,
+  positionKey?: keyof T,
+  showActionColumn?: boolean,
+): string {
+  const positionColumn = getPositionColumnWidth(
+    allowReordering,
+    allowRowDragging,
+    positionKey,
+  );
   let actionColumn = '';
-  let showPositionColumn = false;
-  let showActionColumn = false;
 
   const columnDefinition = columns
     .filter((columns) => columns.propertyName !== positionKey) // do not allow a column to be created for 'position'
     .reduce((prev, current) => `${prev} ${current.size ?? '1fr'}`, '')
     .trim();
 
+  if (showActionColumn) {
+    actionColumn = '50px';
+  }
+
+  return `${positionColumn} ${columnDefinition} ${actionColumn}`.trim();
+}
+
+function getPositionColumnWidth<T extends Data>(
+  allowReordering: boolean,
+  allowRowDragging: boolean,
+  positionKey?: keyof T,
+): string {
   // only show position column if allowReordering is true and the positionKey exists
   if (allowReordering && positionKey !== undefined) {
     if (allowRowDragging === true) {
-      positionColumn = '100px';
+      return '100px';
     } else {
-      positionColumn = '50px';
+      return '50px';
     }
-
-    showPositionColumn = true;
   }
 
-  if (allowNewData || showInlineMenu) {
-    actionColumn = '50px';
-    showActionColumn = true;
-  }
-
-  const columnSizes =
-    `${positionColumn} ${columnDefinition} ${actionColumn}`.trim();
-
-  return {
-    columnSizes,
-    showPositionColumn,
-    showActionColumn,
-  } as const;
-};
+  return '';
+}

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

@@ -1,11 +1,11 @@
 import clsx from 'clsx';
 import React, { PropsWithChildren } from 'react';
+import { useResize } from '../../../hooks/useResize/useResize';
 import { Data } from '../../../types/data';
 import { Column, SortData } from '../List.model';
 import { ListCheckBox } from '../ListCheckBox/ListCheckBox';
 import { ColumnLabel } from './ColumnLabel/ColumnLabel';
 import classes from './ListHeader.scss';
-import { useResize } from './useResize';
 
 export interface ListHeaderProps<T extends Data> {
   /** Column definitions */

package/src/components/List/useColumnsSize.ts

@@ -1,4 +1,4 @@
-import { SetStateAction, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Data } from '../../types';
 import { Column, ListSelectMode } from './List.model';
 
@@ -70,7 +70,7 @@ export const useColumnsSize = <T extends Data>(
 ): {
   columnSizes: string;
   resetColumnSizes: () => void;
-  setColumnSizes: React.Dispatch<React.SetStateAction<string>>;
+  setColumnSizes: (newColumnSizes: string) => void;
   hasActionColumn: boolean;
 } => {
   const [isResized, setIsResized] = useState<boolean>(false);
@@ -115,7 +115,7 @@ export const useColumnsSize = <T extends Data>(
   return {
     columnSizes,
     resetColumnSizes,
-    setColumnSizes: (newColumnSizes: SetStateAction<string>) => {
+    setColumnSizes: (newColumnSizes: string) => {
       setIsResized(true);
       setColumnSizes(newColumnSizes);
     },

package/src/{components/List/ListHeader → hooks/useResize}/useResize.ts

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Data } from '../../../types';
-import { Column } from '../List.model';
+import { DynamicListColumn } from '../../components';
+import { Column } from '../../components/List/List.model';
+import { Data } from '../../types';
 
 /**
  * Handles the resizing logic of the columns
@@ -10,7 +11,7 @@ import { Column } from '../List.model';
  *          and the mouseDown handler (add this to the element that should be used to resize the column)
  */
 export const useResize = <T extends Data>(
-  columns: Column<T>[],
+  columns: Column<T>[] | DynamicListColumn<T>[],
   onColumnSizesChanged: (columnSizes: string) => void,
 ): {
   cols: {

package/dist/components/List/ListHeader/useResize.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useResize.d.ts","sourceRoot":"","sources":["../../../../src/components/List/ListHeader/useResize.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,6EAEgB,MAAM,KAAK,IAAI;UAE7C;QACJ,GAAG,EAAE,MAAM,SAAS,CAAC,oBAAoB,CAAC,CAAC;QAC3C,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;KAC7B,EAAE;uBACgB,MAAM,KAAK,IAAI;CAwFnC,CAAC"}