@axinom/mosaic-ui 0.66.0-rc.9 → 0.66.1

package/src/components/Tabs/Tab/CustomTab.scss

@@ -5,7 +5,7 @@
 
   display: grid;
   height: 50px;
-  color: $blue;
+  color: var(--ax-primary);
   font-size: 14px;
   font-weight: bold;
   border-bottom: none;
@@ -17,17 +17,17 @@
 
   &.selected {
     background: white;
-    color: $dark-blue;
+    color: var(--ax-primary-dark);
   }
 
   &:hover:not(.selected):not(.disabled) {
-    background-color: $blue;
+    background-color: var(--ax-primary);
     transition: background-color $confirmation-transition linear;
     color: white;
   }
 
   &.disabled {
-    color: $gray;
+    color: var(--ax-neutral);
     cursor: default;
   }
 }

package/src/components/Tabs/TabList/CustomTabList.scss

@@ -4,6 +4,6 @@
   border: none;
   margin: 0;
   padding: 0;
-  background-color: $light-gray-2;
-  border-top: 1px solid $light-gray-2;
+  background-color: var(--ax-neutral-lighter);
+  border-top: 1px solid var(--ax-neutral-lighter);
 }

package/src/components/Utils/Postgraphile/CreateConnectionRenderer.spec.ts

@@ -20,7 +20,10 @@ describe('createConnectionRenderer', () => {
       };
 
       const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
       const result = renderer(connection);
 
       expect(result).toBe('Item 1, Item 2, Item 3');
@@ -32,7 +35,10 @@ describe('createConnectionRenderer', () => {
       };
 
       const selector = (item: string) => item;
-      const renderer = createConnectionRenderer<StringConnection>(selector);
+      const renderer = createConnectionRenderer<StringConnection>(
+        selector,
+        false,
+      );
       const result = renderer(connection);
 
       expect(result).toBe('apple, banana, cherry');
@@ -48,7 +54,10 @@ describe('createConnectionRenderer', () => {
 
       const selector = (item: { id: string; name: string }, index: number) =>
         `${index + 1}. ${item.name} (${item.id})`;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
       const result = renderer(connection);
 
       expect(result).toBe('1. Item 1 (1), 2. Item 2 (2)');
@@ -57,7 +66,10 @@ describe('createConnectionRenderer', () => {
     it('should return empty string when nodes array is empty', () => {
       const connection: TestConnection = { nodes: [] };
       const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
       const result = renderer(connection);
 
       expect(result).toBe('');
@@ -75,7 +87,10 @@ describe('createConnectionRenderer', () => {
       };
 
       const selector = (item: { id: number; value: number }) => item.value;
-      const renderer = createConnectionRenderer<NumberConnection>(selector);
+      const renderer = createConnectionRenderer<NumberConnection>(
+        selector,
+        false,
+      );
       const result = renderer(connection);
 
       expect(result).toBe('100, 200');
@@ -84,21 +99,30 @@ describe('createConnectionRenderer', () => {
     it('should throw error when connection.nodes is undefined', () => {
       const connection = { nodes: undefined } as unknown as TestConnection;
       const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
 
       expect(() => renderer(connection)).toThrow();
     });
 
     it('should throw error when value is null', () => {
       const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
 
       expect(() => renderer(null)).toThrow();
     });
 
     it('should throw error when value is undefined', () => {
       const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
 
       expect(() => renderer(undefined)).toThrow();
     });
@@ -111,7 +135,10 @@ describe('createConnectionRenderer', () => {
       };
 
       const selector = (item: string) => item;
-      const renderer = createConnectionRenderer<StringConnection>(selector);
+      const renderer = createConnectionRenderer<StringConnection>(
+        selector,
+        false,
+      );
       const result = renderer(connection);
 
       expect(result).toBe('item, with comma, item with "quotes", normal item');
@@ -127,7 +154,10 @@ describe('createConnectionRenderer', () => {
       };
 
       const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
       const result = renderer(connection);
 
       expect(result).toBe(', Item 2, ');
@@ -139,7 +169,10 @@ describe('createConnectionRenderer', () => {
       };
 
       const selector = (item: { id: string; name: string }) => item.name;
-      const renderer = createConnectionRenderer<TestConnection>(selector);
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
       const result = renderer(connection);
 
       expect(result).toBe('Single Item');
@@ -161,7 +194,10 @@ describe('createConnectionRenderer', () => {
 
       const selector = (item: { customField: number; label: string }) =>
         `${item.label}: ${item.customField}`;
-      const renderer = createConnectionRenderer<CustomConnection>(selector);
+      const renderer = createConnectionRenderer<CustomConnection>(
+        selector,
+        false,
+      );
       const result = renderer(connection);
 
       expect(result).toBe('Custom 1: 42, Custom 2: 84');

package/src/components/Utils/Postgraphile/CreateConnectionRenderer.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { TagsRenderer } from '../../List';
 
 interface Connection {
   nodes: unknown[];
@@ -18,14 +19,14 @@ export type SelectorFunction<T> = (
  */
 export function createConnectionRenderer<T extends Connection>(
   selector: SelectorFunction<T['nodes'][number]>,
-  // renderAsTags = true,
+  renderAsTags = true,
 ): (val: unknown) => string | ReactNode {
   const ConnectionRenderer = (val: unknown): string | ReactNode => {
     const value = val as T;
 
-    // if (renderAsTags) {
-    //   return TagsRenderer(value.nodes.map(selector));
-    // }
+    if (renderAsTags) {
+      return TagsRenderer(value.nodes.map(selector));
+    }
 
     return value.nodes.map(selector).join(', ');
   };

package/src/components/VisualElements/ImgElement.spec.tsx

@@ -0,0 +1,92 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { ImgElement } from './ImgElement';
+
+describe('ImgElement', () => {
+  it('renders meaningful image with alt text', () => {
+    const alt = 'Test image';
+    const src = '/test.jpg';
+    const wrapper = shallow(<ImgElement src={src} alt={alt} />);
+
+    const img = wrapper.find('img');
+    expect(img.prop('src')).toBe(src);
+    expect(img.prop('alt')).toBe(alt);
+    expect(img.prop('aria-hidden')).toBeUndefined();
+    expect(img.prop('role')).toBeUndefined();
+  });
+
+  it('renders decorative image with accessibility attributes', () => {
+    const src = '/decorative.jpg';
+    const wrapper = shallow(<ImgElement src={src} decorative={true} />);
+
+    const img = wrapper.find('img');
+    expect(img.prop('src')).toBe(src);
+    expect(img.prop('alt')).toBe('');
+    expect(img.prop('aria-hidden')).toBe('true');
+    expect(img.prop('role')).toBe('presentation');
+  });
+
+  it('forwards additional HTML img attributes for meaningful images', () => {
+    const width = 100;
+    const height = 200;
+    const className = 'test-class';
+
+    const wrapper = shallow(
+      <ImgElement
+        src="/test.jpg"
+        alt="Test image"
+        width={width}
+        height={height}
+        className={className}
+      />,
+    );
+
+    const img = wrapper.find('img');
+    expect(img.prop('width')).toBe(width);
+    expect(img.prop('height')).toBe(height);
+    expect(img.prop('className')).toBe(className);
+  });
+
+  it('forwards additional HTML img attributes for decorative images', () => {
+    const width = 50;
+    const height = 60;
+    const className = 'icon';
+
+    const wrapper = shallow(
+      <ImgElement
+        src="/decorative.jpg"
+        decorative={true}
+        width={width}
+        height={height}
+        className={className}
+      />,
+    );
+
+    const img = wrapper.find('img');
+    expect(img.prop('width')).toBe(width);
+    expect(img.prop('height')).toBe(height);
+    expect(img.prop('className')).toBe(className);
+  });
+
+  it('uses meaningful image behavior by default', () => {
+    const alt = 'Default behavior';
+    const wrapper = shallow(<ImgElement src="/default.jpg" alt={alt} />);
+
+    const img = wrapper.find('img');
+    expect(img.prop('alt')).toBe(alt);
+    expect(img.prop('aria-hidden')).toBeUndefined();
+    expect(img.prop('role')).toBeUndefined();
+  });
+
+  it('renders with decorative=false explicitly', () => {
+    const alt = 'Explicit meaningful';
+    const wrapper = shallow(
+      <ImgElement src="/explicit.jpg" alt={alt} decorative={false} />,
+    );
+
+    const img = wrapper.find('img');
+    expect(img.prop('alt')).toBe(alt);
+    expect(img.prop('aria-hidden')).toBeUndefined();
+    expect(img.prop('role')).toBeUndefined();
+  });
+});

package/src/components/VisualElements/ImgElement.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+type BaseImgElementProps = Omit<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  'alt'
+>;
+
+/** Props for decorative images - alt text not needed or allowed */
+export interface DecorativeImageProps {
+  /** Whether the image is decorative (sets aria-hidden="true", alt="", and role="presentation") */
+  decorative: true;
+  /** Alt text - not needed when decorative */
+  alt?: never;
+}
+
+/** Props for meaningful images - alt text is required */
+export interface MeaningfulImageProps {
+  /** Whether the image is decorative (sets aria-hidden="true", alt="", and role="presentation") */
+  decorative?: false;
+  /** Alt text - required for non-decorative images */
+  alt: string;
+}
+
+/** Union type for all image accessibility configurations */
+export type ImageAccessibilityProps =
+  | DecorativeImageProps
+  | MeaningfulImageProps;
+
+export type ImgElementProps = BaseImgElementProps & ImageAccessibilityProps;
+
+/**
+ * Centralized image component with proper accessibility handling.
+ * Provides consistent image rendering across the application with automatic
+ * accessibility attributes based on the decorative flag.
+ *
+ * For non-decorative images, alt text is required to ensure accessibility.
+ * For decorative images, alt text is automatically set to empty string.
+ *
+ * @example Basic image with required alt text
+ * <ImgElement
+ *   src="/path/to/image.jpg"
+ *   alt="Description of the image"
+ * />
+ *
+ * @example Decorative image (alt not required or allowed)
+ * <ImgElement
+ *   src="/path/to/decorative.jpg"
+ *   decorative={true}
+ * />
+ *
+ * @example Navigation icon
+ * <ImgElement
+ *   src="/icons/menu.svg"
+ *   decorative={true}
+ *   width={24}
+ *   height={24}
+ * />
+ */
+export const ImgElement: React.FC<ImgElementProps> = ({
+  decorative = false,
+  ...imgProps
+}) => {
+  const accessibilityProps = decorative
+    ? {
+        'aria-hidden': 'true' as const,
+        alt: '',
+        role: 'presentation' as const,
+      }
+    : {};
+
+  return <img {...accessibilityProps} {...imgProps} />;
+};

package/src/components/VisualElements/SvgElement.spec.tsx

@@ -0,0 +1,158 @@
+import { mount, shallow } from 'enzyme';
+import React from 'react';
+import { SvgElement, SvgElementProps } from './SvgElement';
+
+describe('SvgElement', () => {
+  it('renders the component without crashing', () => {
+    const wrapper = shallow(<SvgElement />);
+
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('renders with default viewBox', () => {
+    const wrapper = mount(<SvgElement />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('viewBox')).toBe('0 0 40 40');
+  });
+
+  it('renders with custom viewBox', () => {
+    const customViewBox = '0 0 24 24';
+    const wrapper = mount(<SvgElement viewBox={customViewBox} />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('viewBox')).toBe(customViewBox);
+  });
+
+  it('passes down className to svg element', () => {
+    const testClass = 'custom-icon-class';
+    const wrapper = mount(<SvgElement className={testClass} />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.hasClass(testClass)).toBe(true);
+  });
+
+  it('renders children inside svg', () => {
+    const d = 'M10 10L20 20';
+    const cx = 15;
+    const cy = 15;
+    const r = 5;
+    const wrapper = mount(
+      <SvgElement>
+        <path d={d} />
+        <circle cx={cx} cy={cy} r={r} />
+      </SvgElement>,
+    );
+    const circle = wrapper.find('circle');
+
+    expect(wrapper.find('path')).toHaveLength(1);
+    expect(wrapper.find('circle')).toHaveLength(1);
+    expect(wrapper.find('path').prop('d')).toBe(d);
+    expect(circle.prop('cx')).toBe(cx);
+    expect(circle.prop('cy')).toBe(cy);
+    expect(circle.prop('r')).toBe(r);
+  });
+
+  it('renders as decorative icon by default', () => {
+    const wrapper = mount(<SvgElement />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('role')).toBe('presentation');
+    expect(svg.prop('aria-hidden')).toBe('true');
+    expect(svg.prop('aria-label')).toBeUndefined();
+  });
+
+  it('renders as semantic icon when aria-label is provided', () => {
+    const ariaLabel = 'Custom icon description';
+    const wrapper = mount(<SvgElement aria-label={ariaLabel} />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('role')).toBe('img');
+    expect(svg.prop('aria-hidden')).toBeUndefined();
+    expect(svg.prop('aria-label')).toBe(ariaLabel);
+  });
+
+  it('renders as semantic icon when title is provided', () => {
+    const title = 'Icon tooltip';
+    const wrapper = mount(<SvgElement title={title} />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('role')).toBe('img');
+    expect(svg.prop('aria-hidden')).toBeUndefined();
+    expect(wrapper.find('title')).toHaveLength(1);
+    expect(wrapper.find('title').text()).toBe(title);
+  });
+
+  it('renders as semantic icon when both aria-label and title are provided', () => {
+    const ariaLabel = 'Icon description';
+    const title = 'Icon tooltip';
+    const wrapper = mount(<SvgElement aria-label={ariaLabel} title={title} />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('role')).toBe('img');
+    expect(svg.prop('aria-hidden')).toBeUndefined();
+    expect(svg.prop('aria-label')).toBe(ariaLabel);
+    expect(wrapper.find('title')).toHaveLength(1);
+    expect(wrapper.find('title').text()).toBe(title);
+  });
+
+  it('does not render title element when title prop is not provided', () => {
+    const wrapper = mount(<SvgElement aria-label="Icon" />);
+
+    expect(wrapper.find('title')).toHaveLength(0);
+  });
+
+  it('applies default SVG attributes', () => {
+    const wrapper = mount(<SvgElement />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('focusable')).toBe('false');
+  });
+
+  it('passes through additional SVG attributes', () => {
+    const customProps: SvgElementProps = {
+      id: 'custom-id',
+      fill: 'currentColor',
+      stroke: 'red',
+      strokeWidth: '2',
+    };
+
+    const wrapper = mount(<SvgElement {...customProps} />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('id')).toBe('custom-id');
+    expect(svg.prop('fill')).toBe('currentColor');
+    expect(svg.prop('stroke')).toBe('red');
+    expect(svg.prop('strokeWidth')).toBe('2');
+  });
+
+  it('allows overriding default attributes', () => {
+    const wrapper = mount(
+      <SvgElement
+        version="2.0"
+        xmlns="http://custom-namespace.com"
+        focusable="true"
+      />,
+    );
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('version')).toBe('2.0');
+    expect(svg.prop('xmlns')).toBe('http://custom-namespace.com');
+    expect(svg.prop('focusable')).toBe('true');
+  });
+
+  it('prioritizes explicit role over calculated role', () => {
+    const wrapper = mount(<SvgElement role="button" aria-label="Click me" />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('role')).toBe('button');
+  });
+
+  it('prioritizes explicit aria-hidden over calculated value', () => {
+    const wrapper = mount(<SvgElement aria-hidden="false" />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('aria-hidden')).toBe('false');
+    expect(svg.prop('role')).toBe('presentation'); // Still decorative without label/title
+  });
+});

package/src/components/VisualElements/SvgElement.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+export interface SvgElementProps extends React.SVGAttributes<SVGElement> {
+  /** SVG title (tooltip or additional description shown on hover) */
+  title?: string;
+}
+
+/**
+ * Reusable SVG wrapper with accessibility support and default props.
+ * @example
+ * <SvgElement aria-label="Custom icon" title="Custom tooltip">
+ *   <path d="..." />
+ * </SvgElement>
+ */
+export const SvgElement: React.FC<SvgElementProps> = ({
+  children,
+  className,
+  'aria-label': ariaLabel,
+  title,
+  viewBox = '0 0 40 40',
+  ...svgProps
+}) => {
+  // Determine if this is a decorative icon (no accessible label or title)
+  const isDecorative = !ariaLabel && !title;
+
+  return (
+    <svg
+      className={className}
+      viewBox={viewBox}
+      role={isDecorative ? 'presentation' : 'img'}
+      aria-hidden={isDecorative ? 'true' : undefined}
+      aria-label={ariaLabel}
+      focusable="false"
+      {...svgProps}
+    >
+      {title && <title>{title}</title>}
+      {children}
+    </svg>
+  );
+};

package/src/components/VisualElements/index.ts

@@ -0,0 +1,7 @@
+export {
+  DecorativeImageProps,
+  ImgElement,
+  ImgElementProps,
+  MeaningfulImageProps,
+} from './ImgElement';
+export { SvgElement, SvgElementProps } from './SvgElement';

package/src/components/index.ts

@@ -25,4 +25,5 @@ export * from './PageHeader';
 export * from './ProgressBar';
 export * from './Tabs';
 export * from './Utils';
+export * from './VisualElements';
 export * from './models';

package/src/helpers/idleCallbackHelpers.ts

@@ -0,0 +1,66 @@
+/**
+ * Type for the callback handle returned by scheduleIdleCallback.
+ * Can be either a number (from requestIdleCallback) or a NodeJS.Timeout (from setTimeout).
+ */
+export type IdleCallbackHandle = number | NodeJS.Timeout;
+
+/**
+ * Safely schedules a callback to be executed when the browser is idle.
+ * Falls back to setTimeout if requestIdleCallback is not available.
+ *
+ * @param callback - The function to execute during idle time
+ * @param options - Optional configuration (timeout in ms)
+ * @returns A handle that can be passed to cancelScheduledCallback
+ *
+ * @example
+ * ```typescript
+ * const handle = scheduleIdleCallback(() => {
+ *   console.log('Running during idle time');
+ * });
+ *
+ * // Later, if needed:
+ * cancelScheduledCallback(handle);
+ * ```
+ */
+export function scheduleIdleCallback(
+  callback: IdleRequestCallback,
+  options?: IdleRequestOptions,
+): IdleCallbackHandle {
+  if (typeof requestIdleCallback !== 'undefined') {
+    return requestIdleCallback(callback, options);
+  }
+
+  // Fallback to setTimeout for browsers that don't support requestIdleCallback
+  // Use a short timeout to approximate idle behavior
+  const timeout = options?.timeout ?? 1;
+  return setTimeout(() => {
+    const deadline: IdleDeadline = {
+      didTimeout: false,
+      timeRemaining: () => 50, // Approximate 50ms of available time
+    };
+    callback(deadline);
+  }, timeout);
+}
+
+/**
+ * Cancels a callback scheduled with scheduleIdleCallback.
+ * Works with both requestIdleCallback and setTimeout fallback.
+ *
+ * @param handle - The handle returned by scheduleIdleCallback
+ *
+ * @example
+ * ```typescript
+ * const handle = scheduleIdleCallback(() => {
+ *   console.log('This might not run');
+ * });
+ *
+ * cancelScheduledCallback(handle);
+ * ```
+ */
+export function cancelScheduledCallback(handle: IdleCallbackHandle): void {
+  if (typeof cancelIdleCallback !== 'undefined' && typeof handle === 'number') {
+    cancelIdleCallback(handle);
+  } else {
+    clearTimeout(handle as NodeJS.Timeout);
+  }
+}

package/src/helpers/index.ts

@@ -1 +1,6 @@
+export {
+  cancelScheduledCallback,
+  scheduleIdleCallback,
+  type IdleCallbackHandle,
+} from './idleCallbackHelpers';
 export { Nullable } from './utils';

package/src/hooks/useResize/ResizeIndicator.scss

@@ -0,0 +1,7 @@
+.resizeIndicator {
+  position: fixed;
+  width: 1px;
+  background-color: var(--explorer-list-row-border, #dddddd);
+  pointer-events: none;
+  z-index: 10;
+}