@axinom/mosaic-ui 0.49.0-rc.9 → 0.50.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.49.0-rc.9",
+  "version": "0.50.0-rc.0",
   "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.22-rc.9",
+    "@axinom/mosaic-core": "^0.4.23-rc.0",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
@@ -105,5 +105,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a448af71faaf175908d9228bc1c1d32be65f9e2d"
+  "gitHead": "718cd482ef715fc9adde1ea97413b9ef512cf951"
 }

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

@@ -44,7 +44,7 @@ const generateData = (amount: number): DynamicListStoryData[] =>
     position: amount - index, // Position and ID is jumbled for demonstration purposes
     id: index,
     desc: `Description ${index}: ${faker.lorem.words(
-      faker.datatype.number({ min: 10, max: 20 }),
+      faker.datatype.number({ min: 10, max: 50 }),
     )}`,
     title: `Item ${index}: ${faker.random.words(
       faker.datatype.number({ min: 1, max: 3 }),
@@ -87,6 +87,7 @@ const groups = createGroups({
     'headerRowActionSize',
     'horizontalTextAlign',
     'verticalTextAlign',
+    'textWrap',
     'rowClassNameProvider',
   ],
 });

package/src/components/DynamicDataList/DynamicDataList.tsx

@@ -53,6 +53,8 @@ export interface DynamicDataListProps<T extends Data> {
   horizontalTextAlign?: 'left' | 'right' | 'center';
   /** Vertical alignment of text */
   verticalTextAlign?: 'start' | 'center' | 'end';
+  /** If set to true, column text overflow will be wrapped to a new line. Otherwise, it will be truncated with an ellipsis (default: false) */
+  textWrap?: boolean;
   /** Property that contains the value used in reordering the list (default: undefined) */
   positionPropertyName?: keyof T;
   /** If sets, sets the label for the position column (default: 'Position') */
@@ -127,6 +129,7 @@ export const DynamicDataList = <T extends Data>({
   stickyHeader = true,
   disabled = false,
   className = '',
+  textWrap = false,
   onChange = noop,
   onAddTransformData = (data) => data as T,
   rowClassNameProvider,
@@ -233,6 +236,7 @@ export const DynamicDataList = <T extends Data>({
           actionSize={listRowActionSize}
           horizontalTextAlign={horizontalTextAlign}
           verticalTextAlign={verticalTextAlign}
+          textWrap={textWrap}
           allowRemove={allowNewData}
           positionKey={positionPropertyName}
           allowDragging={allowRowDragging}

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

@@ -9,7 +9,6 @@
 
   display: grid;
   padding: 1px 0px 1px 0px;
-  grid-auto-rows: var(--dynamic-list-row-height, $dynamic-list-row-height);
   column-gap: var(--dynamic-list-column-gap, $dynamic-list-column-gap);
 
   border-bottom: var(--dynamic-list-row-border, $dynamic-list-row-border);
@@ -26,7 +25,7 @@
   align-items: center;
 
   .wrapper {
-    min-height: 50px;
+    min-height: var(--dynamic-list-row-height, $dynamic-list-row-height);
     min-width: 100%;
     display: grid;
     align-items: center;
@@ -41,9 +40,16 @@
     max-width: 100%;
     max-height: 100%;
 
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
+    span {
+      padding: 5px 0;
+      display: grid;
+    }
+
+    &.nowrap {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
   }
 
   .position,

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

@@ -407,6 +407,43 @@ describe('DynamicListRow', () => {
     expect(input.prop('value')).toBe(dataWithPosition.position);
   });
 
+  describe('DynamicListRow column text alignments', () => {
+    const alignments: {
+      horizontal: 'left' | 'right' | 'center' | undefined;
+      vertical: 'center' | 'start' | 'end' | undefined;
+    }[] = [
+      { horizontal: 'center', vertical: 'center' },
+      { horizontal: 'left', vertical: 'start' },
+      { horizontal: 'right', vertical: 'end' },
+      { horizontal: undefined, vertical: undefined },
+    ];
+
+    alignments.forEach(({ horizontal, vertical }) => {
+      it(`should apply the correct styles for justify-content: ${horizontal}, align-items: ${vertical}`, () => {
+        const wrapper = mount(
+          <DynamicListRow
+            columns={defaultColumns}
+            columnSizes={defaultProps.columnSizes}
+            data={dataWithPosition}
+            positionKey={'position'}
+            showPositionColumn={true}
+            horizontalTextAlign={horizontal}
+            verticalTextAlign={vertical}
+          />,
+        );
+
+        const wrapperDivs = wrapper.find('.wrapper');
+
+        wrapperDivs.forEach((node) => {
+          const style = node.prop('style');
+
+          expect(style).toHaveProperty('justifyContent', horizontal);
+          expect(style).toHaveProperty('alignItems', vertical);
+        });
+      });
+    });
+  });
+
   describe('tooltip', () => {
     it(`renders a tooltip using the 'title' html attribute by default`, () => {
       const wrapper = shallow(

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.tsx

@@ -28,6 +28,8 @@ export interface DynamicListRowProps<T extends Data> {
   horizontalTextAlign?: 'left' | 'right' | 'center';
   /** Vertical alignment of text */
   verticalTextAlign?: 'start' | 'center' | 'end';
+  /** If set to true, column text overflow will be wrapped to a new line. Otherwise, it will be truncated with an ellipsis (default: false) */
+  textWrap?: boolean;
   /** If set to true, the remove action button will be rendered (default: undefined) */
   allowRemove?: boolean;
   /** If set to true, editable fields will be highlighted and row click events will be fired (default: false) */
@@ -85,6 +87,7 @@ export const DynamicListRow = <T extends Data>({
   showPositionColumn = false,
   showActionColumn = false,
   allowEditing = false,
+  textWrap = false,
 }: PropsWithChildren<DynamicListRowProps<T>>): JSX.Element => {
   const customStyles = {
     gridAutoRows: `minmax(50px, ${rowHeight})`,
@@ -170,7 +173,7 @@ export const DynamicListRow = <T extends Data>({
         </div>
       )}
       {columns.map((column: DynamicListColumn<T>) => {
-        const columnData: React.ReactNode = renderData<T>(column, data);
+        const { columnData, tooltip } = renderData<T>(column, data);
 
         return (
           <div
@@ -179,14 +182,16 @@ export const DynamicListRow = <T extends Data>({
                 column.dataEntryRender !== undefined && allowEditing,
             })}
             key={column.key ?? (column.propertyName as string)}
+            style={{
+              justifyContent: horizontalTextAlign,
+              alignItems: verticalTextAlign,
+            }}
           >
             <div
-              className={classes.column}
-              title={
-                column.tooltip !== false
-                  ? getTooltipText(columnData)
-                  : undefined
-              }
+              className={clsx(classes.column, {
+                [classes.nowrap]: !textWrap,
+              })}
+              title={tooltip}
               data-test-id={`dynamic-list-property:${
                 column.propertyName as string
               }`}
@@ -226,22 +231,26 @@ export const DynamicListRow = <T extends Data>({
     </div>
   );
 };
-
-const renderData = function <T extends Data>(
+const renderData = <T extends Data>(
   column: DynamicListColumn<T>,
   data: T,
-): React.ReactNode {
+): { columnData: React.ReactNode; tooltip: string | undefined } => {
+  const getTooltip = (value: unknown): string | undefined =>
+    column.tooltip !== false ? getTooltipText(value) : undefined;
+
   if (!column.propertyName) {
-    return column.render!(undefined, data);
+    const columnData = column.render?.(undefined, data);
+    return { columnData, tooltip: getTooltip(columnData) };
   }
   const value: unknown = data[column.propertyName];
   if (column.render) {
-    return column.render(value, data);
+    const columnData = column.render(value, data);
+    return { columnData, tooltip: getTooltip(columnData) };
   }
 
   if (value === null || value === undefined) {
-    return '';
+    return { columnData: <span />, tooltip: undefined };
   }
 
-  return String(value);
+  return { columnData: String(value), tooltip: getTooltip(String(value)) };
 };

package/src/components/Explorer/Explorer.stories.tsx

@@ -65,6 +65,7 @@ const groups = createGroups({
     'rowGap',
     'verticalTextAlign',
     'horizontalTextAlign',
+    'textWrap',
     'headerRowActionSize',
     'listRowActionSize',
   ],

package/src/components/Explorer/Explorer.tsx

@@ -92,6 +92,9 @@ export interface ExplorerProps<T extends Data> {
   /** Vertical alignment of text */
   verticalTextAlign?: 'start' | 'center' | 'end';
 
+  /** If set to true, column text overflow will be wrapped to a new line. Otherwise, it will be truncated with an ellipsis (default: true) */
+  textWrap?: boolean;
+
   /** Defines when the loading of the next page is triggered. The number represents the number of row left, before a load is triggered. (default: 10) */
   loadingTriggerOffset?: number;
 
@@ -183,6 +186,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     headerRowActionSize,
     horizontalTextAlign,
     verticalTextAlign,
+    textWrap,
 
     columns,
     filterOptions,
@@ -479,6 +483,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
           headerRowActionSize={headerRowActionSize}
           horizontalTextAlign={horizontalTextAlign}
           verticalTextAlign={verticalTextAlign}
+          textWrap={textWrap}
           keyProperty={keyProperty}
           showActionButton={Boolean(generateItemLink) || Boolean(onItemClicked)} // or hard code to `true`?
           selectionMode={mode}

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

@@ -54,7 +54,7 @@ const generateData = (amount: number): ListStoryData[] =>
   generateItemArray(amount, (index) => ({
     id: index + 1,
     desc: `Description ${index + 1}: ${faker.lorem.words(
-      faker.datatype.number({ min: 10, max: 20 }),
+      faker.datatype.number({ min: 10, max: 50 }),
     )}`,
     title: `Item ${index + 1}: ${faker.random.words(
       faker.datatype.number({ min: 1, max: 3 }),
@@ -92,6 +92,7 @@ const groups = createGroups({
   Styling: [
     'horizontalTextAlign',
     'verticalTextAlign',
+    'textWrap',
     'minimumWidth',
     'columnGap',
     'rowGap',

package/src/components/List/List.tsx

@@ -65,6 +65,8 @@ export interface ListProps<T extends Data> {
   horizontalTextAlign?: 'left' | 'right' | 'center';
   /** Vertical alignment of text */
   verticalTextAlign?: 'start' | 'center' | 'end';
+  /** If set to true, column text overflow will be wrapped to a new line. Otherwise, it will be truncated with an ellipsis (default: false) */
+  textWrap?: boolean;
   /**
    * Determines which select mode the list is in. (default: ListSelectMode.None)
    * If 'Single' is selected, a check mark will be rendered for each row of data
@@ -122,7 +124,7 @@ const ListRenderer = <T extends Data>(
     columnGap = '5px',
     rowGap = '0px',
     headerRowHeight = '44px',
-    listRowHeight = '50px',
+    listRowHeight,
     listRowActionSize = '50px',
     headerRowActionSize = '28px',
     horizontalTextAlign = 'left',
@@ -134,6 +136,7 @@ const ListRenderer = <T extends Data>(
     selectionMode = ListSelectMode.None,
     enableSelectAll = true,
     enableSelectAllDeselect = false,
+    textWrap,
     onItemClicked = noop,
     onItemSelected = noop,
     onRequestMoreData = noop,
@@ -300,6 +303,7 @@ const ListRenderer = <T extends Data>(
           actionSize={listRowActionSize}
           horizontalTextAlign={horizontalTextAlign}
           verticalTextAlign={verticalTextAlign}
+          textWrap={textWrap}
           selectionMode={selectionMode}
           showActionButton={
             selectionMode === ListSelectMode.None &&

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

@@ -29,17 +29,24 @@
 
   .cellWrapper {
     display: grid;
-    align-content: center;
     width: 100%;
     height: 100%;
   }
 
   .cell {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
     max-width: 100%;
     max-height: 100%;
+
+    span {
+      padding: 5px 0;
+      display: grid;
+    }
+
+    &.nowrap {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
   }
 
   .actions {

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

@@ -566,4 +566,39 @@ describe('ListRow', () => {
       expect(cell.prop('title')).toBe(mockValue);
     });
   });
+
+  describe('column text alignments', () => {
+    const alignments: {
+      horizontal: 'left' | 'right' | 'center';
+      vertical: 'center' | 'start' | 'end';
+    }[] = [
+      { horizontal: 'center', vertical: 'center' },
+      { horizontal: 'left', vertical: 'start' },
+      { horizontal: 'right', vertical: 'end' },
+    ];
+
+    alignments.forEach(({ horizontal, vertical }) => {
+      it(`should apply the correct styles for textAlign: ${horizontal}, alignSelf: ${vertical}`, () => {
+        const wrapper = mount(
+          <ListRow
+            {...mockProps}
+            columns={[{ propertyName: 'id', size: '1fr', label: 'id' }]}
+            horizontalTextAlign={horizontal}
+            verticalTextAlign={vertical}
+          />,
+        );
+
+        const wrapperDivs = wrapper.findWhere((node) =>
+          node.prop('data-test-id')?.startsWith('list-entry-property'),
+        );
+
+        wrapperDivs.forEach((node) => {
+          const style = node.prop('style');
+
+          expect(style).toHaveProperty('textAlign', horizontal);
+          expect(style).toHaveProperty('alignSelf', vertical);
+        });
+      });
+    });
+  });
 });

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

@@ -19,13 +19,15 @@ export interface ListRowProps<T extends Data> {
   /** Header row height */
   columnGap: string;
   /** List row height */
-  rowHeight: string;
+  rowHeight?: string;
   /** Size of action button and checkbox */
   actionSize: string;
   /** Horizontal alignment of text */
   horizontalTextAlign: 'left' | 'right' | 'center';
   /** Vertical alignment of text */
   verticalTextAlign: 'start' | 'center' | 'end';
+  /** If set to true, column text overflow will be wrapped to a new line. Otherwise, it will be truncated with an ellipsis (default: false) */
+  textWrap?: boolean;
   /** List data */
   data: T;
   /** The column definition */
@@ -81,32 +83,54 @@ export const setLocale = (locale: string): void => {
 
 setLocale(navigator.language);
 
-function renderData<T extends Data>(
+const renderData = <T extends Data>(
   column: Column<T>,
   rowData: T,
-): React.ReactNode {
+): { columnData: React.ReactNode; tooltip: string | undefined } => {
+  const getTooltip = (value: unknown): string | undefined =>
+    column.tooltip !== false ? getTooltipText(value) : undefined;
+
   if (!column.propertyName) {
-    return column.render!(undefined, rowData);
+    const columnData = column.render?.(undefined, rowData);
+    return {
+      columnData,
+      tooltip: getTooltip(columnData),
+    };
   }
   const value: unknown = rowData[column.propertyName];
   if (column.render) {
-    return column.render(value, rowData);
+    const columnData = column.render(value, rowData);
+    return {
+      columnData,
+      tooltip: getTooltip(columnData),
+    };
   }
 
   if (value === null || value === undefined) {
-    return '';
+    return { columnData: <span />, tooltip: undefined };
   }
 
   if (typeof value === 'number') {
-    return numberFormatter.format(value);
+    const columnData = numberFormatter.format(value);
+    return {
+      columnData: <span>{columnData}</span>,
+      tooltip: getTooltip(columnData),
+    };
   }
 
   if (value instanceof Date) {
-    return dateFormatter.format(value);
+    const columnData = dateFormatter.format(value);
+    return {
+      columnData: <span>{columnData}</span>,
+      tooltip: getTooltip(columnData),
+    };
   }
 
-  return String(value);
-}
+  return {
+    columnData: <span>{String(value)}</span>,
+    tooltip: getTooltip(String(value)),
+  };
+};
 
 /**
  * Renders the rows for the list component
@@ -128,6 +152,7 @@ export const ListRow = <T extends Data>({
   actionSize,
   horizontalTextAlign,
   verticalTextAlign,
+  textWrap = false,
   data,
   itemSelected = false,
   isTrigger = false,
@@ -143,7 +168,7 @@ export const ListRow = <T extends Data>({
   inlineMenuActions,
 }: PropsWithChildren<ListRowProps<T>>): JSX.Element => {
   const customRootStyles = {
-    gridAutoRows: rowHeight,
+    gridAutoRows: `minmax(50px, ${rowHeight})`,
     gridColumnGap: columnGap,
     justifyItems: horizontalTextAlign,
     alignItems: verticalTextAlign,
@@ -199,7 +224,7 @@ export const ListRow = <T extends Data>({
     typeof onItemClicked !== 'function';
 
   const generateCells: JSX.Element[] = columns.map((column: Column<T>) => {
-    const columnData: React.ReactNode = renderData<T>(column, data);
+    const { columnData, tooltip } = renderData<T>(column, data);
 
     return (
       <div
@@ -207,12 +232,14 @@ export const ListRow = <T extends Data>({
         className={classes.cellWrapper}
       >
         <div
-          className={classes.cell}
-          title={
-            column.tooltip !== false ? getTooltipText(columnData) : undefined
-          }
+          className={clsx(classes.cell, { [classes.nowrap]: !textWrap })}
+          title={tooltip}
           data-test-id={`list-entry-property:${column.propertyName as string}`}
-          style={{ justifySelf: column.horizontalColumnAlign }}
+          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
+          }}
         >
           {columnData}
         </div>

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

@@ -10,7 +10,7 @@ export interface ListRowLoaderProps<T extends Data> {
   /** Space between columns */
   columnGap: string;
   /** List row height */
-  rowHeight: string;
+  rowHeight?: string;
   /** The column definition */
   columns: Column<T>[];
 }
@@ -25,7 +25,7 @@ export const ListRowLoader = <T extends Data>({
   const rows = 5;
 
   const customRowStyles = {
-    gridAutoRows: rowHeight,
+    gridAutoRows: `minmax(50px, ${rowHeight})`,
     gridTemplateColumns: columnSizes,
     gridColumnGap: columnGap,
   } as React.CSSProperties;