@axinom/mosaic-ui 0.56.0-rc.5 → 0.56.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.56.0-rc.5",
+  "version": "0.56.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.29-rc.5",
+    "@axinom/mosaic-core": "^0.4.29",
     "@faker-js/faker": "^7.4.0",
     "@geoffcox/react-splitter": "^2.1.2",
     "@mui/base": "5.0.0-beta.40",
@@ -40,6 +40,7 @@
     "clsx": "^1.1.0",
     "lodash": "^4.17.21",
     "luxon": "^3.3.0",
+    "postcss": "^8.4.4",
     "react-beautiful-dnd": "^13.1.1",
     "react-calendar": "^3.3.1",
     "react-content-loader": "^6.0.3",
@@ -93,7 +94,7 @@
     "rimraf": "^3.0.2",
     "rollup": "^2.28.1",
     "rollup-plugin-peer-deps-external": "^2.2.3",
-    "rollup-plugin-postcss": "^2.9.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^5.3.1",
     "rollup-plugin-typescript2": "^0.29.0",
     "rollup-plugin-visualizer": "^5.8.3",
@@ -107,5 +108,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "02b282719a41213749fe017cb2b2a18bd950a8b6"
+  "gitHead": "c3802f0be74822f25268d4fdf7497a1c1577309d"
 }

package/src/components/Accordion/Accordion.scss

@@ -41,6 +41,7 @@
     }
 
     .button {
+      transition: transform 200ms ease;
       svg {
         height: 40%;
       }
@@ -51,3 +52,7 @@
     }
   }
 }
+
+.rotated {
+  transform: rotate(90deg);
+}

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

@@ -85,7 +85,7 @@ describe('Accordion', () => {
     });
   });
 
-  it('displays collapse icon when one or more children are expanded', () => {
+  it('displays rotated ChevronRight icon when one or more children are expanded', () => {
     const wrapper = mount(
       <Accordion header={<b>Header</b>}>
         <AccordionItem header={<b>Item 1</b>}>
@@ -103,6 +103,7 @@ describe('Accordion', () => {
     let button = wrapper.find(Button).first();
 
     expect(button.prop('icon')).toBe(IconName.ChevronRight);
+    expect(button.hasClass('rotated')).toBe(false);
 
     const item = wrapper.find(AccordionItem).last();
 
@@ -110,12 +111,14 @@ describe('Accordion', () => {
 
     button = wrapper.find(Button).first();
 
-    expect(button.prop('icon')).toBe(IconName.ChevronDown);
+    expect(button.prop('icon')).toBe(IconName.ChevronRight);
+    expect(button.hasClass('rotated')).toBe(true);
 
     item.find('button').simulate('click');
 
     button = wrapper.find(Button).first();
 
     expect(button.prop('icon')).toBe(IconName.ChevronRight);
+    expect(button.hasClass('rotated')).toBe(false);
   });
 });

package/src/components/Accordion/Accordion.tsx

@@ -95,11 +95,7 @@ export const Accordion: React.FC<AccordionProps> = ({
         {header && (
           <div className={clsx(classes.header)} data-test-id="accordion-header">
             <Button
-              icon={
-                expandAll.isExpanded
-                  ? IconName.ChevronDown
-                  : IconName.ChevronRight
-              }
+              icon={IconName.ChevronRight}
               onButtonClicked={() => {
                 const updatedState = { ...expanded };
 
@@ -110,7 +106,9 @@ export const Accordion: React.FC<AccordionProps> = ({
                 setExpanded(updatedState);
                 expandAll.toggleExpanded();
               }}
-              className={clsx(classes.button)}
+              className={clsx(classes.button, {
+                [classes.rotated]: expandAll.isExpanded,
+              })}
               buttonContext={ButtonContext.None}
             ></Button>
             {header}

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

@@ -6,10 +6,10 @@
   align-items: center;
   background-color: $light-gray;
   margin-top: 4px;
-  transition: box-shadow 0.15s ease-in-out 0s;
   height: 50px;
   cursor: pointer;
   color: var(--accordion-item-text-color, $accordion-item-text-color);
+  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
 
   &:hover {
     background-color: var(
@@ -30,7 +30,7 @@
 
 .container {
   overflow: hidden;
-  transition: max-height 100ms linear;
+  transition: max-height 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .expanded {
@@ -52,9 +52,14 @@
 .button {
   svg {
     height: 40%;
+    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   svg * {
     stroke: var(--accordion-item-arrow-color, $accordion-item-arrow-color);
   }
+
+  &.rotated > svg {
+    transform: rotate(90deg);
+  }
 }

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

@@ -62,8 +62,10 @@ export const AccordionItem: React.FC<AccordionItemProps> = ({
         onClick={toggleExpanded}
       >
         <Button
-          icon={isExpanded ? IconName.ChevronDown : IconName.ChevronRight}
-          className={classes.button}
+          icon={IconName.ChevronRight}
+          className={clsx(classes.button, {
+            [classes.rotated]: isExpanded,
+          })}
           buttonContext={ButtonContext.None}
         />
         {header}

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

@@ -261,7 +261,7 @@ describe('DynamicListDataEntry', () => {
     expect(input.prop('disabled')).toBe(true);
   });
 
-  it('accepts default values and sets them', () => {
+  it('accepts default values and sets them', async () => {
     const defaultData: Partial<TestData> = {
       desc: 'Description',
     };
@@ -280,15 +280,15 @@ describe('DynamicListDataEntry', () => {
 
     const button = wrapper.find(Button);
 
-    act(() => {
+    await act(async () => {
       // @ts-expect-error not full event args object
-      button.prop('onButtonClicked')?.(mockEvent);
+      await button.prop('onButtonClicked')?.(mockEvent);
     });
 
     expect(spy).toHaveBeenCalledWith(defaultData);
   });
 
-  it(`does not emit onActionClicked if data is invalid`, () => {
+  it(`does not emit onActionClicked if data is invalid`, async () => {
     const spy = jest.fn();
     const mockEvent = {
       e: 'event',
@@ -307,15 +307,15 @@ describe('DynamicListDataEntry', () => {
 
     const button = wrapper.find(Button);
 
-    act(() => {
+    await act(async () => {
       // @ts-expect-error not full event args object
-      button.prop('onButtonClicked')?.(mockEvent);
+      await button.prop('onButtonClicked')?.(mockEvent);
     });
 
     expect(spy).not.toHaveBeenCalled();
   });
 
-  it(`emits onActionClicked with property name and new value if there is data to send`, () => {
+  it(`emits onActionClicked with property name and new value if there is data to send`, async () => {
     const spy = jest.fn();
     const mockNewValue = 'test-value';
     const mockEvent = {
@@ -341,16 +341,16 @@ describe('DynamicListDataEntry', () => {
 
     const button = wrapper.find(Button);
 
-    act(() => {
+    await act(async () => {
       // @ts-expect-error not full event args object
-      button.prop('onButtonClicked')?.(mockEvent);
+      await button.prop('onButtonClicked')?.(mockEvent);
     });
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith({ [propertyName]: mockNewValue });
   });
 
-  it(`emits row data and new position when 'allowReordering' is true, 'newDataPosition' is defined, and is 'positionKey' is defined`, () => {
+  it(`emits row data and new position when 'allowReordering' is true, 'newDataPosition' is defined, and is 'positionKey' is defined`, async () => {
     const spy = jest.fn();
     const mockEvent = {
       e: 'event',
@@ -381,9 +381,9 @@ describe('DynamicListDataEntry', () => {
 
     const button = wrapper.find(Button);
 
-    act(() => {
+    await act(async () => {
       // @ts-expect-error not full event args object
-      button.prop('onButtonClicked')?.(mockEvent);
+      await button.prop('onButtonClicked')?.(mockEvent);
     });
 
     expect(spy).toHaveBeenCalledTimes(1);
@@ -393,7 +393,7 @@ describe('DynamicListDataEntry', () => {
     });
   });
 
-  it(`emits only row data when 'allowReordering' is false, 'newDataPosition' is defined, and is 'positionKey' is defined`, () => {
+  it(`emits only row data when 'allowReordering' is false, 'newDataPosition' is defined, and is 'positionKey' is defined`, async () => {
     const spy = jest.fn();
     const mockEvent = {
       e: 'event',
@@ -423,9 +423,9 @@ describe('DynamicListDataEntry', () => {
 
     const button = wrapper.find(Button);
 
-    act(() => {
+    await act(async () => {
       // @ts-expect-error not full event args object
-      button.prop('onButtonClicked')?.(mockEvent);
+      await button.prop('onButtonClicked')?.(mockEvent);
     });
 
     expect(spy).toHaveBeenCalledTimes(1);
@@ -434,7 +434,7 @@ describe('DynamicListDataEntry', () => {
     });
   });
 
-  it(`emits only row data when 'allowReordering' is true, 'newDataPosition' is undefined, and is 'positionKey' is defined`, () => {
+  it(`emits only row data when 'allowReordering' is true, 'newDataPosition' is undefined, and is 'positionKey' is defined`, async () => {
     const spy = jest.fn();
     const mockEvent = {
       e: 'event',
@@ -464,9 +464,9 @@ describe('DynamicListDataEntry', () => {
 
     const button = wrapper.find(Button);
 
-    act(() => {
+    await act(async () => {
       // @ts-expect-error not full event args object
-      button.prop('onButtonClicked')?.(mockEvent);
+      await button.prop('onButtonClicked')?.(mockEvent);
     });
 
     expect(spy).toHaveBeenCalledTimes(1);
@@ -475,7 +475,7 @@ describe('DynamicListDataEntry', () => {
     });
   });
 
-  it(`emits only row data when 'allowReordering' is true, 'newDataPosition' is defined, and is 'positionKey' is undefined`, () => {
+  it(`emits only row data when 'allowReordering' is true, 'newDataPosition' is defined, and is 'positionKey' is undefined`, async () => {
     const spy = jest.fn();
     const mockEvent = {
       e: 'event',
@@ -504,9 +504,9 @@ describe('DynamicListDataEntry', () => {
 
     const button = wrapper.find(Button);
 
-    act(() => {
+    await act(async () => {
       // @ts-expect-error not full event args object
-      button.prop('onButtonClicked')?.(mockEvent);
+      await button.prop('onButtonClicked')?.(mockEvent);
     });
 
     expect(spy).toHaveBeenCalledTimes(1);
@@ -515,7 +515,7 @@ describe('DynamicListDataEntry', () => {
     });
   });
 
-  it(`transform property if 'onAddTransformer' is set as a column option`, () => {
+  it(`transform property if 'onAddTransformer' is set as a column option`, async () => {
     const spy = jest.fn();
     const mockNewValue = 'test-value1';
     const mockEvent = {
@@ -550,9 +550,9 @@ describe('DynamicListDataEntry', () => {
 
     const button = wrapper.find(Button);
 
-    act(() => {
+    await act(async () => {
       // @ts-expect-error not full event args object
-      button.prop('onButtonClicked')?.(mockEvent);
+      await button.prop('onButtonClicked')?.(mockEvent);
     });
 
     expect(spy).toHaveBeenCalledTimes(1);

package/src/components/DynamicDataList/DynamicListDataEntry/DynamicListDataEntry.tsx

@@ -1,10 +1,5 @@
 import clsx from 'clsx';
-import React, {
-  PropsWithChildren,
-  ReactElement,
-  useEffect,
-  useState,
-} from 'react';
+import React, { PropsWithChildren, ReactElement, useState } from 'react';
 import { ValidationError } from 'yup';
 import { OptionalObjectSchema } from 'yup/lib/object';
 import { noop } from '../../../helpers/utils';
@@ -110,27 +105,29 @@ export const DynamicListDataEntry = <T extends Data>({
   const [isDirty, setIsDirty] = useState<boolean>(false);
   const [error, setError] = useState<Record<string, string>>({});
 
-  useEffect(() => {
-    if (rowValidationSchema && isDirty) {
-      rowValidationSchema
-        ?.validate(state, { abortEarly: false })
-        .then(() => {
-          setError({});
-        })
-        .catch((e: ValidationError) => {
-          const newErrors: Record<string, string> = {};
-          e.inner.forEach((validationError) => {
-            if (validationError.path !== undefined) {
-              const path = validationError.path;
-              if (newErrors?.[path] === undefined) {
-                newErrors[path] = validationError.message;
-              }
-            }
-          });
-          setError(newErrors);
-        });
+  const validateSchema = async (data: T): Promise<boolean> => {
+    if (!rowValidationSchema) {
+      return true;
     }
-  }, [isDirty, rowValidationSchema, state]);
+
+    try {
+      await rowValidationSchema.validate(data, { abortEarly: false });
+      setError({});
+
+      return true;
+    } catch (e) {
+      const newErrors: Record<string, string> = {};
+      (e as ValidationError).inner.forEach((validationError) => {
+        const path = validationError.path;
+        if (path !== undefined && newErrors?.[path] === undefined) {
+          newErrors[path] = validationError.message;
+        }
+      });
+      setError(newErrors);
+
+      return false;
+    }
+  };
 
   /**
    * Updates new data object with supplied key/value pair
@@ -138,10 +135,12 @@ export const DynamicListDataEntry = <T extends Data>({
    * @param value new value
    */
   const valueChangedHandler = (property: keyof T, value: unknown): void => {
+    const newState = { ...state, [property]: value };
+
     setIsDirty(true);
-    setState((prevState) => {
-      return { ...prevState, [property]: value };
-    });
+    setState(newState);
+
+    validateSchema(newState);
   };
 
   /**
@@ -149,11 +148,11 @@ export const DynamicListDataEntry = <T extends Data>({
    * @param data T
    */
   const onAddItemHandler = async (): Promise<void> => {
-    // TODO: Display a warning if no data was entered?
-    if (rowValidationSchema && !(await rowValidationSchema?.isValid(state))) {
+    const isValid = await validateSchema(state);
+
+    if (!isValid) {
       setIsDirty(true);
-      // eslint-disable-next-line no-console
-      return console.warn('Data not valid');
+      return;
     }
 
     let transformedState: T = state;

package/src/components/FormElements/BooleanView/BooleanViewField.spec.tsx

@@ -20,11 +20,11 @@ describe('BooleanViewField', () => {
 
   it('displays default true, false label values', () => {
     const wrapper1 = shallow(<BooleanViewField value={true} />);
-    const text1 = wrapper1.find('.text');
+    const text1 = wrapper1.find('[data-test-id="form-field-value"]');
     expect(text1.text()).toBe('True');
 
     const wrapper2 = shallow(<BooleanViewField value={false} />);
-    const text2 = wrapper2.find('.text');
+    const text2 = wrapper2.find('[data-test-id="form-field-value"]');
     expect(text2.text()).toBe('False');
   });
 
@@ -42,7 +42,7 @@ describe('BooleanViewField', () => {
 
     const green = wrapper.find('.true');
     const red = wrapper.find('.false');
-    const text = wrapper.find('.text');
+    const text = wrapper.find('[data-test-id="form-field-value"]');
 
     expect(green.exists()).toBe(true);
     expect(red.exists()).toBe(false);
@@ -63,7 +63,7 @@ describe('BooleanViewField', () => {
 
     const green = wrapper.find('.true');
     const red = wrapper.find('.false');
-    const text = wrapper.find('.text');
+    const text = wrapper.find('[data-test-id="form-field-value"]');
 
     expect(green.exists()).toBe(false);
     expect(red.exists()).toBe(true);

package/src/components/FormElements/BooleanView/BooleanViewField.tsx

@@ -32,11 +32,7 @@ export const BooleanViewField: React.FC<BooleanViewFieldProps> = ({
     >
       <div className={clsx(classes.value)}>
         <div className={clsx(value ? classes.true : classes.false)}></div>
-        <div
-          className={clsx(classes.text)}
-          data-test-id="form-field-value"
-          data-test-value={value}
-        >
+        <div data-test-id="form-field-value" data-test-value={value}>
           {value ? trueLabel : falseLabel}
         </div>
       </div>

package/src/components/FormElements/Checkbox/Checkbox.stories.tsx

@@ -31,9 +31,9 @@ export default meta;
 
 export const Main: StoryObj<typeof Checkbox> = {
   args: {
-    label: 'isActive',
+    label: 'Is Active?',
     tooltipContent: faker.lorem.paragraph(2),
-    name: 'number',
+    name: 'isActive',
   },
   render: (args) =>
     React.createElement(() => {

package/src/components/FormElements/Checkbox/Checkbox.tsx

@@ -65,9 +65,10 @@ export const Checkbox: React.FC<CheckboxProps> = ({
       className={clsx(classes.container, 'checkbox-container', className)}
       error={errorMsg}
       dataTestFieldType="Checkbox"
+      htmlFor={id ?? name}
     >
       <input
-        id={id}
+        id={id ?? name}
         name={name}
         ref={setReferenceElement as React.LegacyRef<HTMLInputElement>}
         type="checkbox"

package/src/components/FormElements/CustomTags/CustomTags.scss

@@ -113,7 +113,8 @@
           color: var(--live-suggest-text-color, $live-suggest-text-color);
         }
 
-        li:hover {
+        li:hover,
+        li.selected {
           background-color: var(
             --live-suggest-background-selected-color,
             $live-suggest-background-selected-color

package/src/components/FormElements/CustomTags/CustomTags.tsx

@@ -295,6 +295,7 @@ export const CustomTags: React.FC<CustomTagsProps> = ({
       className={clsx(classes.container, 'custom-tags-container', className)}
       error={errorMessage}
       dataTestFieldType="CustomTags"
+      htmlFor={id ?? name}
     >
       <div className={clsx(classes.tagsWrapper)} style={styles}>
         <div className={clsx(classes.inputWrapper)}>
@@ -302,7 +303,7 @@ export const CustomTags: React.FC<CustomTagsProps> = ({
             className={clsx({
               [classes.hasError]: errorMessage !== undefined,
             })}
-            id={id}
+            id={id ?? name}
             name={name}
             ref={textInput}
             value={val}
@@ -324,7 +325,9 @@ export const CustomTags: React.FC<CustomTagsProps> = ({
                   onMouseDown={(event) =>
                     onSuggestionClickedHandler(event, suggestion)
                   }
-                  className={clsx({ [classes.selected]: cursorPos === idx })}
+                  className={clsx({
+                    [classes.selected]: cursorPos === idx,
+                  })}
                 >
                   {suggestion}
                 </li>

package/src/components/FormElements/DateTimeField/DateTimeText.stories.tsx

@@ -31,8 +31,8 @@ export default meta;
 
 export const Main: StoryObj<typeof DateTimeText> = {
   args: {
-    label: 'Name',
-    name: 'name',
+    label: 'Start',
+    name: 'start',
     tooltipContent: faker.lorem.sentences(4),
   },
   render: (args) =>

package/src/components/FormElements/DateTimeField/DateTimeText.tsx

@@ -89,11 +89,12 @@ export const DateTimeText: React.FC<DateTimeTextProps> = ({
       className={clsx(classes.container, 'datetime-container', className)}
       error={errorMsg}
       dataTestFieldType="DateTime"
+      htmlFor={id ?? name}
     >
       <div className={clsx(classes.inputbutton)} ref={container}>
         <input
           className={clsx({ [classes.hasError]: errorMsg })}
-          id={id}
+          id={id ?? name}
           name={name}
           type={'text'}
           value={display}

package/src/components/FormElements/DynamicDataListControl/DynamicDataListControl.tsx

@@ -30,6 +30,7 @@ export const DynamicDataListControl = <T extends Data>({
       {...rest}
       className={clsx('dynamic-data-list-control-container', className)}
       dataTestFieldType="DynamicDataListControl"
+      htmlFor={rest.id ?? rest.name}
     >
       <DynamicDataList {...rest} />
     </FormElementContainer>

package/src/components/FormElements/FileUploadControl/FileUploadControl.tsx

@@ -134,6 +134,7 @@ export const FileUploadControl: React.FC<FileUploadProps> = ({
       )}
       error={error}
       dataTestFieldType="FileUpload"
+      htmlFor={id ?? name}
     >
       <div className={clsx(classes.content)}>
         {dragging && !disabled ? (
@@ -157,12 +158,11 @@ export const FileUploadControl: React.FC<FileUploadProps> = ({
                 [classes.fileuploadbutton]: true,
                 [classes.disabled]: disabled,
               })}
-              htmlFor={id}
             >
               <Icons icon={IconName.File} />
             </label>
             <input
-              id={id}
+              id={id ?? name}
               type="file"
               accept={accept}
               disabled={disabled}

package/src/components/FormElements/FormElementContainer/FormElementContainer.tsx

@@ -16,6 +16,9 @@ export type FormElementContainerProps = BaseFormElement & {
 
   /** Stick to the top option */
   stickyLabel?: boolean;
+
+  /** The value of the 'for' attribute of the label */
+  htmlFor?: string;
 };
 
 /**
@@ -35,6 +38,7 @@ export const FormElementContainer: React.FC<FormElementContainerProps> = ({
   dataTestFieldType,
   inlineMode = false,
   stickyLabel = true,
+  htmlFor,
 }) => {
   const heightStyles: CSSProperties = {};
 
@@ -63,7 +67,7 @@ export const FormElementContainer: React.FC<FormElementContainerProps> = ({
           )}
           style={heightStyles}
         >
-          <label data-test-id="form-field-label">
+          <label data-test-id="form-field-label" htmlFor={htmlFor}>
             {label}
             {tooltipContent && (
               <InfoTooltip className={clsx(classes.tooltip)}>

package/src/components/FormElements/ReadOnlyText/ReadOnlyTextField.tsx

@@ -27,6 +27,7 @@ export const ReadOnlyTextField = <T,>({
   transform,
   className = '',
   hideCopyButton = false,
+  id,
   ...rest
 }: PropsWithChildren<ReadOnlyTextFieldProps<T>>): JSX.Element => {
   const nonNullableValue = value === null ? '' : value;
@@ -42,12 +43,14 @@ export const ReadOnlyTextField = <T,>({
       {...rest}
       className={clsx('read-only-field-container', className)}
       dataTestFieldType="ReadOnlyText"
+      htmlFor={id}
     >
       <div className={clsx(classes.container)}>
         <input
           value={displayValue}
           onChange={noop}
           data-test-id="form-field-value"
+          id={id}
         />
         {!hideCopyButton && (
           <Button

package/src/components/FormElements/Select/Select.tsx

@@ -86,13 +86,13 @@ export const Select: React.FC<SelectProps> = (props) => {
 
   return (
     <FormElementContainer
-      id={id}
       label={label}
       tooltipContent={tooltipContent}
       inlineMode={inlineMode}
       className={clsx(classes.container, 'select-container', className)}
       error={error}
       dataTestFieldType="Select"
+      htmlFor={id ?? name}
     >
       <div
         ref={setAnchorEl}
@@ -101,6 +101,7 @@ export const Select: React.FC<SelectProps> = (props) => {
       >
         <input
           {...getInputProps()}
+          id={id ?? name}
           name={name}
           className={clsx({ [classes.hasError]: Boolean(error) })}
           autoFocus={autoFocus}