@axinom/mosaic-ui 0.35.0-rc.9 → 0.36.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.35.0-rc.9",
+  "version": "0.36.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.8-rc.9",
+    "@axinom/mosaic-core": "^0.4.9-rc.0",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -104,5 +104,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "294d6a683845640ef70dc4ed5e9f057dfaacc388"
+  "gitHead": "b232d67a1f8a7b0b696fb1e962cf353e09445af0"
 }

package/src/components/Buttons/Button/Button.model.ts

@@ -20,11 +20,11 @@ export type ButtonProps =
  */
 export interface NavigationButtonProps
   extends CommonNavigationButtonOptions,
-    Pick<ButtonIconOptions, 'icon'> {}
+    Pick<ButtonIconOptions, 'icon' | 'customIcon'> {}
 
 /**
  * Button options for icon buttons with JS handlers
  */
 export interface ContextButtonProps
   extends CommonJsButtonOptions,
-    Pick<ButtonIconOptions, 'icon'> {}
+    Pick<ButtonIconOptions, 'icon' | 'customIcon'> {}

package/src/components/Buttons/Button/Button.spec.tsx

@@ -9,6 +9,14 @@ const navigationButtonProps = {
   path: '/test',
 };
 
+const CustomIcon: React.FC = () => (
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 40 40"
+  ></svg>
+);
+
 describe('Button (with icon)', () => {
   describe('ContextButtonElement', () => {
     it('renders the component without crashing', () => {
@@ -139,6 +147,25 @@ describe('Button (with icon)', () => {
 
       expect(icon.exists()).toBe(true);
     });
+
+    it('renders `customIcon` when provided', () => {
+      const wrapper = mount(<Button customIcon={<CustomIcon />} />);
+      const customIcon = wrapper.find(CustomIcon);
+
+      expect(customIcon.exists()).toBe(true);
+    });
+
+    it('renders `customIcon` instead of `icon` when both are provided', () => {
+      const wrapper = mount(
+        <Button icon={IconName.ChevronRight} customIcon={<CustomIcon />} />,
+      );
+
+      const customIcon = wrapper.find(CustomIcon);
+      const icon = wrapper.find(Icons);
+
+      expect(customIcon.exists()).toBe(true);
+      expect(icon.exists()).toBe(false);
+    });
   });
 
   describe('NavigationButtonElement', () => {
@@ -297,5 +324,34 @@ describe('Button (with icon)', () => {
 
       expect(icons.prop('icon')).toBe(mockIcon);
     });
+
+    it('renders `customIcon` when provided', () => {
+      const wrapper = mount(
+        <Router>
+          <Button {...navigationButtonProps} customIcon={<CustomIcon />} />
+        </Router>,
+      );
+      const customIcon = wrapper.find(CustomIcon);
+
+      expect(customIcon.exists()).toBe(true);
+    });
+
+    it('renders `customIcon` instead of `icon` when both are provided', () => {
+      const wrapper = mount(
+        <Router>
+          <Button
+            {...navigationButtonProps}
+            icon={IconName.ChevronRight}
+            customIcon={<CustomIcon />}
+          />
+        </Router>,
+      );
+
+      const customIcon = wrapper.find(CustomIcon);
+      const icon = wrapper.find(Icons);
+
+      expect(customIcon.exists()).toBe(true);
+      expect(icon.exists()).toBe(false);
+    });
   });
 });

package/src/components/Buttons/Button/Button.tsx

@@ -17,6 +17,7 @@ const ButtonElement: React.ForwardRefRenderFunction<
 > = (
   {
     className,
+    customIcon,
     dataTestId,
     disabled = false,
     height,
@@ -30,6 +31,7 @@ const ButtonElement: React.ForwardRefRenderFunction<
 ) => {
   const commonProps = {
     className,
+    customIcon,
     dataTestId,
     disabled,
     height,
@@ -65,6 +67,7 @@ const ContextButtonElement = React.forwardRef<
     disabled = false,
     icon,
     className = '',
+    customIcon,
     dataTestId,
     onButtonClicked = noop,
     onBlur,
@@ -91,7 +94,7 @@ const ContextButtonElement = React.forwardRef<
       onBlur={onBlur}
       data-test-id={dataTestId ?? 'button'}
     >
-      <Icons icon={icon} />
+      {customIcon ? customIcon : <Icons icon={icon} />}
     </button>
   );
 });
@@ -105,6 +108,7 @@ const NavigationButtonElement = React.forwardRef<
     height,
     width,
     icon,
+    customIcon,
     className = '',
     dataTestId = undefined,
     disabled = false,
@@ -129,7 +133,7 @@ const NavigationButtonElement = React.forwardRef<
       data-test-id={dataTestId ?? 'button'}
       target={openInNewTab ? '_blank' : undefined}
     >
-      <Icons icon={icon ? icon : defaultIcon} />
+      {customIcon ? customIcon : <Icons icon={icon ? icon : defaultIcon} />}
     </Link>
   );
 });

package/src/components/Buttons/Button.model.ts

@@ -66,6 +66,11 @@ export interface ButtonIconOptions {
   icon?: IconName;
   /** Optional Icon Position */
   iconPosition?: 'left' | 'right';
+  /**
+   * Optional custom icon.
+   * When provided, `icon` property is ignored.
+   */
+  customIcon?: React.ReactNode;
 }
 
 /**

package/src/components/Buttons/CompositeButton/CompositeButton.spec.tsx

@@ -1,10 +1,18 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
-import { IconName } from '../../Icons';
+import { IconName, Icons } from '../../Icons';
 import { ButtonContext } from '../Button.model';
 import { CompositeButton } from './CompositeButton';
 
+const CustomIcon: React.FC = () => (
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 40 40"
+  ></svg>
+);
+
 describe('CompositeButton', () => {
   describe('Composite context button', () => {
     it('renders the component without crashing', () => {
@@ -143,6 +151,26 @@ describe('CompositeButton', () => {
 
       expect(button.text()).toBe('');
     });
+
+    it('renders `customIcon` when provided', () => {
+      const wrapper = mount(<CompositeButton customIcon={<CustomIcon />} />);
+      const customIcon = wrapper.find(CustomIcon);
+
+      expect(customIcon.exists()).toBeTruthy();
+    });
+
+    it('renders `customIcon` instead of `icon` when both provided', () => {
+      const wrapper = mount(
+        <CompositeButton
+          customIcon={<CustomIcon />}
+          icon={IconName.ChevronRight}
+        />,
+      );
+      const customIcon = wrapper.find(CustomIcon);
+
+      expect(customIcon.exists()).toBeTruthy();
+      expect(wrapper.find(Icons).exists()).toBeFalsy();
+    });
   });
 
   describe('Composite navigation button', () => {
@@ -298,6 +326,33 @@ describe('CompositeButton', () => {
       expect(iconDiv.find('Icons').prop('icon')).toBe(IconName.External);
     });
 
+    it('renders `customIcon` when provided', () => {
+      const wrapper = mount(
+        <Router>
+          <CompositeButton customIcon={<CustomIcon />} path="/example" />
+        </Router>,
+      );
+      const customIcon = wrapper.find(CustomIcon);
+
+      expect(customIcon.exists()).toBeTruthy();
+    });
+
+    it('renders `customIcon` instead of `icon` when both provided', () => {
+      const wrapper = mount(
+        <Router>
+          <CompositeButton
+            customIcon={<CustomIcon />}
+            icon={IconName.ChevronRight}
+            path="/example"
+          />
+        </Router>,
+      );
+      const iconDiv = wrapper.find('div').at(1);
+
+      expect(iconDiv.find('CustomIcon').exists()).toBeTruthy();
+      expect(iconDiv.find('Icons').exists()).toBeFalsy();
+    });
+
     it('renders the default data-test-id when dataTestId prop is not provided', () => {
       const wrapper = mount(
         <Router>

package/src/components/Buttons/CompositeButton/CompositeButton.tsx

@@ -22,6 +22,7 @@ import classes from './CompositeButton.scss';
  */
 export const CompositeButton: React.FC<CompositeButtonProps> = ({
   className,
+  customIcon,
   dataTestId,
   disabled,
   height,
@@ -35,6 +36,7 @@ export const CompositeButton: React.FC<CompositeButtonProps> = ({
 }) => {
   const commonProps = {
     className,
+    customIcon,
     dataTestId,
     disabled,
     height,
@@ -57,6 +59,7 @@ export const CompositeButton: React.FC<CompositeButtonProps> = ({
 const CompositeContextButton: React.FC<CompositeJsButtonProps> = ({
   buttonContext = ButtonContext.Context,
   className,
+  customIcon,
   dataTestId = undefined,
   disabled = false,
   height,
@@ -90,7 +93,10 @@ const CompositeContextButton: React.FC<CompositeJsButtonProps> = ({
     >
       <div>{text}</div>
       <div className={classes.icon}>
-        {icon !== null && icon !== undefined && <Icons icon={icon} />}
+        {customIcon ||
+          (icon !== null && icon !== undefined ? (
+            <Icons icon={icon} />
+          ) : undefined)}
       </div>
     </button>
   );
@@ -98,6 +104,7 @@ const CompositeContextButton: React.FC<CompositeJsButtonProps> = ({
 
 const CompositeNavigationButton: React.FC<CompositeNavigationButtonProps> = ({
   className,
+  customIcon,
   dataTestId = undefined,
   disabled = false,
   height,
@@ -129,7 +136,7 @@ const CompositeNavigationButton: React.FC<CompositeNavigationButtonProps> = ({
     >
       <div>{text}</div>
       <div className={classes.icon}>
-        <Icons icon={icon ? icon : defaultIcon} />
+        {customIcon ? customIcon : <Icons icon={icon ? icon : defaultIcon} />}
       </div>
     </Link>
   );

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

@@ -25,12 +25,17 @@ export interface DynamicListColumn<T extends Data> {
    */
   dataEntryRender?: DynamicListDataEntryRenderer;
 
+  /**
+   * Set if data editing is allowed
+   * Setting fieldType to either 'input' or 'select' will generate an element appropriate to that type.
+   * If not set, will use the dataEntryRender value.
+   */
+  dataEditRender?: DynamicListDataEntryRenderer;
+
   /** Performs a transformation on the value before being added to the list */
   onAddTransformer?: (value: unknown, data: T) => unknown;
 }
 
-export type DynamicListElevationOptions = 'above' | 'below';
-
 export type DynamicListDataEntryRenderer = (
   /** Value to render. */
   currentValue: unknown,

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

@@ -84,6 +84,7 @@ describe('DynamicDataList', () => {
   mockUseDataHandler.mockReturnValue({
     removeItem: jest.fn(),
     addItem: jest.fn(),
+    updateItem: jest.fn(),
     canAddItems: false,
     items: defaultData,
     nextPosition: 2,
@@ -302,6 +303,7 @@ describe('DynamicDataList', () => {
       mockUseDataHandler.mockReturnValue({
         removeItem: jest.fn(),
         addItem: jest.fn(),
+        updateItem: jest.fn(),
         canAddItems: true,
         items: defaultData,
         nextPosition: 2,
@@ -322,6 +324,7 @@ describe('DynamicDataList', () => {
       mockUseDataHandler.mockReturnValue({
         removeItem: jest.fn(),
         addItem: jest.fn(),
+        updateItem: jest.fn(),
         canAddItems: true,
         items: defaultData,
         nextPosition: mockLimit,
@@ -340,6 +343,7 @@ describe('DynamicDataList', () => {
       mockUseDataHandler.mockReturnValue({
         removeItem: jest.fn(),
         addItem: addItemSpy,
+        updateItem: jest.fn(),
         canAddItems: true,
         items: defaultData,
         nextPosition: 2,
@@ -369,6 +373,7 @@ describe('DynamicDataList', () => {
       mockUseDataHandler.mockReturnValue({
         removeItem: removeItemSpy,
         addItem: jest.fn(),
+        updateItem: jest.fn(),
         canAddItems: true,
         items: defaultData,
         nextPosition: 2,

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

@@ -66,6 +66,7 @@ const groups = createGroups({
   Behavior: [
     'allowRowDragging',
     'allowNewData',
+    'allowEditing',
     'showHeader',
     'allowAddAndRemove',
     'allowReordering',
@@ -373,3 +374,39 @@ export const WithInlineMenu: StoryObj<StoryDDLType> = {
     ],
   },
 };
+
+export const Editable: StoryObj<StoryDDLType> = {
+  name: 'Editable',
+  args: {
+    ...defaultProps,
+    columns: [
+      {
+        propertyName: 'id',
+        label: 'Id',
+        size: '50px',
+        dataEntryRender: createInputRenderer({
+          placeholder: 'Enter Id',
+        }),
+      },
+      {
+        propertyName: 'title',
+        label: 'Title',
+        dataEntryRender: createInputRenderer({
+          placeholder: 'Enter Title',
+        }),
+      },
+      {
+        propertyName: 'desc',
+        label: 'Description',
+        dataEntryRender: createInputRenderer(),
+      },
+    ],
+    allowNewData: true,
+    allowEditing: true,
+    defaultValuesForNewData: { desc: 'Description' },
+    rowValidationSchema: Yup.object({
+      id: Yup.number().required(),
+      title: Yup.string().required().max(25).label('Title'),
+    }),
+  },
+};

package/src/components/DynamicDataList/DynamicDataList.tsx

@@ -16,6 +16,7 @@ import { DynamicListColumn } from './DynamicDataList.model';
 import classes from './DynamicDataList.scss';
 import {
   DynamicListDataEntry,
+  DynamicListDataEntryMode,
   DynamicListDataEntryProps,
 } from './DynamicListDataEntry/DynamicListDataEntry';
 import { DynamicListHeader } from './DynamicListHeader/DynamicListHeader';
@@ -24,6 +25,7 @@ import { uuid } from './helpers/generateId';
 import { useColumnDefs } from './helpers/useColumnDefs';
 import { useDataHandler } from './helpers/useDataHandler';
 import { useRowAnimation } from './helpers/useRowAnimation';
+import { useRowEditing } from './helpers/useRowEditing';
 
 export interface DynamicDataListProps<T extends Data> {
   /**
@@ -63,6 +65,8 @@ export interface DynamicDataListProps<T extends Data> {
   allowRowDragging?: boolean;
   /** Whether or not new data can be added (default: false) */
   allowNewData?: boolean;
+  /** Whether or not existing data can be edited (default: false) */
+  allowEditing?: boolean;
   /** Custom DynamicListDataEntry component which will be rendered instead of the default component */
   customDataEntry?: React.FC<DynamicListDataEntryProps<T>>;
   /** Optional Yup validation object for validating new data */
@@ -115,6 +119,7 @@ export const DynamicDataList = <T extends Data>({
   allowReordering = true,
   allowRowDragging = true,
   allowNewData = false,
+  allowEditing = false,
   customDataEntry: CustomDataEntry,
   maxItemLimit,
   rowValidationSchema,
@@ -137,7 +142,7 @@ export const DynamicDataList = <T extends Data>({
       !!inlineMenuActions,
     );
 
-  const { addItem, removeItem, canAddItems, items, nextPosition } =
+  const { addItem, removeItem, updateItem, canAddItems, items, nextPosition } =
     useDataHandler(
       value,
       positionPropertyName,
@@ -147,6 +152,11 @@ export const DynamicDataList = <T extends Data>({
       onAddTransformData,
     );
 
+  const { editingRow, isEditing, startEditing, finishEditing } = useRowEditing(
+    allowEditing,
+    updateItem,
+  );
+
   const customStyles = {
     gridRowGap: rowGap,
     minWidth: minimumWidth,
@@ -204,33 +214,54 @@ export const DynamicDataList = <T extends Data>({
     idx: number,
     provided?: DraggableProvided,
     isDragging = false,
-  ): JSX.Element => (
-    <AnimatedRow data={data} key={idx}>
-      <DynamicListRow<T>
+  ): JSX.Element =>
+    editingRow !== data ? (
+      <AnimatedRow data={data} key={idx}>
+        <DynamicListRow<T>
+          key={idx}
+          columns={columns}
+          data={data}
+          columnSizes={columnSizes}
+          columnGap={columnGap}
+          rowHeight={listRowHeight}
+          actionSize={listRowActionSize}
+          horizontalTextAlign={horizontalTextAlign}
+          verticalTextAlign={verticalTextAlign}
+          allowRemove={allowNewData}
+          positionKey={positionPropertyName}
+          allowDragging={allowRowDragging}
+          onActionClicked={removeItem}
+          onPositionInputChanged={onPositionInputChangedHandler}
+          inlineMenuActions={inlineMenuActions}
+          rowClassNameProvider={rowClassNameProvider}
+          disabled={disabled}
+          provided={provided}
+          dragging={isDragging}
+          showActionColumn={showActionColumn}
+          showPositionColumn={showPositionColumn}
+          allowEditing={allowEditing}
+          onRowClicked={startEditing}
+        />
+      </AnimatedRow>
+    ) : CustomDataEntry ? (
+      <CustomDataEntry
         key={idx}
-        columns={columns}
-        data={data}
-        columnSizes={columnSizes}
-        columnGap={columnGap}
-        rowHeight={listRowHeight}
-        actionSize={listRowActionSize}
-        horizontalTextAlign={horizontalTextAlign}
-        verticalTextAlign={verticalTextAlign}
-        allowRemove={allowNewData}
-        positionKey={positionPropertyName}
-        allowDragging={allowRowDragging}
-        onActionClicked={(data) => removeItem(data)}
-        onPositionInputChanged={onPositionInputChangedHandler}
-        inlineMenuActions={inlineMenuActions}
-        rowClassNameProvider={rowClassNameProvider}
-        disabled={disabled}
-        provided={provided}
-        dragging={isDragging}
-        showActionColumn={showActionColumn}
-        showPositionColumn={showPositionColumn}
+        {...DynamicListDataEntryProps}
+        defaultValuesForNewData={data}
+        newDataPosition={undefined}
+        onActionClicked={finishEditing}
+        mode={DynamicListDataEntryMode.Edit}
       />
-    </AnimatedRow>
-  );
+    ) : (
+      <DynamicListDataEntry<T>
+        key={idx}
+        {...DynamicListDataEntryProps}
+        defaultValuesForNewData={data}
+        newDataPosition={undefined}
+        onActionClicked={finishEditing}
+        mode={DynamicListDataEntryMode.Edit}
+      />
+    );
 
   const DynamicListDataEntryProps: DynamicListDataEntryProps<T> = {
     columns,
@@ -241,7 +272,6 @@ export const DynamicDataList = <T extends Data>({
     actionSize: listRowActionSize,
     horizontalTextAlign,
     verticalTextAlign,
-    allowAdd: allowNewData,
     allowReordering,
     allowDragging: allowRowDragging,
     newDataPosition: nextPosition,
@@ -287,7 +317,7 @@ export const DynamicDataList = <T extends Data>({
         ) : (
           <DynamicListDataEntry<T> {...DynamicListDataEntryProps} />
         ))}
-      {allowReordering ? (
+      {allowReordering && !isEditing ? (
         <DragDropContext onDragEnd={onDragEndHandler}>
           <Droppable droppableId={uuid()}>
             {(provided) => (

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

@@ -2,7 +2,6 @@
 
 .container {
   width: 100%;
-  height: 100%;
 
   display: grid;
   grid-template-rows: 1fr;