@axinom/mosaic-ui 0.66.0-rc.11 → 0.66.0-rc.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.66.0-rc.11",
+  "version": "0.66.0-rc.12",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "928847d745916607c23c4acc62349c49610dfd7d"
+  "gitHead": "a2cef21028c76a6c1e0a02c77ee63c819ca48746"
 }

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

@@ -95,7 +95,7 @@ describe('DynamicListDataEntry', () => {
       />,
     );
 
-    const row = wrapper.find('.container');
+    const row = wrapper.find('.container').first();
 
     expect(row.prop('style')).toHaveProperty('gridColumnGap', undefined);
     expect(row.prop('style')).toHaveProperty('alignItems', undefined);
@@ -113,7 +113,7 @@ describe('DynamicListDataEntry', () => {
   it('sets styling props when passed in', () => {
     const wrapper = shallow(<DynamicListDataEntry {...defaultProps} />);
 
-    const row = wrapper.find('.container');
+    const row = wrapper.find('.container').first();
 
     expect(row.prop('style')).toHaveProperty(
       'gridColumnGap',
@@ -256,7 +256,7 @@ describe('DynamicListDataEntry', () => {
       />,
     );
 
-    const input = wrapper.find('input');
+    const input = wrapper.find('input').first();
 
     expect(input.prop('disabled')).toBe(true);
   });

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

@@ -9,6 +9,7 @@ import { ObjectSchemaDefinition } from '../../FormStation';
 import { IconName, Icons } from '../../Icons';
 import { DynamicListColumn } from '../DynamicDataList.model';
 import classes from './DynamicListDataEntry.scss';
+import { createInputRenderer } from './Renderers';
 
 export enum DynamicListDataEntryMode {
   Add,
@@ -274,6 +275,8 @@ const renderField = function <T extends Data>(
       disabled,
     );
   } else {
-    return '';
+    return createInputRenderer({
+      placeholder: 'Enter value',
+    })(currentValue, error, onValueChanged, disabled);
   }
 };

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.tsx

@@ -202,7 +202,10 @@ export const DynamicListRow = <T extends Data>({
         );
       })}
       {showActionColumn && (
-        <div className={classes.actionButtonContainer}>
+        <div
+          className={classes.actionButtonContainer}
+          onClick={(e) => e.stopPropagation()}
+        >
           {inlineMenuData && !!inlineMenuData.length && (
             <InlineMenu
               actions={inlineMenuData}

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

@@ -63,7 +63,7 @@ $input-inactive: 1px solid var(--input-border-color, $input-border-color);
       }
     }
 
-    span {
+    label {
       padding-left: 15px;
     }
   }

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

@@ -64,6 +64,15 @@ export const Filter = <T extends Data>({
   const contentRef = useRef<HTMLDivElement>(null);
   const valueRef = useRef<HTMLDivElement>(null);
 
+  const inputId = `${String(options.property)}-filter-input`;
+  const labelId = `${String(options.property)}-filter-label`;
+  const inputBasedFilter = [
+    FilterTypes.FreeText,
+    FilterTypes.Numeric,
+    FilterTypes.Date,
+    FilterTypes.DateTime,
+  ];
+
   useEffect(() => {
     setContentHeight(
       (contentRef.current?.scrollHeight ?? 0) +
@@ -135,6 +144,7 @@ export const Filter = <T extends Data>({
             onError={onError}
             onValidate={onValidate}
             selectOnFocus={selectOnFocus}
+            inputId={inputId}
           />
         );
 
@@ -147,6 +157,7 @@ export const Filter = <T extends Data>({
             }
             onError={onError}
             onValidate={onValidate}
+            inputId={inputId}
           />
         );
 
@@ -158,6 +169,7 @@ export const Filter = <T extends Data>({
             onSelect={(value: FilterValue) =>
               onFilterValueChange(options.property, value)
             }
+            labelId={labelId}
           />
         );
 
@@ -169,6 +181,7 @@ export const Filter = <T extends Data>({
             onSelect={(value: FilterValue) =>
               onFilterValueChange(options.property, value?.toString())
             }
+            labelId={labelId}
           />
         );
       case FilterTypes.SearcheableOptions:
@@ -181,6 +194,8 @@ export const Filter = <T extends Data>({
               onFilterValueChange(options.property, value, stringValue)
             }
             maxItems={options.maxItems}
+            inputId={inputId}
+            labelId={labelId}
           />
         );
 
@@ -194,6 +209,7 @@ export const Filter = <T extends Data>({
             modifyTime={false}
             onError={onError}
             onValidate={onValidate}
+            inputId={inputId}
           />
         );
 
@@ -207,6 +223,7 @@ export const Filter = <T extends Data>({
             modifyTime={true}
             onError={onError}
             onValidate={onValidate}
+            inputId={inputId}
           />
         );
 
@@ -220,6 +237,7 @@ export const Filter = <T extends Data>({
             }}
             onError={onError}
             onValidate={onValidate}
+            labelId={labelId}
           />
         );
 
@@ -249,7 +267,15 @@ export const Filter = <T extends Data>({
         )}
         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)}

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}

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)}

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

@@ -14,6 +14,9 @@ export interface OptionFilterProps {
 
   /** CSS Class name for additional styles */
   className?: string;
+
+  /** Optional id for the label element */
+  labelId?: string;
 }
 
 export const OptionsFilter: React.FC<OptionFilterProps> = ({
@@ -21,9 +24,12 @@ export const OptionsFilter: React.FC<OptionFilterProps> = ({
   options,
   onSelect,
   className = '',
+  labelId,
 }) => {
   return (
     <div
+      role="radiogroup"
+      aria-labelledby={labelId}
       className={clsx(classes.container, 'options-filter-container', className)}
     >
       {options?.map((option: Option) => (
@@ -32,6 +38,8 @@ export const OptionsFilter: React.FC<OptionFilterProps> = ({
           onClick={() => onSelect(option.value)}
           key={option.label}
           data-test-value={option.value as string}
+          role="radio"
+          aria-checked={value === option.value}
         >
           <span
             className={clsx(value === option.value && classes.selected)}

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

@@ -14,6 +14,9 @@ interface SearcheableOptionFilterProps
   searchInputPlaceholder?: string;
   maxItems?: number;
   onSelect: (value: string, stringValue?: string) => void;
+
+  /** Optional id for the input field */
+  inputId?: string;
 }
 
 export const SearcheableOptionsFilter: React.FC<
@@ -24,6 +27,7 @@ export const SearcheableOptionsFilter: React.FC<
   maxItems = 10,
   onSelect,
   className,
+  inputId,
   ...rest
 }) => {
   const [options, setOptions] = useState<Option[]>([]);
@@ -56,9 +60,10 @@ export const SearcheableOptionsFilter: React.FC<
         )}
       >
         <input
+          id={inputId}
           autoFocus
           onChange={debounce(onChangeHandler, 500)}
-          className={clsx(classes.inputValue, '' && classes.hasError)}
+          className={classes.inputValue}
           placeholder={searchInputPlaceholder}
         />
       </div>

package/src/components/FormElements/Radio/Radio.tsx

@@ -5,6 +5,7 @@ import {
   ConfirmationConfig,
   ConfirmationMode,
 } from '../../ConfirmDialog';
+import { SvgElement } from '../../VisualElements/SvgElement';
 import { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
 import classes from './Radio.scss';
@@ -42,7 +43,7 @@ export const RadioButton: React.FC<RadioButtonProps> = ({
   confirmValue,
   disabled = false,
 }) => (
-  <svg
+  <SvgElement
     className={clsx(classes.buttonContainer, {
       [classes.checked]: checked,
       [classes.hasError]: hasError,
@@ -59,7 +60,7 @@ export const RadioButton: React.FC<RadioButtonProps> = ({
   >
     <circle className={classes.radioOutline} cx="17" cy="17" r="15" />
     <circle className={classes.radioDot} cx="17" cy="17" r="7.5" />
-  </svg>
+  </SvgElement>
 );
 
 /**

package/src/components/FormElements/ToggleButton/ToggleButton.tsx

@@ -7,6 +7,7 @@ import {
   ConfirmationConfig,
   ConfirmationMode,
 } from '../../ConfirmDialog';
+import { SvgElement } from '../../VisualElements/SvgElement';
 import { BaseFormControl } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
 import classes from './ToggleButton.scss';
@@ -119,43 +120,22 @@ export const ToggleButton: React.FC<ToggleButtonProps> = ({
           data-test-checked={selected}
         >
           <div className={clsx(classes.off, { [classes.active]: !selected })}>
-            <svg
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 40 40"
-            >
+            <SvgElement viewBox="0 0 40 40">
               {showONOFFText && !selected && (
                 <g className={classes.svgText}>
-                  <path
-                    d="M6.5,20.1c0-1,0.2-1.9,0.5-2.6c0.2-0.5,0.5-1,0.9-1.4c0.4-0.4,0.8-0.7,1.3-0.9c0.6-0.3,1.4-0.4,2.2-0.4
-		c1.5,0,2.7,0.5,3.6,1.4c0.9,0.9,1.3,2.2,1.3,3.8c0,1.6-0.4,2.9-1.3,3.8c-0.9,0.9-2.1,1.4-3.6,1.4c-1.5,0-2.7-0.5-3.6-1.4
-		S6.5,21.7,6.5,20.1z M8.6,20c0,1.1,0.3,2,0.8,2.6c0.5,0.6,1.2,0.9,2,0.9c0.8,0,1.5-0.3,2-0.9c0.5-0.6,0.8-1.5,0.8-2.6
-		c0-1.1-0.3-2-0.8-2.6s-1.2-0.8-2-0.8c-0.8,0-1.5,0.3-2,0.9C8.8,18,8.6,18.8,8.6,20z"
-                  ></path>
-                  <path d="M17.9,25V15h6.9v1.7H20v2.4h4.2v1.7H20V25H17.9z"></path>
-                  <path d="M26.6,25V15h6.9v1.7h-4.9v2.4h4.2v1.7h-4.2V25H26.6z"></path>
+                  <OffIcon />
                 </g>
               )}
-            </svg>
+            </SvgElement>
           </div>
           <div className={clsx(classes.on, { [classes.active]: selected })}>
-            <svg
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 40 40"
-            >
+            <SvgElement viewBox="0 0 40 40">
               {showONOFFText && selected && (
                 <g className={classes.svgText}>
-                  <path
-                    d="M10.4,20.1c0-1,0.2-1.9,0.5-2.6c0.2-0.5,0.5-1,0.9-1.4s0.8-0.7,1.3-0.9c0.6-0.3,1.3-0.4,2.2-0.4
-		c1.5,0,2.7,0.5,3.5,1.4s1.3,2.2,1.3,3.8c0,1.6-0.4,2.9-1.3,3.8c-0.9,0.9-2.1,1.4-3.5,1.4c-1.5,0-2.7-0.5-3.6-1.4
-		C10.8,22.9,10.4,21.7,10.4,20.1z M12.4,20c0,1.1,0.3,2,0.8,2.6c0.5,0.6,1.2,0.9,2,0.9s1.5-0.3,2-0.9C17.7,22,18,21.1,18,20
-		c0-1.1-0.3-2-0.8-2.6s-1.2-0.8-2-0.8s-1.5,0.3-2,0.9C12.7,18,12.4,18.8,12.4,20z"
-                  ></path>
-                  <path d="M21.7,25V15h2l4.1,6.7V15h1.9v10h-2l-4-6.5V25H21.7z"></path>
+                  <OnIcon />
                 </g>
               )}
-            </svg>
+            </SvgElement>
           </div>
         </button>
         {confirmation && (
@@ -176,3 +156,28 @@ export const ToggleButton: React.FC<ToggleButtonProps> = ({
     </>
   );
 };
+
+const OffIcon: React.FC = () => (
+  <>
+    <path
+      d="M6.5,20.1c0-1,0.2-1.9,0.5-2.6c0.2-0.5,0.5-1,0.9-1.4c0.4-0.4,0.8-0.7,1.3-0.9c0.6-0.3,1.4-0.4,2.2-0.4
+c1.5,0,2.7,0.5,3.6,1.4c0.9,0.9,1.3,2.2,1.3,3.8c0,1.6-0.4,2.9-1.3,3.8c-0.9,0.9-2.1,1.4-3.6,1.4c-1.5,0-2.7-0.5-3.6-1.4
+S6.5,21.7,6.5,20.1z M8.6,20c0,1.1,0.3,2,0.8,2.6c0.5,0.6,1.2,0.9,2,0.9c0.8,0,1.5-0.3,2-0.9c0.5-0.6,0.8-1.5,0.8-2.6
+c0-1.1-0.3-2-0.8-2.6s-1.2-0.8-2-0.8c-0.8,0-1.5,0.3-2,0.9C8.8,18,8.6,18.8,8.6,20z"
+    />
+    <path d="M17.9,25V15h6.9v1.7H20v2.4h4.2v1.7H20V25H17.9z" />
+    <path d="M26.6,25V15h6.9v1.7h-4.9v2.4h4.2v1.7h-4.2V25H26.6z" />
+  </>
+);
+
+const OnIcon: React.FC = () => (
+  <>
+    <path
+      d="M10.4,20.1c0-1,0.2-1.9,0.5-2.6c0.2-0.5,0.5-1,0.9-1.4s0.8-0.7,1.3-0.9c0.6-0.3,1.3-0.4,2.2-0.4
+c1.5,0,2.7,0.5,3.5,1.4s1.3,2.2,1.3,3.8c0,1.6-0.4,2.9-1.3,3.8c-0.9,0.9-2.1,1.4-3.5,1.4c-1.5,0-2.7-0.5-3.6-1.4
+C10.8,22.9,10.4,21.7,10.4,20.1z M12.4,20c0,1.1,0.3,2,0.8,2.6c0.5,0.6,1.2,0.9,2,0.9s1.5-0.3,2-0.9C17.7,22,18,21.1,18,20
+c0-1.1-0.3-2-0.8-2.6s-1.2-0.8-2-0.8s-1.5,0.3-2,0.9C12.7,18,12.4,18.8,12.4,20z"
+    />
+    <path d="M21.7,25V15h2l4.1,6.7V15h1.9v10h-2l-4-6.5V25H21.7z" />
+  </>
+);

package/src/components/Hub/Hub.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
+import { SvgElement } from '../VisualElements/SvgElement';
 import { Hub } from './Hub';
 import { HubItem } from './Hub.model';
 
@@ -14,7 +15,7 @@ const defaultContainer = {
 
 const DefaultIcon: React.FC = () => {
   return (
-    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+    <SvgElement viewBox="0 0 40 40">
       <path
         vectorEffect="non-scaling-stroke"
         fill="none"
@@ -22,7 +23,7 @@ const DefaultIcon: React.FC = () => {
         d="M39,39H1V1h38V39z M39.1,26l-8.4-8.7l-9.1,11.5
 	l-6.4-5.4L3.6,39.1 M12.8,7.8c-2.4,0-4.4,2-4.4,4.4s2,4.4,4.4,4.4s4.4-2,4.4-4.4S15.3,7.8,12.8,7.8z"
       />
-    </svg>
+    </SvgElement>
   );
 };
 

package/src/components/Hub/Tile/Tile.spec.tsx

@@ -1,5 +1,6 @@
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import React from 'react';
+import { MemoryRouter } from 'react-router-dom'; // Add this import
 import { Tile } from './Tile';
 import { TileProps } from './Tile.model';
 
@@ -31,7 +32,11 @@ describe('Tile', () => {
   });
 
   it('renders an icon when passed as a string URL', () => {
-    const wrapper = shallow(<Tile {...mockProps} />);
+    const wrapper = mount(
+      <MemoryRouter>
+        <Tile {...mockProps} />
+      </MemoryRouter>,
+    );
     const iconUrl = wrapper.find('img').prop('src');
 
     expect(iconUrl).toBe(`${mockProps.icon}`);

package/src/components/Hub/Tile/Tile.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { ImgElement } from '../../VisualElements/ImgElement';
 import { TileProps } from './Tile.model';
 import classes from './Tile.scss';
 
@@ -34,7 +35,7 @@ export const Tile: React.FC<TileProps> = ({
         {React.isValidElement(icon)
           ? icon
           : typeof icon === 'string' && (
-              <img src={icon} alt={`${label} icon`} />
+              <ImgElement src={icon} decorative={true} />
             )}
       </div>
       <div className={classes.label}>

package/src/components/Icons/Icons.scss

@@ -5,6 +5,7 @@
 
   height: 35px;
 
+  rect,
   polygon,
   polyline,
   path,