@axinom/mosaic-ui 0.66.0-rc.2 → 0.66.0-rc.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.66.0-rc.2",
+  "version": "0.66.0-rc.20",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8367444991c09b4d3c680988cbb1d8feabefbb62"
+  "gitHead": "b3810ba1b0cda52a789d68955d474086d8745eda"
 }

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

@@ -238,6 +238,8 @@ describe('DynamicListHeader', () => {
         } as any),
       );
 
+      window.dispatchEvent(new Event('mouseup', {} as any));
+
       expect(spy).toHaveBeenCalledTimes(1);
     });
   });

package/src/components/DynamicDataList/DynamicListHeader/DynamicListHeader.tsx

@@ -70,60 +70,72 @@ export const DynamicListHeader = <T extends Data>({
     customStyles.top = 0;
   }
 
-  const { cols, mouseDown } = useResize(columns, onColumnSizesChanged);
+  const { cols, mouseDown, ResizeIndicator } = useResize(
+    columns,
+    onColumnSizesChanged,
+  );
 
   return (
-    <div
-      className={clsx(
-        classes.container,
-        'dynamic-list-header-container',
-        className,
-      )}
-      style={customStyles}
-      data-test-id="dynamic-list-header"
-    >
-      {showPositionColumn && (
-        <div
-          className={clsx(classes.column)}
-          data-test-id="dynamic-list-header-cell"
-        >
-          <p className={clsx(classes.position)}>
-            {positionLabel ?? (allowDragging ? 'Position' : 'Pos')}
-          </p>
+    <>
+      {ResizeIndicator}
+      <div
+        className={clsx(
+          classes.container,
+          'dynamic-list-header-container',
+          className,
+        )}
+        style={customStyles}
+        data-test-id="dynamic-list-header"
+      >
+        {showPositionColumn && (
           <div
-            className={clsx(classes.resizeHandle, classes.resizeHandleDisabled)}
-          />
-        </div>
-      )}
-      {columns.map((column, i) => (
-        <div
-          key={column.key ?? (column.propertyName as string)}
-          className={clsx(classes.column)}
-          ref={cols[i].ref}
-          data-test-id={`dynamic-list-header-property:${
-            column.propertyName as string
-          }`}
-        >
-          <p>{column.label}</p>
+            className={clsx(classes.column)}
+            data-test-id="dynamic-list-header-cell"
+          >
+            <p className={clsx(classes.position)}>
+              {positionLabel ?? (allowDragging ? 'Position' : 'Pos')}
+            </p>
+            <div
+              className={clsx(
+                classes.resizeHandle,
+                classes.resizeHandleDisabled,
+              )}
+            />
+          </div>
+        )}
+        {columns.map((column, i) => (
+          <div
+            key={column.key ?? (column.propertyName as string)}
+            className={clsx(classes.column)}
+            ref={cols[i].ref}
+            data-test-id={`dynamic-list-header-property:${
+              column.propertyName as string
+            }`}
+          >
+            <p>{column.label}</p>
+            <div
+              onMouseDown={
+                !column.disableResizing
+                  ? (e) => {
+                      e.preventDefault();
+                      mouseDown(i);
+                    }
+                  : undefined
+              }
+              onDoubleClick={onResetColumnSizes}
+              className={clsx(classes.resizeHandle, {
+                [classes.resizeHandleDisabled]: column.disableResizing ?? false,
+              })}
+            />
+          </div>
+        ))}
+        {showActionColumn && (
           <div
-            onMouseDown={
-              !column.disableResizing
-                ? (e) => {
-                    e.preventDefault();
-                    mouseDown(i);
-                  }
-                : undefined
-            }
-            onDoubleClick={onResetColumnSizes}
-            className={clsx(classes.resizeHandle, {
-              [classes.resizeHandleDisabled]: column.disableResizing ?? false,
-            })}
+            className={clsx(classes.column)}
+            ref={cols[cols.length - 1].ref}
           />
-        </div>
-      ))}
-      {showActionColumn && (
-        <div className={clsx(classes.column)} ref={cols[cols.length - 1].ref} />
-      )}
-    </div>
+        )}
+      </div>
+    </>
   );
 };

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

@@ -23,14 +23,7 @@ export const BulkEditFormFieldsConfigConverter = (
   const keys = Object.keys(config);
 
   const FormFields: React.FC = () => {
-    const {
-      setFieldValue,
-      setFieldTouched,
-      setErrors,
-      errors,
-      validateForm,
-      values,
-    } = useFormikContext<Data>();
+    const { setFieldValue, setFieldTouched, values } = useFormikContext<Data>();
 
     // Effect to clear empty fields
     // This will set fields with empty strings or empty arrays to undefined
@@ -46,19 +39,10 @@ export const BulkEditFormFieldsConfigConverter = (
         });
     }, [setFieldValue, values]);
 
-    const onFieldRemoved = (field: string): void => {
-      setFieldValue(field, undefined, false); // Clear the field value when removed
-      setFieldTouched(field, false, false); // Mark the field as not touched
-
-      if (errors[field]) {
-        // If there was an error for this field, clear it
-        const newErrors = { ...errors };
-        delete newErrors[field];
-
-        setErrors(newErrors);
-
-        validateForm();
-      }
+    const onFieldRemoved = async (field: string): Promise<void> => {
+      // TODO: Update Formik to get the latest types for setFieldValue
+      await setFieldValue(field, undefined, false); // setFieldTouched will validate the form
+      await setFieldTouched(field, false);
     };
 
     const onFieldAdded = (field: string): void => {

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

@@ -21,6 +21,7 @@ import {
 } from '../FormStation';
 import { IconName } from '../Icons';
 import { ListSelectMode } from '../List';
+import { createConnectionRenderer } from '../Utils';
 import { generateBulkEditMutation } from './BulkEdit/GenerateMutation';
 import { Explorer } from './Explorer';
 import { QuickEditContext } from './QuickEdit/QuickEditContext';
@@ -34,6 +35,7 @@ interface ExplorerStoryData {
   title: string;
   date?: Date;
   desc: string;
+  tags?: { nodes: { name: string }[] };
 }
 
 type ExplorerStoryType = typeof Explorer<ExplorerStoryData>;
@@ -120,6 +122,14 @@ const generateData = (
       title: `${usePrefix ? `Index ${index}: ` : ''}${faker.random.words(
         faker.datatype.number({ min: 1, max: 3 }),
       )}`,
+      tags: {
+        nodes: Array.from(
+          { length: faker.datatype.number({ min: 0, max: 10 }) },
+          () => ({
+            name: faker.random.word(),
+          }),
+        ),
+      },
     };
   });
 
@@ -140,6 +150,13 @@ export const Default: StoryObj<ExplorerStoryType> = {
         propertyName: 'title',
         label: 'Title',
       },
+      {
+        propertyName: 'tags',
+        label: 'Tags',
+        render: createConnectionRenderer<{ nodes: { name: string }[] }>(
+          (tag) => tag.name,
+        ),
+      },
       {
         propertyName: 'date',
         label: 'Date',

package/src/components/FieldSelection/FieldSelection.scss

@@ -7,6 +7,10 @@
   align-items: center;
 }
 
+.item {
+  z-index: 0;
+}
+
 .selectionHeader {
   display: grid;
   grid-template-columns: 1fr;

package/src/components/FieldSelection/FieldSelection.tsx

@@ -84,6 +84,7 @@ export const FieldSelection: React.FC<FieldSelectionProps> = ({
       {selectedFields.map((field) => (
         <AccordionItem
           key={field.value}
+          className={classes.item}
           header={
             <FieldSelectionItemHeader
               label={field.label as string}

package/src/components/Filters/Filter/Filter.scss

@@ -15,24 +15,31 @@ $input-inactive: 1px solid var(--input-border-color, $input-border-color);
     border: $input-inactive;
   }
 
+  &.hasValue {
+    background: color-mix(
+      in srgb,
+      var(--filter-background-color, $filter-background-color) 50%,
+      transparent
+    );
+  }
+
   .title {
     display: grid;
     grid-template-columns: auto auto;
-    grid-template-rows: 48px;
+    grid-template-rows: 38px;
     place-content: space-between;
     place-items: center;
     color: var(--filter-title-color, $filter-title-color);
     font-size: var(--filter-font-size, $filter-font-size);
-    border: 1px solid white;
+    border: 1px solid transparent;
 
-    transition: border 0.15s ease-in-out 0s;
-    transition: background-color 100ms linear;
+    transition: border 0.15s ease-in-out 0s, background-color 100ms linear;
 
     &:hover {
       border: $border;
     }
 
-    &.expanded {
+    &.active {
       background-color: var(
         --filter-background-selected-color,
         $filter-background-selected-color
@@ -46,13 +53,20 @@ $input-inactive: 1px solid var(--input-border-color, $input-border-color);
         var(--input-invalid-border-color, $input-invalid-border-color);
     }
 
-    &.active {
+    &.hasValue {
       font-weight: bold;
     }
 
     .button {
+      height: 40px;
+      width: 40px;
+
+      &.rotated svg {
+        transform: rotate(90deg);
+      }
+
       svg {
-        height: 50%;
+        transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
       }
 
       svg * {
@@ -63,7 +77,7 @@ $input-inactive: 1px solid var(--input-border-color, $input-border-color);
       }
     }
 
-    span {
+    label {
       padding-left: 15px;
     }
   }
@@ -78,9 +92,8 @@ $input-inactive: 1px solid var(--input-border-color, $input-border-color);
     place-items: center;
 
     .button {
-      svg {
-        height: 50%;
-      }
+      height: 40px;
+      width: 40px;
 
       svg * {
         stroke: var(
@@ -92,17 +105,23 @@ $input-inactive: 1px solid var(--input-border-color, $input-border-color);
 
     span {
       padding-left: 30px;
-      padding-bottom: 10px;
     }
   }
 }
 
 .content {
-  transition: max-height 100ms linear;
-  overflow: hidden;
-  max-height: fit-content !important;
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &.expanded {
+    grid-template-rows: 1fr;
+  }
 
   .active {
+    display: grid;
+    overflow: hidden;
+
     border-right: $border;
     border-bottom: $border;
     border-left: $border;

package/src/components/Filters/Filter/Filter.spec.tsx

@@ -95,7 +95,7 @@ describe('Filter', () => {
 
     const filterTitle = wrapper.find('.title');
 
-    expect(filterTitle.hasClass('expanded')).toBe(expected);
+    expect(filterTitle.hasClass('active')).toBe(expected);
   });
 
   it('passes active state to custom filter', () => {

package/src/components/Filters/Filter/Filter.tsx

@@ -1,11 +1,5 @@
 import clsx from 'clsx';
-import React, {
-  PropsWithChildren,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { PropsWithChildren, ReactNode, useState } from 'react';
 import { assertNever } from '../../../helpers/utils';
 import { Data } from '../../../types/data';
 import { Button, ButtonContext } from '../../Buttons';
@@ -58,18 +52,16 @@ export const Filter = <T extends Data>({
 }: PropsWithChildren<FilterProps<T>>): JSX.Element => {
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
   const [hasError, setHasError] = useState<boolean>(false);
-  const [contentHeight, setContentHeight] = useState<number>(0);
   const [stringValue, setStringValue] = useState<string | undefined>();
 
-  const contentRef = useRef<HTMLDivElement>(null);
-  const valueRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    setContentHeight(
-      (contentRef.current?.scrollHeight ?? 0) +
-        (valueRef.current?.scrollHeight ?? 0),
-    );
-  }, [isExpanded, hasError, value]);
+  const inputId = `${String(options.property)}-filter-input`;
+  const labelId = `${String(options.property)}-filter-label`;
+  const inputBasedFilter = [
+    FilterTypes.FreeText,
+    FilterTypes.Numeric,
+    FilterTypes.Date,
+    FilterTypes.DateTime,
+  ];
 
   const onFilterValueChange = (
     prop: keyof T,
@@ -135,6 +127,7 @@ export const Filter = <T extends Data>({
             onError={onError}
             onValidate={onValidate}
             selectOnFocus={selectOnFocus}
+            inputId={inputId}
           />
         );
 
@@ -147,6 +140,7 @@ export const Filter = <T extends Data>({
             }
             onError={onError}
             onValidate={onValidate}
+            inputId={inputId}
           />
         );
 
@@ -158,6 +152,7 @@ export const Filter = <T extends Data>({
             onSelect={(value: FilterValue) =>
               onFilterValueChange(options.property, value)
             }
+            labelId={labelId}
           />
         );
 
@@ -169,6 +164,7 @@ export const Filter = <T extends Data>({
             onSelect={(value: FilterValue) =>
               onFilterValueChange(options.property, value?.toString())
             }
+            labelId={labelId}
           />
         );
       case FilterTypes.SearcheableOptions:
@@ -181,6 +177,8 @@ export const Filter = <T extends Data>({
               onFilterValueChange(options.property, value, stringValue)
             }
             maxItems={options.maxItems}
+            inputId={inputId}
+            labelId={labelId}
           />
         );
 
@@ -194,6 +192,7 @@ export const Filter = <T extends Data>({
             modifyTime={false}
             onError={onError}
             onValidate={onValidate}
+            inputId={inputId}
           />
         );
 
@@ -207,6 +206,7 @@ export const Filter = <T extends Data>({
             modifyTime={true}
             onError={onError}
             onValidate={onValidate}
+            inputId={inputId}
           />
         );
 
@@ -220,6 +220,7 @@ export const Filter = <T extends Data>({
             }}
             onError={onError}
             onValidate={onValidate}
+            labelId={labelId}
           />
         );
 
@@ -229,9 +230,16 @@ export const Filter = <T extends Data>({
     }
   };
 
+  const hasValue = value !== undefined && value !== '';
+
   return (
     <div
-      className={clsx(classes.container, 'filter-container', className)}
+      className={clsx(
+        classes.container,
+        { [classes.hasValue]: hasValue },
+        'filter-container',
+        className,
+      )}
       data-test-id={`filter:${options.property as string}`}
       data-test-type={FilterTypes[options.type]}
       onClick={() => onFilterClicked()}
@@ -241,31 +249,36 @@ export const Filter = <T extends Data>({
           setIsExpanded(!isExpanded);
           setHasError(false);
         }}
-        className={clsx(
-          classes.title,
-          { [classes.expanded]: isExpanded && isActive },
-          hasError && classes.hasError,
-          !!value && classes.active,
-        )}
+        className={clsx(classes.title, {
+          [classes.hasValue]: hasValue,
+          [classes.active]: isActive && isExpanded,
+          [classes.hasError]: hasError,
+        })}
         data-test-id="filter-button-toggle"
       >
-        <span data-test-id="filter-label">{options.label}</span>
+        <label
+          id={labelId}
+          {...(inputBasedFilter.includes(options.type)
+            ? {}
+            : { htmlFor: inputId })}
+          data-test-id="filter-label"
+        >
+          {options.label}
+        </label>
         <Button
-          icon={IconName.ChevronDown}
-          className={clsx(classes.button)}
+          icon={IconName.ChevronRight}
+          className={clsx(classes.button, {
+            [classes.rotated]: isExpanded || hasValue,
+          })}
           buttonContext={ButtonContext.None}
         />
       </div>
       <div
-        className={clsx(classes.content)}
-        style={{
-          maxHeight: contentHeight,
-        }}
+        className={clsx(classes.content, { [classes.expanded]: isExpanded })}
       >
-        {value !== undefined && !isExpanded && (
+        {hasValue && !isExpanded && (
           <div
             className={clsx(classes.selectedValue)}
-            ref={valueRef}
             onClick={() => {
               setIsExpanded(!isExpanded);
             }}
@@ -285,7 +298,6 @@ export const Filter = <T extends Data>({
         )}
         {isExpanded && (
           <div
-            ref={contentRef}
             data-test-id="filter-content"
             className={clsx({ [classes.active]: isActive })}
           >

package/src/components/Filters/Filters.model.ts

@@ -78,6 +78,12 @@ export interface CustomFilterProps {
   /** Wether or not the filter is active (default: false) */
   active?: boolean;
 
+  /**
+   * Optional id for the label element.
+   * Assign to the label's `id` and reference from the input or group via `aria-labelledby`.
+   */
+  labelId?: string;
+
   /** Callback triggered when a new filter value is selected */
   onSelect: (
     value: FilterValue,

package/src/components/Filters/SelectionTypes/DateTimeFilter/DateTimeFilter.tsx

@@ -31,6 +31,9 @@ export interface DateTimeFilterProps {
 
   /** CSS Class name for additional styles */
   className?: string;
+
+  /** Optional id for the input field */
+  inputId?: string;
 }
 
 export const DateTimeFilter: React.FC<DateTimeFilterProps> = ({
@@ -40,6 +43,7 @@ export const DateTimeFilter: React.FC<DateTimeFilterProps> = ({
   onError = noop,
   onValidate: customValidate,
   className = '',
+  inputId,
 }) => {
   const container = useRef<HTMLDivElement>(null);
   const [showPicker, setShowPicker] = useState(false);
@@ -111,6 +115,7 @@ export const DateTimeFilter: React.FC<DateTimeFilterProps> = ({
           ref={container}
         >
           <input
+            id={inputId}
             autoFocus
             className={clsx(classes.inputValue)}
             onKeyDown={handleKeyDown}
@@ -163,7 +168,7 @@ export const DateTimeFilter: React.FC<DateTimeFilterProps> = ({
             onClick={() => {
               setShowPicker(false);
 
-              if (modifyTime) {
+              if (modifyTime && value?.length > 0) {
                 const parsedValue = DateTime.fromFormat(value, 'f');
 
                 if (parsedValue.isValid) {

package/src/components/Filters/SelectionTypes/FreeTextFilter/FreeTextFilter.tsx

@@ -19,6 +19,8 @@ export interface FreeTextFilterProps {
   className?: string;
   /** Select text on focus if true (default: true) */
   selectOnFocus?: boolean;
+  /** Optional id for the input field */
+  inputId?: string;
 }
 
 export const FreeTextFilter: React.FC<FreeTextFilterProps> = ({
@@ -28,6 +30,7 @@ export const FreeTextFilter: React.FC<FreeTextFilterProps> = ({
   onValidate: customValidate,
   className = '',
   selectOnFocus = true,
+  inputId,
 }) => {
   const [errorMsg, setErrorMsg] = useState<string>();
   const ENTER_KEY = 'Enter';
@@ -68,6 +71,7 @@ export const FreeTextFilter: React.FC<FreeTextFilterProps> = ({
       )}
     >
       <input
+        id={inputId}
         ref={inputRef}
         autoFocus
         className={clsx(classes.inputValue, errorMsg && classes.hasError)}

package/src/components/Filters/SelectionTypes/MultiOptionFilter/MultiOptionFilter.tsx

@@ -17,19 +17,27 @@ export interface MultiOptionFilterProps {
 
   /** CSS Class name for additional styles */
   className?: string;
+
+  /** ID for the label */
+  labelId?: string;
 }
 
 export const MultiOptionsFilter: React.FC<MultiOptionFilterProps> = ({
   value,
   options,
   onSelect,
+  labelId,
 }) => {
   const [selectedOptionList, setSelectedOptionList] = useState<string[]>(
     value ? value.split(',') : [],
   );
 
   return (
-    <div className={clsx(classes.multiFilterContainer)}>
+    <div
+      className={classes.multiFilterContainer}
+      role="group"
+      aria-labelledby={labelId}
+    >
       {options?.map((option: Option) => (
         <Checkbox
           className={clsx(

package/src/components/Filters/SelectionTypes/NumericTextFilter/NumericTextFilter.tsx

@@ -18,6 +18,9 @@ export interface NumericTextFilterProps {
 
   /** CSS Class name for additional styles */
   className?: string;
+
+  /** Optional id for the input field */
+  inputId?: string;
 }
 
 export const NumericTextFilter: React.FC<NumericTextFilterProps> = ({
@@ -26,6 +29,7 @@ export const NumericTextFilter: React.FC<NumericTextFilterProps> = ({
   onError = noop,
   onValidate: customValidate,
   className = '',
+  inputId,
 }) => {
   const [errorMsg, setErrorMsg] = useState<string>();
   const ENTER_KEY = 'Enter';
@@ -64,6 +68,7 @@ export const NumericTextFilter: React.FC<NumericTextFilterProps> = ({
       )}
     >
       <input
+        id={inputId}
         autoFocus
         value={valueLocal}
         className={clsx(classes.inputValue, errorMsg && classes.hasError)}