@axinom/mosaic-ui 0.63.0-rc.0 → 0.63.0-rc.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.63.0-rc.0",
+  "version": "0.63.0-rc.10",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c111f5f22c27fa1ceaff19826888a61590b80651"
+  "gitHead": "1190cb91471f96c64d9c8c49574a4963f7b560c8"
 }

package/src/components/Accordion/Accordion.scss

@@ -42,6 +42,7 @@
 
     .button {
       transition: transform 200ms ease;
+
       svg {
         height: 40%;
       }
@@ -49,10 +50,19 @@
       svg * {
         stroke: var(--accordion-item-arrow-color, $accordion-item-arrow-color);
       }
+
+      &.disabled {
+        svg * {
+          stroke: var(
+            --accordion-item-arrow-disabled-color,
+            $accordion-item-arrow-disabled-color
+          );
+        }
+      }
+
+      &.rotated {
+        transform: rotate(90deg);
+      }
     }
   }
 }
-
-.rotated {
-  transform: rotate(90deg);
-}

package/src/components/Accordion/Accordion.spec.tsx

@@ -1,59 +1,30 @@
-import { mount, shallow } from 'enzyme';
+import '@testing-library/jest-dom';
+import { configure, fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
-import { Button } from '../Buttons';
-import { IconName } from '../Icons';
 import { Accordion } from './Accordion';
 import { AccordionItem } from './AccordionItem/AccordionItem';
 
+configure({ testIdAttribute: 'data-test-id' });
+
 describe('Accordion', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<Accordion />);
-
-    expect(wrapper).toBeTruthy();
-  });
+    render(<Accordion />);
 
-  it('contains a wrapper', () => {
-    const wrapper = shallow(<Accordion header={<b>Header</b>} />);
-
-    const accWrapper = wrapper.find('.container > div');
-
-    expect(accWrapper.hasClass('wrapper')).toBe(true);
+    expect(screen.getByTestId('accordion')).toBeInTheDocument();
   });
 
   it('renders the component header', () => {
-    const wrapper = shallow(<Accordion header={<b>Header</b>} />);
-
-    expect(wrapper.find('.header').exists()).toBeTruthy();
+    render(<Accordion header={<b>Header</b>} />);
+    expect(screen.getByTestId('accordion-header')).toBeInTheDocument();
   });
 
   it('does not render a header when the prop is not provided', () => {
-    const wrapper = shallow(<Accordion />);
-
-    expect(wrapper.find('.header').exists()).toBeFalsy();
-  });
-
-  it('populates toggleExpanded and isExpanded props of child AccordionItem components', () => {
-    const wrapper = mount(
-      <Accordion header={<b>Header</b>}>
-        <div id="extra"></div>
-        <AccordionItem header={<b>Item 1</b>}>
-          <p>Content 1</p>
-        </AccordionItem>
-      </Accordion>,
-    );
-
-    const item = wrapper.find(AccordionItem);
-    const extra = wrapper.find('#extra');
-
-    expect(item.prop('isExpanded')).toBeDefined();
-    expect(item.prop('toggleExpanded')).toBeDefined();
-
-    expect(extra.prop('isExpanded')).toBeUndefined();
-    expect(extra.prop('toggleExpanded')).toBeUndefined();
+    render(<Accordion />);
+    expect(screen.queryByTestId('accordion-header')).not.toBeInTheDocument();
   });
 
   it('expands / collapses all children when the button is clicked', () => {
-    const wrapper = mount(
+    render(
       <Accordion header={<b>Header</b>}>
         <AccordionItem header={<b>Item 1</b>}>
           <p>Content 1</p>
@@ -67,26 +38,31 @@ describe('Accordion', () => {
       </Accordion>,
     );
 
-    const button = wrapper.find('.header .button').first();
-    button.simulate('click');
+    // Find the expand/collapse all button (assuming it's the first button in header)
+    const headerButton = screen.getByTestId('accordion-toggle-all');
+    fireEvent.click(headerButton);
 
-    let items = wrapper.find(AccordionItem);
+    // All items should be expanded (content visible)
+    let rows = screen.getAllByTestId('accordion-item-content');
+    expect(rows).toHaveLength(3);
 
-    items.forEach((item) => {
-      expect(item.prop('isExpanded')).toBe(true);
+    rows.forEach((row) => {
+      expect(row).toHaveClass('expanded');
     });
 
-    button.simulate('click');
+    fireEvent.click(headerButton);
 
-    items = wrapper.find(AccordionItem);
+    // All items should be collapsed (content not visible)
+    rows = screen.getAllByTestId('accordion-item-content');
+    expect(rows).toHaveLength(3);
 
-    items.forEach((item) => {
-      expect(item.prop('isExpanded')).toBe(false);
+    rows.forEach((row) => {
+      expect(row).not.toHaveClass('expanded');
     });
   });
 
   it('displays rotated ChevronRight icon when one or more children are expanded', () => {
-    const wrapper = mount(
+    render(
       <Accordion header={<b>Header</b>}>
         <AccordionItem header={<b>Item 1</b>}>
           <p>Content 1</p>
@@ -100,25 +76,29 @@ describe('Accordion', () => {
       </Accordion>,
     );
 
-    let button = wrapper.find(Button).first();
-
-    expect(button.prop('icon')).toBe(IconName.ChevronRight);
-    expect(button.hasClass('rotated')).toBe(false);
+    // The button in the header should have the ChevronRight icon and not be rotated initially
+    const headerButton = screen.getByTestId('accordion-toggle-all');
+    expect(headerButton.querySelector('.rotated')).not.toBeInTheDocument();
 
-    const item = wrapper.find(AccordionItem).last();
+    // Expand the last item
+    const lastItemButton = screen.getAllByRole('button')[2];
+    fireEvent.click(lastItemButton);
 
-    item.find('button').simulate('click');
+    // Now the header button should have the rotated class
+    expect(headerButton).toHaveClass('rotated');
 
-    button = wrapper.find(Button).first();
+    // Collapse the last item
+    fireEvent.click(lastItemButton);
 
-    expect(button.prop('icon')).toBe(IconName.ChevronRight);
-    expect(button.hasClass('rotated')).toBe(true);
-
-    item.find('button').simulate('click');
+    // The header button should not have the rotated class anymore
+    expect(headerButton).not.toHaveClass('rotated');
+  });
 
-    button = wrapper.find(Button).first();
+  it('disables the expand/collapse all button when there are no children', () => {
+    render(<Accordion header={<b>Header</b>} />);
 
-    expect(button.prop('icon')).toBe(IconName.ChevronRight);
-    expect(button.hasClass('rotated')).toBe(false);
+    // The button should be disabled when there are no children
+    const headerButton = screen.getByTestId('accordion-toggle-all');
+    expect(headerButton).toBeDisabled();
   });
 });

package/src/components/Accordion/Accordion.stories.tsx

@@ -5,6 +5,7 @@ import { default as React, ReactNode, useEffect, useState } from 'react';
 import { createGroups, generateItemArray } from '../../helpers/storybook';
 import { TextButton } from '../Buttons/TextButton/TextButton';
 import { Divider } from '../FormElements';
+import { List } from '../List';
 import { Accordion } from './Accordion';
 import { AccordionItem } from './AccordionItem/AccordionItem';
 
@@ -17,12 +18,13 @@ const groups = createGroups({
 const generateItems = (
   startIndex?: number,
   sticky?: boolean,
+  children?: JSX.Element,
 ): JSX.Element[] => {
   return generateItemArray(10, (index) => {
     const key = index + (startIndex ?? 1);
     return (
       <AccordionItem key={key} header={<b>Item {key}</b>} sticky={sticky}>
-        <p>{faker.lorem.paragraph(20)}</p>
+        {children ?? <p>{faker.lorem.paragraph(20)}</p>}
       </AccordionItem>
     );
   });
@@ -56,7 +58,7 @@ export const Default: StoryObj<typeof Accordion> = {
   render: (args) => <Accordion {...args} header={<b>{args.header}</b>} />,
   args: {
     children: generateItems(),
-    header: 'Header' as any,
+    header: 'Header' as unknown as JSX.Element,
   },
   name: 'Default',
 };
@@ -103,3 +105,51 @@ export const AddingAndShuffling: StoryObj<typeof Accordion> = {
   },
   name: 'Adding and shuffling',
 };
+
+export const NestedSticky: StoryObj<typeof Accordion> = {
+  args: {
+    ...Default.args,
+    children: generateItems(
+      1,
+      true,
+      <div style={{ height: '350px' }}>
+        <List
+          columns={[
+            {
+              propertyName: 'id',
+              label: 'Id',
+              size: '50px',
+            },
+            {
+              propertyName: 'title',
+              label: 'Title',
+            },
+            {
+              propertyName: 'desc',
+              label: 'Description',
+            },
+          ]}
+          data={generateItemArray(10, (index) => ({
+            id: index + 1,
+            desc: `Description ${index + 1}: ${faker.lorem.words(
+              faker.datatype.number({ min: 10, max: 50 }),
+            )}`,
+            title: `Item ${index + 1}: ${faker.random.words(
+              faker.datatype.number({ min: 1, max: 3 }),
+            )}`,
+          }))}
+        />
+      </div>,
+    ),
+    stickyRows: true,
+  },
+  name: 'Nested Sticky',
+};
+
+export const NoChildren: StoryObj<typeof Accordion> = {
+  args: {
+    ...Default.args,
+    children: undefined,
+  },
+  name: 'No children',
+};

package/src/components/Accordion/Accordion.tsx

@@ -58,18 +58,21 @@ export const Accordion: React.FC<AccordionProps> = ({
 }) => {
   const expandAll = useExpand();
   const [expanded, setExpanded] = useState<ExpandedState>({});
+  const disabled = !React.Children.count(children);
 
   useEffect(() => {
     setExpanded((oldState) => {
-      const updatedState: ExpandedState = { ...oldState };
+      const updatedState: ExpandedState = {};
 
-      React.Children.map(children, (child, i) => {
+      React.Children.forEach(children, (child, i) => {
         if (React.isValidElement(child)) {
           if (child.type === AccordionItem) {
             const keyString = String(child.key ?? i);
 
-            if (!Object.keys(updatedState).includes(keyString)) {
+            if (!Object.keys(oldState).includes(keyString)) {
               updatedState[keyString] = expandedByDefault;
+            } else {
+              updatedState[keyString] = oldState[keyString];
             }
           }
         }
@@ -110,8 +113,11 @@ export const Accordion: React.FC<AccordionProps> = ({
               }}
               className={clsx(classes.button, {
                 [classes.rotated]: expandAll.isExpanded,
+                [classes.disabled]: disabled,
               })}
               buttonContext={ButtonContext.None}
+              disabled={disabled}
+              dataTestId="accordion-toggle-all"
             ></Button>
             {header}
           </div>

package/src/components/Accordion/AccordionItem/AccordionItem.scss

@@ -23,6 +23,7 @@
   }
 
   &.sticky {
+    z-index: 1;
     position: sticky;
     top: 50px;
   }

package/src/components/Accordion/AccordionItem/AccordionItem.spec.tsx

@@ -1,111 +1,73 @@
-import { mount, shallow } from 'enzyme';
+import '@testing-library/jest-dom';
+import { configure, fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import { AccordionItem } from './AccordionItem';
 
-describe('AccordionItem', () => {
-  it('renders the component without crashing', () => {
-    const wrapper = shallow(<AccordionItem header={<b>Item 1</b>} />);
-
-    expect(wrapper).toBeTruthy();
-  });
+configure({ testIdAttribute: 'data-test-id' });
 
-  it('renders expanded content', () => {
-    const wrapper = shallow(
-      <AccordionItem header={<b>Item 1</b>} isExpanded={true} />,
-    );
-
-    const content = wrapper.find('.expanded');
+describe('AccordionItem', () => {
+  const header = <span>Header</span>;
+  const content = <div>Accordion Content</div>;
 
-    expect(content).toHaveLength(1);
+  it('renders header and children', () => {
+    render(<AccordionItem header={header}>{content}</AccordionItem>);
+    expect(screen.getByText('Header')).toBeInTheDocument();
+    expect(screen.getByText('Accordion Content')).toBeInTheDocument();
   });
 
-  it('does not render expanded content when isExpanded is false', () => {
-    const wrapper = shallow(
-      <AccordionItem header={<b>Item 1</b>} isExpanded={false} />,
+  it('calls toggleExpanded when row is clicked', () => {
+    const toggleExpanded = jest.fn();
+    render(
+      <AccordionItem header={header} toggleExpanded={toggleExpanded}>
+        {content}
+      </AccordionItem>,
     );
-
-    const content = wrapper.find('.expanded');
-
-    expect(content).toHaveLength(0);
+    fireEvent.click(screen.getByTestId('accordion-item-row'));
+    expect(toggleExpanded).toHaveBeenCalled();
   });
 
-  it('triggers toggleExpanded callback when the expand button is pressed', () => {
-    const spy = jest.fn();
-    const wrapper = mount(
-      <AccordionItem header={<b>Item 1</b>} toggleExpanded={spy} />,
-    );
-
-    const button = wrapper.find('button');
-
-    button.simulate('click');
-
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
-
-  it('adds 50px spacing element by default', () => {
-    const wrapper = shallow(
-      <AccordionItem header={<b>Item 1</b>}>
-        <div></div>
+  it('shows expanded styles and rotates icon when isExpanded is true', () => {
+    render(
+      <AccordionItem header={header} isExpanded>
+        {content}
       </AccordionItem>,
     );
-
-    const contentStyles = wrapper
-      .find('.content')
-      .prop('style') as React.CSSProperties;
-    const children = wrapper.find('.content > div');
-
-    expect(contentStyles.gridTemplateColumns).toBeUndefined();
-    expect(children).toHaveLength(2);
+    const row = screen.getByTestId('accordion-item-row');
+    expect(row.className).toMatch(/rowExpanded/);
+    const button = row.querySelector('button');
+    expect(button?.className).toMatch(/rotated/);
+    const contentDiv = screen.getByTestId('accordion-item-content');
+    expect(contentDiv.className).toMatch(/expanded/);
   });
 
-  it(`doesn't add 50px spacing element if 'allowLeftSpacing' is set to false`, () => {
-    const wrapper = shallow(
-      <AccordionItem header={<b>Item 1</b>} allowLeftSpacing={false}>
-        <div></div>
+  it('applies sticky class when sticky is true', () => {
+    render(
+      <AccordionItem header={header} sticky>
+        {content}
       </AccordionItem>,
     );
-
-    const contentStyles = wrapper
-      .find('.content')
-      .prop('style') as React.CSSProperties;
-    const children = wrapper.find('.content > div');
-
-    expect(contentStyles.gridTemplateColumns).toBe('1fr');
-    expect(children).toHaveLength(1);
+    const row = screen.getByTestId('accordion-item-row');
+    expect(row.className).toMatch(/sticky/);
   });
 
-  it(`should set expanded class when 'isExpanded' is true`, () => {
-    const wrapper = mount(
-      <AccordionItem header={<b>Item 1</b>} isExpanded={true}>
-        <div></div>
+  it('does not add left spacing when allowLeftSpacing is false', () => {
+    render(
+      <AccordionItem header={header} allowLeftSpacing={false}>
+        {content}
       </AccordionItem>,
     );
-
-    const expanded = wrapper.find('.expanded');
-
-    expect(expanded).toHaveLength(1);
+    const contentDiv = screen.getByText('Accordion Content').parentElement;
+    expect(contentDiv).toHaveStyle('grid-template-columns: 1fr');
   });
 
-  it(`should not set expanded class when 'isExpanded' is true`, () => {
-    const wrapper = mount(
-      <AccordionItem header={<b>Item 1</b>} isExpanded={false}>
-        <div></div>
+  it('applies custom className to root element', () => {
+    render(
+      <AccordionItem header={header} className="custom-class">
+        {content}
       </AccordionItem>,
     );
-
-    const expanded = wrapper.find('.expanded');
-
-    expect(expanded).toHaveLength(0);
-  });
-
-  it('creates a class based off of the className prop', () => {
-    const mockClassName = 'test-class';
-    const wrapper = shallow(
-      <AccordionItem header={<b>Item 1</b>} className={mockClassName} />,
+    expect(screen.getByTestId('accordion-item').className).toContain(
+      'custom-class',
     );
-
-    const item = wrapper.find('.test-class');
-
-    expect(item.hasClass(mockClassName)).toBe(true);
   });
 });

package/src/components/Explorer/BulkEdit/FormFieldsConfigConverter.spec.tsx

@@ -16,12 +16,22 @@ jest.mock('../../FormElements', () => ({
   )),
 }));
 
+jest.mock('../../FieldSelection', () => ({
+  FieldSelection: jest.fn(({ children }) => (
+    <div data-testid="FieldSelection">{children}</div>
+  )),
+}));
+
 jest.mock('formik', () => ({
   Field: jest.fn(({ name, label, as: Component }) => (
     <div data-testid={`Field-${name}`}>
       <Component name={name} label={label} />
     </div>
   )),
+  useFormikContext: jest.fn(() => ({
+    setFieldValue: jest.fn(),
+    setFieldTouched: jest.fn(),
+  })),
 }));
 
 describe('BulkEditFormFieldsConfigConverter', () => {
@@ -35,9 +45,7 @@ describe('BulkEditFormFieldsConfigConverter', () => {
       },
     };
 
-    const { getByTestId } = render(
-      <>{BulkEditFormFieldsConfigConverter(config)}</>,
-    );
+    const { getByTestId } = render(BulkEditFormFieldsConfigConverter(config));
 
     expect(getByTestId('Field-title')).toBeInTheDocument();
     expect(getByTestId('SingleLineTextField')).toHaveTextContent('title-Title');
@@ -53,9 +61,7 @@ describe('BulkEditFormFieldsConfigConverter', () => {
       },
     };
 
-    const { getByTestId } = render(
-      <>{BulkEditFormFieldsConfigConverter(config)}</>,
-    );
+    const { getByTestId } = render(BulkEditFormFieldsConfigConverter(config));
 
     expect(getByTestId('Field-isArchived')).toBeInTheDocument();
     expect(getByTestId('CheckboxField')).toHaveTextContent(
@@ -77,9 +83,7 @@ describe('BulkEditFormFieldsConfigConverter', () => {
       },
     };
 
-    const { getByTestId } = render(
-      <>{BulkEditFormFieldsConfigConverter(config)}</>,
-    );
+    const { getByTestId } = render(BulkEditFormFieldsConfigConverter(config));
 
     expect(getByTestId('Field-tags')).toBeInTheDocument();
     expect(getByTestId('CustomTagsField')).toHaveTextContent('tags-Tags');
@@ -111,9 +115,7 @@ describe('BulkEditFormFieldsConfigConverter', () => {
       },
     };
 
-    const { getByTestId } = render(
-      <>{BulkEditFormFieldsConfigConverter(config)}</>,
-    );
+    const { getByTestId } = render(BulkEditFormFieldsConfigConverter(config));
 
     expect(getByTestId('Field-title')).toBeInTheDocument();
     expect(getByTestId('SingleLineTextField')).toHaveTextContent('title-Title');
@@ -138,14 +140,15 @@ describe('BulkEditFormFieldsConfigConverter', () => {
       },
     };
 
-    const { container } = render(
-      <>{BulkEditFormFieldsConfigConverter(config)}</>,
+    const { container, getByTestId } = render(
+      BulkEditFormFieldsConfigConverter(config),
     );
 
     expect(consoleWarnSpy).toHaveBeenCalledWith(
       'No component found for field type: UnsupportedType',
     );
-    expect(container.firstChild).toBeNull();
+    expect(getByTestId('FieldSelection')).toBeInTheDocument();
+    expect(container.firstChild).toBeEmptyDOMElement();
 
     consoleWarnSpy.mockRestore();
   });
@@ -153,10 +156,11 @@ describe('BulkEditFormFieldsConfigConverter', () => {
   it('handles empty configuration gracefully', () => {
     const config: BulkEditFieldConfigMap = {};
 
-    const { container } = render(
-      <>{BulkEditFormFieldsConfigConverter(config)}</>,
+    const { container, getByTestId } = render(
+      BulkEditFormFieldsConfigConverter(config),
     );
 
-    expect(container.firstChild).toBeNull();
+    expect(getByTestId('FieldSelection')).toBeInTheDocument();
+    expect(container.firstChild).toBeEmptyDOMElement();
   });
 });