@axinom/mosaic-ui 0.34.0-rc.31 → 0.34.0-rc.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.34.0-rc.31",
+  "version": "0.34.0-rc.33",
   "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.7-rc.31",
+    "@axinom/mosaic-core": "^0.4.7-rc.33",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -102,5 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "76aa11c0c081add5afb09b9885d02546206bd977"
+  "gitHead": "647ce65e0672bc19eade7956fad659ae752b9125"
 }

package/src/components/Explorer/SelectionExplorer/SelectionExplorer.spec.tsx

@@ -1,4 +1,5 @@
 import { mount, shallow } from 'enzyme';
+import { noop } from 'lodash';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { actWithReturn } from '../../../helpers/testing';
@@ -165,4 +166,52 @@ describe('SelectionExplorer', () => {
       mode: 'SINGLE_ITEMS',
     });
   });
+
+  it('shows inline menu with link to details page when `generateItemLink` is set', () => {
+    const [provider] = getDataProvider();
+    const path = '/test';
+
+    const wrapper = shallow(
+      <SelectionExplorer
+        columns={mockListColumns}
+        dataProvider={provider}
+        stationKey="mock-key"
+        onSelection={noop}
+        generateItemLink={() => path}
+      />,
+    );
+
+    const actions =
+      wrapper.find(Explorer).prop('inlineMenuActions')?.({}) || [];
+    expect(actions[0].path).toBe(path);
+    expect(actions[0].openInNewTab).toBe(true);
+  });
+
+  it('adds details page inline menu action when `inlineMenuActions` and `generateItemLink` is defined', () => {
+    const [provider] = getDataProvider();
+    const path = '/test';
+    const inlineAction = {
+      label: 'Test Action',
+      onActionSelected: noop,
+    };
+
+    const wrapper = shallow(
+      <SelectionExplorer
+        columns={mockListColumns}
+        dataProvider={provider}
+        stationKey="mock-key"
+        onSelection={noop}
+        inlineMenuActions={() => [inlineAction]}
+        generateItemLink={() => path}
+      />,
+    );
+
+    const actions =
+      wrapper.find(Explorer).prop('inlineMenuActions')?.({}) || [];
+
+    expect(actions[0]).toBe(inlineAction);
+
+    expect(actions[1].path).toBe(path);
+    expect(actions[1].openInNewTab).toBe(true);
+  });
 });

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

@@ -1,15 +1,20 @@
 import { faker } from '@faker-js/faker';
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
+import { noop } from 'lodash';
 import React, { useMemo } from 'react';
+import { MemoryRouter } from 'react-router';
 import {
   createGroups,
   generateItemArray,
   randomDate,
 } from '../../../helpers/storybook';
 import { FilterType, FilterTypes } from '../../Filters/Filters.model';
-import { ExplorerDataProvider } from '../Explorer.model';
-import { ExplorerStoryData } from '../ExplorerStoryType';
+import { IconName } from '../../Icons';
+import {
+  ExplorerDataProvider,
+  ExplorerDataProviderConfiguration,
+} from '../Explorer.model';
 import {
   createInMemoryDataProvider,
   findAnywhereInStringCaseInsensitive,
@@ -77,7 +82,7 @@ export default meta;
 const generateData = (
   amount: number,
   { startIndex = 1, usePrefix = true } = {},
-): ExplorerStoryData[] =>
+): SelectExplorerStoryData[] =>
   generateItemArray(amount, (i) => {
     const index = i + startIndex;
     return {
@@ -92,6 +97,49 @@ const generateData = (
     };
   });
 
+const generateDataProvider =
+  (): ExplorerDataProvider<SelectExplorerStoryData> => {
+    const pageSize = 20;
+
+    const actualProvider = createInMemoryDataProvider<SelectExplorerStoryData>(
+      generateData(100, {
+        usePrefix: false,
+      }),
+      {
+        filterFunctions: {
+          title: findAnywhereInStringCaseInsensitive,
+          desc: findAnywhereInStringCaseInsensitive,
+        },
+      },
+    );
+    return {
+      loadData: async (
+        config: ExplorerDataProviderConfiguration<SelectExplorerStoryData>,
+      ) => {
+        // Report the call
+        action('loadData')(config);
+
+        const currentPage = (config.pagingInformation as number) ?? 0;
+
+        // Use the in memory provider to do the heavy lifting
+        const { totalCount, filteredCount, data } =
+          await actualProvider.loadData(config);
+
+        // Apply paging to the results
+        return {
+          totalCount: totalCount,
+          filteredCount: filteredCount,
+          data: data.slice(
+            pageSize * currentPage,
+            pageSize * (currentPage + 1),
+          ),
+          pagingInformation: currentPage + 1,
+          hasMoreData: currentPage < 9,
+        };
+      },
+    };
+  };
+
 const freeTextFilter: FilterType<SelectExplorerStoryData> = {
   label: 'Title',
   property: 'title',
@@ -114,8 +162,7 @@ const optionFilter: FilterType<SelectExplorerStoryData> = {
   ],
 };
 
-export const SelectExplorer: StoryObj<SelectionExplorerStoryType> = {
-  name: 'Selection Explorer',
+export const Default: StoryObj<SelectionExplorerStoryType> = {
   args: {
     title: 'Selection Explorer',
     columns: [
@@ -141,46 +188,7 @@ export const SelectExplorer: StoryObj<SelectionExplorerStoryType> = {
   render: (args) =>
     React.createElement(() => {
       const dataProvider: ExplorerDataProvider<SelectExplorerStoryData> =
-        useMemo(() => {
-          const pageSize = 20;
-
-          const actualProvider =
-            createInMemoryDataProvider<SelectExplorerStoryData>(
-              generateData(100, {
-                usePrefix: false,
-              }),
-              {
-                filterFunctions: {
-                  title: findAnywhereInStringCaseInsensitive,
-                  desc: findAnywhereInStringCaseInsensitive,
-                },
-              },
-            );
-          return {
-            loadData: async (config) => {
-              // Report the call
-              action('loadData')(config);
-
-              const currentPage = (config.pagingInformation as number) ?? 0;
-
-              // Use the in memory provider to do the heavy lifting
-              const { totalCount, filteredCount, data } =
-                await actualProvider.loadData(config);
-
-              // Apply paging to the results
-              return {
-                totalCount: totalCount,
-                filteredCount: filteredCount,
-                data: data.slice(
-                  pageSize * currentPage,
-                  pageSize * (currentPage + 1),
-                ),
-                pagingInformation: currentPage + 1,
-                hasMoreData: currentPage < 9,
-              };
-            },
-          };
-        }, []);
+        useMemo(generateDataProvider, []);
 
       return (
         <SelectionExplorer<SelectExplorerStoryData>
@@ -190,3 +198,61 @@ export const SelectExplorer: StoryObj<SelectionExplorerStoryType> = {
       );
     }),
 };
+
+export const WithOpenDetailsInlineAction: StoryObj<SelectionExplorerStoryType> =
+  {
+    args: {
+      ...Default.args,
+      stationKey: 'SelectionStoryBookExplorer_WithOpenDetailsInlineAction',
+      generateItemLink: () => `#`,
+    },
+    render: (args) =>
+      React.createElement(() => {
+        const dataProvider: ExplorerDataProvider<SelectExplorerStoryData> =
+          useMemo(generateDataProvider, []);
+
+        return (
+          <MemoryRouter>
+            <SelectionExplorer<SelectExplorerStoryData>
+              {...args}
+              dataProvider={dataProvider}
+            />
+          </MemoryRouter>
+        );
+      }),
+  };
+
+export const WithInlineActions: StoryObj<SelectionExplorerStoryType> = {
+  args: {
+    ...Default.args,
+    stationKey: 'SelectionStoryBookExplorer_WithInlineActions',
+    inlineMenuActions: () => {
+      return [
+        {
+          label: 'Navigation Action',
+          icon: IconName.NavigateRight,
+          path: '#',
+        },
+        {
+          label: 'Context Action',
+          icon: IconName.Ellipsis,
+          onActionSelected: noop,
+        },
+      ];
+    },
+  },
+  render: (args) =>
+    React.createElement(() => {
+      const dataProvider: ExplorerDataProvider<SelectExplorerStoryData> =
+        useMemo(generateDataProvider, []);
+
+      return (
+        <MemoryRouter>
+          <SelectionExplorer<SelectExplorerStoryData>
+            {...args}
+            dataProvider={dataProvider}
+          />
+        </MemoryRouter>
+      );
+    }),
+};

package/src/components/Explorer/SelectionExplorer/SelectionExplorer.tsx

@@ -1,6 +1,8 @@
+import { LocationDescriptor } from 'history';
 import React, { ForwardedRef } from 'react';
 import { noop } from '../../../helpers/utils';
 import { Data } from '../../../types/data';
+import { ActionData } from '../../Actions/Actions.models';
 import { IconName } from '../../Icons';
 import { ListSelectMode } from '../../List';
 import { Explorer, ExplorerProps } from '../Explorer';
@@ -23,6 +25,9 @@ export interface SelectionExplorerProps<T extends Data>
    * The selected item (or items) will be passed as argument to the callback.
    */
   onSelection?: (selection: ItemSelection<T>) => void;
+
+  /** When set, this function is used to generate inline menu link that navigates user to details page for each item. */
+  generateItemLink?: (data: T) => LocationDescriptor<unknown>;
 }
 
 /**
@@ -38,14 +43,14 @@ export interface SelectionExplorerProps<T extends Data>
 export const SelectionExplorer = React.forwardRef(function SelectionExplorer<
   T extends Data,
 >(
-  props: SelectionExplorerProps<T>,
+  { generateItemLink, inlineMenuActions, ...rest }: SelectionExplorerProps<T>,
   ref: ForwardedRef<ExplorerDataProviderConnection<T>>,
 ): JSX.Element {
   const {
     allowBulkSelect = false,
     onSelection = noop,
     modalMode = true,
-  } = props;
+  } = rest;
 
   const onItemClickedHandler = (item: T, mode?: ListSelectMode): void => {
     // only if the list is not in Multi mode is this executed
@@ -54,10 +59,25 @@ export const SelectionExplorer = React.forwardRef(function SelectionExplorer<
     }
   };
 
+  let selectionExplorerActions = inlineMenuActions;
+
+  if (generateItemLink) {
+    selectionExplorerActions = (data: T): ActionData[] => {
+      return [
+        ...(inlineMenuActions?.(data) ?? []),
+        {
+          label: 'Open Details',
+          path: generateItemLink(data),
+          openInNewTab: true,
+        },
+      ];
+    };
+  }
+
   return (
     <Explorer<T>
+      {...rest}
       ref={ref}
-      {...props}
       modalMode={modalMode}
       bulkActions={[
         ...(allowBulkSelect
@@ -75,6 +95,7 @@ export const SelectionExplorer = React.forwardRef(function SelectionExplorer<
       ]}
       selectionMode={ListSelectMode.Single}
       onItemClicked={onItemClickedHandler}
+      inlineMenuActions={selectionExplorerActions}
     />
   );
 });

package/src/components/FormElements/FormElementContainer/FormElementContainer.scss

@@ -19,7 +19,6 @@
     font-size: var(--label-font-size, $label-font-size);
     color: var(--input-color, $input-color);
     max-width: 100%;
-    overflow: auto;
   }
 
   .label {

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

@@ -50,8 +50,11 @@
     margin-left: auto;
   }
 
-  .link {
+  .content {
     display: contents;
+  }
+
+  .link {
     color: inherit;
     text-decoration: none;
   }

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

@@ -229,7 +229,7 @@ describe('ListRow', () => {
   it('calls the "onItemClicked" event with data', () => {
     const spy = jest.fn();
     const wrapper = shallow(<ListRow {...mockProps} onItemClicked={spy} />);
-    wrapper.simulate('click');
+    wrapper.find('.content').simulate('click');
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith(mockExplorerData);
   });
@@ -258,9 +258,14 @@ describe('ListRow', () => {
   });
 
   it('raises checkBoxHandler', () => {
-    const spy = jest.fn();
+    const spy = jest.fn().mockImplementation(() => null);
     const wrapper = mount(
-      <ListRow {...mockProps} onItemSelected={spy} showItemCheckbox={true} />,
+      <ListRow
+        {...mockProps}
+        onItemSelected={spy}
+        showItemCheckbox={true}
+        selectionMode={ListSelectMode.Multi}
+      />,
     );
 
     const chk = wrapper.find(ListCheckBox);
@@ -366,7 +371,7 @@ describe('ListRow', () => {
         />,
       );
 
-      const row = wrapper.find('.columnsRoot');
+      const row = wrapper.find('.content');
 
       row.simulate('click');
 
@@ -388,7 +393,7 @@ describe('ListRow', () => {
         />,
       );
 
-      const row = wrapper.find('.columnsRoot');
+      const row = wrapper.find('.content');
 
       row.simulate('click');
 
@@ -411,7 +416,7 @@ describe('ListRow', () => {
         />,
       );
 
-      const row = wrapper.find('.columnsRoot');
+      const row = wrapper.find('.content');
 
       row.simulate('click');
 

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

@@ -230,32 +230,37 @@ export const ListRow = <T extends Data>({
         [classes.disabled]: isRowDisabled,
       })}
       style={customRootStyles}
-      onClick={() => {
-        onItemClickedHandler(data);
-      }}
       ref={isTrigger ? elementRef : null}
       data-test-id="list-entry"
     >
       {/* Items */}
       {isLinkable ? (
-        <Link to={onItemClicked as string} className={classes.link}>
+        <Link
+          to={onItemClicked as string}
+          className={clsx(classes.content, classes.link)}
+        >
           {generateCells}
         </Link>
       ) : (
-        <>{generateCells}</>
+        <div
+          className={classes.content}
+          onClick={() => onItemClickedHandler(data)}
+        >
+          {generateCells}
+        </div>
       )}
-      {(inlineMenuActions || showActionButton) &&
-        selectionMode === ListSelectMode.None && (
-          <div className={classes.actions}>
-            {inlineActionMenuData && inlineActionMenuData.length > 0 && (
-              <InlineMenu
-                actions={inlineActionMenuData}
-                showArrow={false}
-                placement="bottom-end"
-                onButtonClicked={(e) => e.stopPropagation()}
-              />
-            )}
-
+      <div className={classes.actions}>
+        {inlineMenuActions &&
+          inlineActionMenuData &&
+          inlineActionMenuData.length > 0 && (
+            <InlineMenu
+              actions={inlineActionMenuData}
+              showArrow={false}
+              placement="bottom-end"
+            />
+          )}
+        {showActionButton && selectionMode === ListSelectMode.None && (
+          <>
             {showActionButton &&
               (typeof onItemClicked !== 'function' ? (
                 <Button
@@ -273,27 +278,29 @@ export const ListRow = <T extends Data>({
                   dataTestId="list-entry-action"
                 />
               ))}
-          </div>
+          </>
         )}
 
-      {showCheckMark && (
-        <Button
-          icon={IconName.Checkmark}
-          height={actionSize}
-          width={actionSize}
-          dataTestId="list-entry-select-button"
-          className={clsx(classes.selectionCheckMark)}
-        />
-      )}
-      {showItemCheckbox && (
-        <ListCheckBox
-          height={actionSize}
-          width={actionSize}
-          onCheckBoxToggled={onItemSelected}
-          isChecked={itemSelected}
-          isDisabled={isRowDisabled}
-        />
-      )}
+        {showCheckMark && (
+          <Button
+            icon={IconName.Checkmark}
+            height={actionSize}
+            width={actionSize}
+            dataTestId="list-entry-select-button"
+            className={classes.selectionCheckMark}
+            onButtonClicked={() => onItemClickedHandler(data)}
+          />
+        )}
+        {showItemCheckbox && (
+          <ListCheckBox
+            height={actionSize}
+            width={actionSize}
+            onCheckBoxToggled={() => onItemClickedHandler(data)}
+            isChecked={itemSelected}
+            isDisabled={isRowDisabled}
+          />
+        )}
+      </div>
     </div>
   );