@axinom/mosaic-ui 0.68.1 → 0.68.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.68.1",
+  "version": "0.68.3",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "197e3de6ae3702028a53e14b1d99430df93d16f7"
+  "gitHead": "496e5fc981424ef5a5a4eb2a6b4bfb55cd5f7019"
 }

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

@@ -69,6 +69,7 @@ const ContextButtonElement = React.forwardRef<
     className = '',
     customIcon,
     dataTestId,
+    title,
     onButtonClicked = noop,
     onBlur,
   }: ContextButtonProps,
@@ -93,6 +94,7 @@ const ContextButtonElement = React.forwardRef<
       disabled={disabled}
       onBlur={onBlur}
       data-test-id={dataTestId ?? 'button'}
+      title={title}
     >
       {customIcon ? customIcon : <Icons icon={icon} />}
     </button>
@@ -113,6 +115,7 @@ const NavigationButtonElement = React.forwardRef<
     dataTestId = undefined,
     disabled = false,
     openInNewTab = false,
+    title,
   }: NavigationButtonProps,
   ref: ForwardedRef<HTMLAnchorElement>,
 ) {
@@ -132,6 +135,7 @@ const NavigationButtonElement = React.forwardRef<
       style={{ height, width }}
       data-test-id={dataTestId ?? 'button'}
       target={openInNewTab ? '_blank' : undefined}
+      title={title}
     >
       {customIcon ? customIcon : <Icons icon={icon ? icon : defaultIcon} />}
     </Link>

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

@@ -104,4 +104,6 @@ interface CommonButtonOptions {
   className?: string;
   /** Optional data-test-id */
   dataTestId?: string;
+  /** Optional title attribute for the button */
+  title?: string;
 }

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

@@ -1,5 +1,11 @@
 import clsx from 'clsx';
-import React, { PropsWithChildren, ReactElement, useState } from 'react';
+import React, {
+  PropsWithChildren,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 import { ValidationError } from 'yup';
 import { OptionalObjectSchema } from 'yup/lib/object';
 import { noop } from '../../../helpers/utils';
@@ -105,29 +111,41 @@ export const DynamicListDataEntry = <T extends Data>({
   const [isDirty, setIsDirty] = useState<boolean>(false);
   const [error, setError] = useState<Record<string, string>>({});
 
-  const validateSchema = async (data: T): Promise<boolean> => {
-    if (!rowValidationSchema) {
-      return true;
-    }
+  const validateSchema = useCallback(
+    async (data: T): Promise<boolean> => {
+      if (!rowValidationSchema) {
+        return true;
+      }
 
-    try {
-      await rowValidationSchema.validate(data, { abortEarly: false });
-      setError({});
+      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 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;
+      }
+    },
+    [rowValidationSchema],
+  );
 
-      return false;
+  // Input errors should be cleared when the field is disabled
+  useEffect(() => {
+    if (disabled) {
+      setError({});
+    } else if (isDirty) {
+      validateSchema(state);
     }
-  };
+  }, [disabled, state, isDirty, validateSchema]);
 
   /**
    * Updates new data object with supplied key/value pair

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

@@ -14,6 +14,7 @@ export const createInputRenderer = ({
   name = '',
   placeholder,
   type = 'text',
+  autofocus = false,
   transform = (value: string) => value,
 }: CreateInputRendererConfig = {}): DynamicListDataEntryRenderer => {
   const inputRenderer = (
@@ -38,6 +39,7 @@ export const createInputRenderer = ({
         error={error}
         className={classes.container}
         value={(currentValue as string) ?? ''}
+        autoFocus={autofocus}
       />
     );
   };

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

@@ -22,6 +22,7 @@ export const createSelectRenderer = ({
   options = [],
   defaultValue,
   transform = (value: string) => value,
+  autofocus = false,
 }: CreateSelectRendererConfig = {}): DynamicListDataEntryRenderer => {
   const selectRenderer = (
     currentValue: unknown,
@@ -49,6 +50,7 @@ export const createSelectRenderer = ({
         className={classes.container}
         value={(currentValue as string) ?? ''}
         options={options}
+        autoFocus={autofocus}
       />
     );
   };

package/src/components/DynamicDataList/DynamicListDataEntry/Renderers/renderers.model.ts

@@ -9,6 +9,8 @@ export interface BaseRendererConfig {
   placeholder?: string;
   /** Optional transformer that will change the final value to match the return value */
   transform?: (value: string) => unknown;
+  /** Optional autofocus on render (default: false) */
+  autofocus?: boolean;
 }
 
 export interface CreateInputRendererConfig extends BaseRendererConfig {

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

@@ -76,6 +76,7 @@ export const BulkEditFormFieldsConfigConverter = (
       <FieldSelection
         onFieldRemoved={onFieldRemoved}
         onFieldAdded={onFieldAdded}
+        name="bulkedit-fields"
       >
         {fields}
       </FieldSelection>

package/src/components/Explorer/BulkEdit/helpers/FieldWrapper.scss

@@ -1,6 +1,7 @@
 .container {
   display: grid;
   grid-template-columns: auto min-content;
+  gap: 5px;
 }
 
 .button {

package/src/components/Explorer/BulkEdit/helpers/FieldWrapper.tsx

@@ -84,6 +84,7 @@ export const FieldWrapper: React.FC<FieldWrapperProps> = ({
           icon={IconName.ClearAll}
           buttonContext={clearField ? ButtonContext.Active : ButtonContext.Icon}
           onButtonClicked={handleClearFieldChange}
+          title="Clear"
         />
       )}
     </div>

package/src/components/FieldSelection/FieldSelection.scss

@@ -27,5 +27,5 @@
 }
 
 .content {
-  padding: 10px;
+  padding: 10px 0;
 }

package/src/components/FieldSelection/FieldSelection.tsx

@@ -9,6 +9,7 @@ import { IconName } from '../Icons';
 import classes from './FieldSelection.scss';
 
 interface FieldSelectionProps {
+  name?: string;
   className?: string;
   onFieldAdded?: (field: string) => void;
   onFieldRemoved?: (field: string) => void;
@@ -22,6 +23,7 @@ interface FieldDefinition {
 }
 
 export const FieldSelection: React.FC<FieldSelectionProps> = ({
+  name,
   className,
   onFieldAdded = noop,
   onFieldRemoved = noop,
@@ -62,6 +64,7 @@ export const FieldSelection: React.FC<FieldSelectionProps> = ({
       expandedByDefault={true}
       header={
         <FieldSelectionHeader
+          name={name}
           fields={availableFields}
           onAddField={(value) => {
             const newField = availableFields.find(
@@ -108,9 +111,10 @@ export const FieldSelection: React.FC<FieldSelectionProps> = ({
 };
 
 const FieldSelectionHeader: React.FC<{
+  name?: string;
   fields: SelectOption[];
   onAddField: (value: string) => void;
-}> = ({ fields, onAddField }) => {
+}> = ({ name, fields, onAddField }) => {
   const [value, setValue] = React.useState<string>();
 
   useEffect(() => {
@@ -124,7 +128,7 @@ const FieldSelectionHeader: React.FC<{
     <div className={classes.selectionHeader}>
       <Select
         label="Field"
-        name="field"
+        name={name ?? 'field'}
         placeholder="Select Field"
         options={fields}
         disabled={fields.length === 0}

package/src/components/FormStation/FormStationHeader/FormStationHeader.tsx

@@ -40,7 +40,7 @@ export const FormStationHeader: React.FC<
   },
   setValidationError,
 }) => {
-  const { dirty, submitForm, resetForm, isValid } =
+  const { dirty, submitForm, resetForm, validateForm } =
     useFormikContext<FormikValues>();
   const quickEditContext = useContext(QuickEditContext);
   const bulkEditContext = useContext(BulkEditContext);
@@ -74,10 +74,12 @@ export const FormStationHeader: React.FC<
             if (quickEditContext?.isQuickEditMode) {
               quickEditContext.refresh();
             } else if (bulkEditContext?.isBulkEditMode) {
-              if (!isValid) {
+              const errors = await validateForm();
+              if (Object.keys(errors).length > 0) {
                 setValidationError();
                 return;
               }
+
               await submitForm();
               history.replace(history.location.pathname);
             } else {
@@ -128,7 +130,6 @@ export const FormStationHeader: React.FC<
     cancelNavigationUrl,
     dirty,
     history,
-    isValid,
     quickEditContext,
     resetForm,
     saveHeaderActionConfig.icon,
@@ -136,6 +137,7 @@ export const FormStationHeader: React.FC<
     setValidationError,
     showSaveHeaderAction,
     submitForm,
+    validateForm,
   ]);
 
   return (

package/src/components/Icons/Icons.tsx

@@ -175,7 +175,7 @@ const ClearAllIcon: React.FC<SvgElementProps> = (props) => (
   <SvgElement {...props}>
     <path
       {...DEFAULT_PATH_PROPS}
-      d="M32.7,20c0,7-5.7,12.7-12.7,12.7s-12.7-5.7-12.7-12.7,5.7-12.7,12.7-12.7,12.7,5.7,12.7,12.7ZM34,6L6,34"
+      d="M28.6,33.7H11.2l-7.2-7.2L24.2,6.3l11.8,11.8-15.6,15.6M18.6,11.9l11.8,11.8M31.9,33.7h3.7"
     />
   </SvgElement>
 );

package/src/components/InfoPanel/InfoPanel.scss

@@ -98,6 +98,8 @@
     .content {
       transform: translateX(0);
       pointer-events: none;
+      max-height: 0;
+      overflow: hidden;
     }
 
     .filler {

package/src/components/InfoPanel/hooks/useCollapse.ts

@@ -180,13 +180,15 @@ export const useCollapse = ({
       userExpandedRef.current = true;
       autoCollapsedRef.current = false;
 
-      setTimeout(() => {
-        containerRef.current?.scrollIntoView({
-          behavior: 'smooth',
-          block: 'nearest',
-          inline: 'end',
-        });
-      }, 350);
+      // TODO: Temporarily disable auto-scrolling to prevent jarring experience when collapsing/expanding panels in smaller screens.
+      // to be revisited with https://dev.azure.com/axinom/CMS/_workitems/edit/53479/
+      // setTimeout(() => {
+      //   containerRef.current?.scrollIntoView({
+      //     behavior: 'smooth',
+      //     block: 'nearest',
+      //     inline: 'end',
+      //   });
+      // }, 350);
     }
 
     onCollapseChange?.(newState);